前言

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

Vue Cli官网地址

https://cli.vuejs.org/

一、安装Vue Cli

1.关于旧版本

Vue CLI 3.0后的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

查看当前vue cli版本:

C:\Users\admin>vue --version
@vue/cli 4.4.6

2.Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

查看当前node版本:

C:\Users\admin>node -v
v12.16.2

3.安装最新包

npm install -g @vue/cli

如果你这边已经安装过，则将更新到最新的版本

前面我这边已经安装过4.4.6，则再次执行安装，则将更新到最新版本 4.5.4

C:\Users\admin>vue -V
@vue/cli 4.5.4

二、创建项目

vue-cli3.0 以后项目创建命令

vue create vuedemo

下一步，选择配置方式

Vue CLI v4.5.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   （默认安装）
  Manually select features                          （手动配置，我选择这个）

下一步，选择插件安装
通过↑ ↓ 箭头选择你要配置的项，按空格是选中，按 a 是全选，按 i 是反选。根据需要选择

Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel       //转码器，可以将ES6代码转为ES5代码
 ( ) 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）
 ( ) Unit Testing  // 单元测试（unit tests）
 ( ) E2E Testing  // e2e（end to end） 测试

下一步,选择vue.js版本

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

选择3.x

? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口），我这边选择Y

下一步,选择linter/formatter配置
提供一个插件化的javascript代码检测工具，选择ESLint + Prettier

? 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)
>(*) Lint on save // 保存就检测，我这边选择它
 ( ) Lint and fix on commit // fix和commit时候检查

下一步，选择如何存放配置

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

下一步，是否保存当前配置

? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)   //根据情况选择，我这边n

下一步，开始构建项目

Vue CLI v4.5.4
✨  Creating project in D:\Web\Practice\VueDemo\vuedemo.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install D:\Web\Practice\VueDemo\vuedemo\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> core-js@3.6.5 postinstall D:\Web\Practice\VueDemo\vuedemo\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\Web\Practice\VueDemo\vuedemo\node_modules\ejs
> node ./postinstall.js

added 1241 packages from 919 contributors in 149.009s

50 packages are looking for funding
  run `npm fund` for details

�  Invoking generators...
�  Installing additional dependencies...

added 80 packages from 86 contributors in 22.521s

55 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project vuedemo.
�  Get started with the following commands:

 $ cd vuedemo
 $ npm run serve