Vue如何创建一个新项目（Vue-cli3.x快速创建vue项目，Vue-cli4.x，超详细）

前言：在阅读此文章前请先确保电脑已安装node，且npm功能正常，此文适合cli2.x以上版本创建项目，例cli3.x或者cli4.x

1、安装cli

1.1、 Vue-cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先打开cmd命令行窗口通过以下命令卸载旧版

npm uninstall vue-cli -g
// or 或者
//安装了yarn的小伙伴也可以用 yarn global remove vue-cli 进行卸载
yarn global remove vue-cli 

1.2、 vue-cli 新版安装
如果你是从node中文官网http://www.nodejs.com.cn/安装的10.14.2长期支持版 建议安装cli时选择不大于@4.5.13版本，不要刻意去升级node，否则npm随node版本升高对于老项目的npm支持性不友好，下载公司项目依赖的时候会因npm版本不对应问题各种报错

npm install -g @vue/cli
// or 或者
yarn global add @vue/cli

注意：node版本<=10.14.2的请执行以下命令安装指定版本cli

npm install -g @vue/cli@4.5.13
// or 或者
yarn global add @vue/cli@4.5.13

否则直接执行第二步创建项目命令会有以下报错

2、创建项目

2.1、 **vue create 你的项目名 （创建项目时，如需在指定目录下创建请先cd进对应目录，例如我想在D盘zheheWeb下创建就可以cd /D D:/zheheWeb）

vue create my-project
//or 或者
vue ui

2.2、 这里我们vue create “项目名” 后，选择手动创建Manually select features（手动创建更灵活，可以自主选择要或不要安装某些依赖），cli3.x和4.x本质上没有太大区别，都有默认和手动选择

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)  //请选择一个预设（使用方向键）
  Default ([Vue 2] babel, eslint)   //默认Vue2，并安装babel，eslint
  Default (Vue 3) ([Vue 3] babel, eslint)   //默认Vue3，并安装babel，eslint
> Manually select features  //手动选择功能

2.3、 **配置项勾选，空格键选中和非选中，a 全选，i 反选，下面是我选的配置项 选完按回车键Enter确定进入下一步

 (*) Choose Vue version  //选择vue版本
 (*) Babel  //Babel-Es6语法转换
 ( ) TypeScript  //Ts，js超集
 ( ) Progressive Web App (PWA) Support  //PWA渐进式Web应用程序。
 (*) Router  //Router  vue-router 。
 (*) Vuex  //Vuex  vuex 。
 (*) CSS Pre-processors  //CSS 预处理器。
>(*) Linter / Formatter  //代码风格检查和格式化
 ( ) Unit Testing  //单元测试（unit tests）
 ( ) E2E Testing  //E2E 测试

2.4、 **选择一个Vue.js版本，你想用它开始项目(使用方向键) 这里我选择 2.x版本按Enter进入下一步

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x

2.5、 **路由器使用 history 模式?(需要适当的服务器设置以便在生产中实现索引回退)(Y/n) Y是 n否，输入Y按Enter进入下一步

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

2.6、 **选择一个CSS预处理器(默认支持PostCSS, Autoprefixer和CSS模块):(使用方向键) 如下所示选择Sass/SCSS (with dart-sass) 按Enter进入下一步

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

2.7、 **选择linter / formatter配置:(使用方向键) 如下所示选择SLint with error prevention only 按Enter进入下一步

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

2.8、 **选择额外的lint功能:(按<空格>选择，切换全部，反转选择) 如下所示选择Lint on save 按Enter进入下一步

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

2.9、 **你喜欢把配置Babel, ESLint等放在哪里? 如下所示选择In package.json 按Enter进入下一步

? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

last、 **将此保存为未来项目的预设?(y / N)y是 N否 （输入y后会记住当前选择配置模板，以后生成新项目都按此配置） 输入N 按Enter进入下一步开始创建项目

? Save this as a preset for future projects? (y/N) N

最后选完如下图所示

等待下载完依赖后如图所示就代表项目创建成功了

3、项目创建完成 cd my-project 进入项目目录 运行npm run serve命令 出现以下页面至此大功告成