Vue3.0项目搭建

Vue3.0项目搭建

新建文件夹，在文件夹路径中，cmd进入命令窗口

1.查看node.js版本号，输入node -v回车，没有安装的话参考node.js官网https://nodejs.org/zh-cn/download/

2. 查看vue-cli版本号,输入vue -V回车，没有安装vue-cli的话进行安装，在此之前进行淘宝镜像npm config set registry https://registry.npm.taobao.org，然后再输入
cnpm i -g @vue/cli安装，如果之前安装过vue-cli，你需要把2.0相关的删除cnpm uni -g vue-cli

3. 新建项目名称，vue create 项目名称直接回车

4.选择初始化项目的配置，default是自动安装，manually手动安装(↑↓键选择 按下回车键进行选择)，我选择手动安装

5.根据项目需要进行选择添加的配置项（空格键来选中）

*Babel：使用babel，便于将我们源代码进行转码（把es6=>es5）
*TypeScript：使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处
*Progressive Web App(PWA)：使用渐进式网页应用（PWA）
*Router：使用vue-router
*Vuex：使用vuex状态管理器
*CSS Pre-processors：使用CSS预处理器，比如：less，sass等
*Linter/Formatter：使用代码风格检查和格式化
*Unit Testing：使用单元测试
*E2E Testing：使用E2E测试, end to end（端到端）是黑盒测试的一种

这是我个人项目vue3中所常用的配置

6.选择版本，3.0版本

7.路由模式, 是否选择history模式，我选择Y

8.选择一种CSS预处理器。我选择了第二个

9.选择一种代码格式化检测工具，我选择第一个

*TSLint: ts格式检验工具
*ESLint with error prevention only: ESLint 只会进行错误提醒
*ESLint + Airbnb config: ESLint Airbnb标准
*ESLint + Standard config: ESLint Standard 标准
*ESLint + Prettier: ESLint（代码质量检测）+ Prettier（代码格式化工具）

10.代码检查方式: 保存时检查 or 提交时检查; 我选择, 保存时检查，选择第一个

11.Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里? 这里方便配置清晰好看, 我选择每个配置单独文件。

12.是否需要保存当前配置，在以后的项目中可快速构建? 保存后, 后续创建项目时可以直接选择该配置, 不需单独配置，我选择no

13.回车之后自动化初始化项目，看到这个就说明项目已经初始化成功，然后cd dyt进入文件夹，运行npm run serve指令项目就启动了


此时vue3的项目搭建完成