【VUE3】0.0项目初始化

前置步骤

安装Node环境

访问 Node.js 官网：Node.js — Run JavaScript Everywhere ，点击左侧的下载按钮，下载 Node.js LTS 版本的安装包：学习 Vue 3, 需要安装 Node.js 16.0 版本或者更高, LTS 表示该安装包是一个被长期支持的版本，可以理解成是一个稳定版本。

创建项目工程

1. 切换到指定目录

   cd D:\Projects\vue-project

2. 执行创建 Vue 项目命令，该命令会安装并执行 create-vue, 它是 Vue 官方的项目脚手架工具。

   npm create vue@latest

   

3. 项目目录说明

   • node_modules : 项目依赖包文件夹，比如通过 npm install 包名 安装的包都会放在这个目录下，因为现在还没有执行 npm install 命令，所以还未生成该文件夹；

   • public : 公共资源目录，用于存放公共资源，如 favicon.ico 图标等；

   • index.html : 首页；

   • package.json : 项目描述以及依赖；

   • package-lock.json : 版本管理使用的文件；

   • README.md : 用于项目描述的 markdown 文档；

   • src : 核心文件目录，源码都放在这里面；

   src目录下

   • assets : 静态资源目录，用于存放样式、图片、字体等；
   • components: 组件文件夹，通用的组件存放目录；
   • App.vue: 主组件，也是页面的入口文件，所有页面都是在 App.vue 下进行路由切换的；
   • main.js : 入口 Javascript 文件；

启动项目

# 进入项目文件夹
cd vue-project3
# 安装项目所需依赖
npm install
# 启动项目
npm run dev

删除多余文件

src下的文件全部删除

新建文件

1. App.vue

   <template>
       <h1>Hello, Vue 3 !</h1>
   </template>
   
   <script setup>
   
   </script>
   
   <style scoped>
   
   </style>
   </style>

2. main.js

   // import { createApp } from 'vue' // 引入 createApp 方法
   import App from './App.vue'     // 引入 App.vue 组件
   
   import './assets/main.css'      // 引入 main.css 样式文件
   
   // 创建应用，并将 App 根组件挂载到 <div id="#app"></div> 中
   createApp(App).mount('#app')

3. 重新启动

   npm run dev

   

总结

步骤比较简单，看十遍不如上手操作一遍（多操作几遍更好）。