Vue-cli4.5脚手架搭建项目（零基础小白都能看懂）

1.安装vue-cli

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

安装成功后可以查看版本号：vue -V

如果出现版本号@vue/cli 4.5.13 那么表示安装成功  （4.5.13是我当时的最新版）

 2.创建项目

vue create project  (vue create+你的项目名称，project为我此次创建项目的项目名)

然后按下回车键，会显示以下界面，因为我之前有保存过名称为EIT的设置，所以我的截图界面会多一选项 ，你们的没有

①

？ Please pick a preset:   //请选择一个预设：<br><br>

   Default 〈[Uue 2] babel,eslint)                 //vue2 的默认设置（直接enter）非常适合快速创建一个新项目的原型，                                                                    没有带任何辅助功能的 npm包
   Default (Uue 3)〈[Uue 3] babel,eslint)      //vue3 的默认设置（直接enter）非常适合快速创建一个新项目的原型，                                                                    没有带任何辅助功能的 npm包

   Manually select features       //手动选择配置，提供可选功能的npm包   （推荐，可以根据自己的需求搭配项目）

↑↓键控制  回车键确认 (推荐选择 Manually select features（手动配置），这样就可以根据你的项目需求简单的做一些项目的前期配置)

②回车后会出现以下界面：

 ↑↓键控制，空格键选中 ，回车键确认

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel                   //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript             // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support   // 渐进式Web应用程序
( ) Router                         // vue-router（vue路由）        （推荐选择）
( ) Vuex                          // vuex（vue的状态管理模式）      （根据个人需求所选）
( ) CSS Pre-processors      // CSS 预处理器（如：less、sass）       （推荐选择）
( ) Linter / Formatter     // 代码风格检查和格式化（如：ESlint）      （推荐选择）<br>( ) Unit Testing // 单元测试（unit tests） <br>( ) E2E Testing // e2e（end to end） 测试

　按下回车后会出现以下界面：

ter, Uuex, CSS Pre-processors, Linter
? Choose a version of Uue. js that you want to start the project with (Use arrow keys)//选择一个版本的Uue。您要使用其启动项目的js（使用箭头键）
   >2.x
    3.x

　　这里我选择的是版本3.

按下回车键后会提示：

  //使用类样式的组件语法？（是/否)

这里我选择否。

按下回车键：

？将Babel与TypeScript一起使用（现代模式所需，自动检测的polyfill，填充JSX）？（Y / n）

选择Yes,回车

 路由器使用历史模式? (生产中索引回退需要正确的服务器设置)(Y/n）

选择Yes,回车：

？ Pick a CSS pre-processor (PostCSS,Autoprefixer and CSS Modules are supported by default):<Use arrow keys)  // 选择一个CSS预处理程序(默认支持PostCSS,Autoprefixer和CSS模块):<使用方向键)
Sass/SCSS (with dart-sass)
Sass/SCSS<with node-sass)   （推荐选择）
Less
//三种css预处理，根据自己所喜欢选择，这里我选择scss

node-sass是自动编译实时的，dart-sass需要保存后才会生效

回车后会出现以下界面：

选择一个代码检查工具

Pick a linter / formatter config:（Use arrow keys)   //选择linter / formatter配置:<使用方向键)
>ESLint with error prevention only                  //仅错误预防ESLint
ESLint +Airbnb config                              //完美的
ESLint +Standard config                           //标准配置
ESLint +Prettier                                 //统一代码规范（推荐使用）
TSLint (deprecated)                             //已弃用

　　回车：

Lint on save               // 保存就检测    (推荐选择)

Lint and fix on commit   //fix 和 commit 的时候检查

　　回车：

Where do you prefer placing config for Babel, ESLint, etc.?<Use arrow keys)   // 选择 Babel, PostCSS, ESLint 等自定义配置的存放位置？
In dedicated config files                                                    //在独立配置文件中
In package. json                                                            //在package.json中

　　这里我选择  In dedicated config files，回车

? Save this as a preset for future projects? (y/N) 　N
# 选择yes，记录本次配置，然后需要你起个名，方便下次配置
# 选择no，不进行记录

　　回车：

等待一段时间后就可以了

 cd project  进入到名为project的文件夹当中，回车

 然后npm run serve 回车 ，运行项目

 npm run build指令为压缩项目代码，减小代码所需大小，

看到以上界面就可以在浏览器上输入 localhost:8080,看到以下界面，那么恭喜你，你的项目已经搭建成功了

 一般所创建的项目会在系统盘C盘，路径为C:\Users\Administrator.PC-201911201201\project     Administrator.PC-201911201201是我计算机的命名，你的可能不一样，一般都是在C:\用户\...\...

 一个项目的开始表示一位改变世界的码农诞生，希望你今后仍然对代码产生浓厚的兴趣，加油吧！年轻人，你要相信世界会因为你而变得更加美好！