配置完node环境之后，使用 npm 全局安装 vue-cli ：

安装命令:

npm install -g @vue/cli

安装完成之后创建一个Vue项目，my-test这个就是项目名

vue create my-test

配置创建vue

这是问我们采取默认配置创建vue，还是手动配置，个人喜欢使用手动配置。

Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) //默认安装vue3
  Default ([Vue 2] babel, eslint) //默认安转vue2
> Manually select features  //选择手动安装

检查项目所需的功能：

这一步是让我们选择要安装的部分，我们根据自己的需求，通过键盘上下键在多个部分进行切换，使用空格键可以进行选中和取消选中操作，选择完毕后，按enter键即可进入下一步

? 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                             //使用 TypeScript
 ( ) Progressive Web App (PWA) Support      //渐进式Web应用（PWA）支持
 (*) Router                                 // vue-router
 (*) Vuex                                   // vuex
>(*) CSS Pre-processors                     // CSS 预处理器,有用到sass和less选这个
 (*) Linter / Formatter                     //代码风格检查和格式化。
 ( ) Unit Testing                           // 单元测试。
 ( ) E2E Testing                            //  E2E 测试。

选择Vue版本

这里是选择Vue的版本，使用哪个看自己项目需求来决定。

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

路由是否使用历史模式

这一步是问我们是否使用history 模式的路由，我们一般使用hash模式，

vue中有两种路由导航模式: #hash方式和history方式(/，没有#)。因此建议选择输入n

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

css预处理

这步是让我们选择css预处理器，根据自己需求进行选择。

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

语法检查

这步是选择语法检查方式，个人选择的是ESLint + Standard config，标准模式

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

语法检查方式

这一步是让我们选择什么时候进行语法校验，个人选择保存时就检测

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save                  //保存就检测
 ( ) Lint and fix on commit        //fix和commit时候检测

配置文件

这一步是问，把babel,eslint这些配置文件配置在哪里，个人习惯放package.json里

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  In dedicated config files         // 独立文件放置
> In package.json                   //放package.json里

保存预设

这步是问：是否将此保存为未来项目的预设？

因为每个项目的需求和特征都不同，所以最好每次都选择一遍！所以个人选择n

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

选择完后就回进行安装

如图，出现Successfully created project my-test.代表项目创建成功了。

以上就是Vue脚手架的创建流程。

Vue脚手架创建步骤