环境配置

安装 Node.js

下载 | Node.js 中文网（Node.js自带npm包管理工具）
配置环境变量
检查npm和node是否安装成功
```
npm -v
node -v
```

安装镜像并检查cnpm是否安装成功

npm install -g cnpm --registry=https://registry.npm.taobao.org

以上步骤出现问题检查一下网络状况及环境变量。

安装 vue-cli

若安装过vue-cli，首先删除2.0版本：cnpm uni -g vue-cli
```
cnpm i -g @vue/cli
```
检查是否安装成功
```
vue -v
```

初始化Vue 3项目

使用VSCode进行编辑，在终端中输入

vue create project-name

会弹出选项

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features

若选择Manually select features，弹出多选选项

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

Babel：JS编译器，可以将ES6语法转换为浏览器可识别的ES5，JSX转换为JS
TypeScript：比JS类型更强，Vue兼容TS
PWA：PWA 全称为 Progressive Web App，中文译为渐进式 Web APP，其目的是通过各种 Web
技术实现与原生 App 相近的用户体验。
Router：路由配置
Vuex：Vue的状态管理模式，管理组件的状态及其变化
CSS Pre-processors：CSS预处理器，例如sass、less，对已有css功能进行扩展，简化CSS
Linter/Formatter：代码风格检查和格式化，例如ESLint
Unit Testing：单元测试
E2E Testing：集成测试

初始化后运行项目
```
cd project-name
npm run serve
```

项目目录结构

node_modules：所有通过npm包管理工具下载的项目依赖包
public：公共文件夹、网站的图标、入口的HTML文件
src：源文件目录source简称
- assets：静态资源文件（图片、CSS全局文件）
- components： Vue组件文件夹
- router：vue-router路由文件
- store：vuex
- views：
- App.vue：根组件
- main.js：JS入口文件，用于挂在项目根组件、引入资源
.gitignore：配置Git忽略的文件
package.json：命令配置和包管理文件

本文由落影汐雾原创，采用保留署名-非商业性使用-禁止演绎 4.0-国际许可协议
本文链接：https://x.lyxw.xyz/2023/vue/