vue-cli3 搭建项目详细步骤说明

vue-cli3 搭建项目

npm使用国内淘宝镜像

1.临时使用: npm --registry https://registry.npm.taobao.org install express
2. 永久使用: npm config set registry https://registry.npm.taobao.org
3. 查看是否配置成功: npm config get registry，npm info express
4. 如果需要恢复成原来的官方地址只需要执行如下命令: npm config set registry https://registry.npmjs.org

一、安装

1.全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步： npm uninstall vue-cli -g //或者 yarn global remove vue-cli
2.下载安装nodeJs，中文官方下载地址：http://nodejs.cn/download/
3. 安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）: cnpm install -g @vue/cli 或 yarn global add @vue/cli

二、搭建项目的步骤

1.打开项目文件夹进入cmd 输入 npm install -g @vue/cli 或者 yarn global add @vue/cli

2. 下载好之后输入vue create ‘你的项目名’ 回车创建

3.接着就会进入问答环节（选择一些配置）

1.Please pick a preset: (Use arrow keys) --> 请选择一个预设:(使用方向键):

1. default ：默认配置 
2. Manually select features： 自己手动选择

2. Check the features needed for your project --> 检查项目所需的特性:

1. babel：转换es6语法的这个必须要
2. typescript：javascript 的超集
3. router：管理路由
4. vuex：状态管理
5. css Pre-processors：样式预处理器
6. linter/Formatter：统一代码风格
7. Unit Testing：单元测试
8. E2E Testing：端对端测试

3. 你的路由使用历史模式吗？hash模式最明显的特点就是url上会带有#号， History历史模式的url就跟正常的访问地址一样:
4. 选择css预处理器

1. Sass/Scss (with dart-sass)
2. Sass/Scss (with node-sass)
3. less
4. Stylus

5.选择哪个自动化代码格式化检测 （语法检测工具）就是可以检测出你代码中潜在的问题，保证写出的代码语法正确，风格统一

1. ES***Lint with error prevention only：只检测错误
2. ESLint + Airbnb config ：独角兽公司的Airbnb，有人评价说“这是一份最合理的javascript的编码规范”它几乎涵盖了js的各个方面
3. ESLint + Standard config : [standardjs]：是一份强大的js编码规范，自带linter和自动代码纠正，没有配置，自动格式化代码，可在编码早起发现规范问题和低级错误
4. ESLint + Prettier: [Prettier]：作为代码格式化工具，能够统一整个团队的代码风格

6. 选择语法检查方式

1. Lint on save (保存就检测) 
2.  Lint and fex on commit ( 用户提交文件到git的时候检测 )

7. 问你babel,postcss,eslint这些配置文件放哪？

1. in dedicated config files （在专用配置文件中，就是单独管理）
2.  in package.json（放在package.json里）

8. 是否将以上这些保存为未来项目的预配置？如果你选择 y 那么下次搭建项目是就会出现你这一次配置的选项 ，那么上面第1条 Please pick a preset: (Use arrow keys)的选择项里面会有

4. 等全部下载完毕输入cd ‘你的项目名’ 进入你的项目，然后npm run serve就可以启动项目了