Vue2.x项目初始化

确定vue/cli版本

#输入
vue --version
#输入
@vue/cli 4.5.14

注意，这里是vue/cli的版本，不是vue的版本

创建项目

这里创建的项目名称为:test_vue_cli_01。

首先定位到要创建项目的目录，例如：D:/workspaces

开始配置项目

# 输入
vue create test_vue_cli_01
# 输出
Vue CLI v4.5.14
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

选择：Manually select features，回车进入下一步

注意：不要选择第一个：Default ([Vue 2] babel, eslint)，因为：

1. 使用默认配置，是不带router和vuex的，后期还得自己安装。
2. 特别是当后期使用less时，直接安装less相关包，却不指定版本的话，会有问题

less版本问题

当后期需要使用less,在安装时不指定版本，直接安装less,less-loader的话，安装的版本为：less@4.1.2，less-loader@10.2.0，会与vue2.x有兼容性问题。
而使用vue/cli时，搭配vuex2.x使用的less版本为：less@3.0.4,less-loader@5.0.0,

选择项目功能

# 输出
Vue CLI v4.5.14
? 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
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

使用上下箭头移动，并使用空格勾选：

1. Choose Vue version
2. Babel
3. Router
4. Vuex
5. CSS Pre-processors
6. Linter/formater

然后回车进入下一步

选择VUE版本

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

因为要使用的就是vue2.x的版本，所以直接回车进入下一步

选择路由模式

# 输出
Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

这里使用路由的history模式，输入"y"，然后回车下一步

选择css预处理器

# 输出
Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? 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

根据实际情况选择自己熟悉的（这里选择less），回车下一步

选择语法检测工具

# 输出
Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

这里选择：ESLint+Prettier，回车下一步

语法检查方式

#输出
Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: 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

直接使用默认（保存时检测），回车下一步

选择配置文件的保存位置

# 输出
Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

直接使用默认（各配置分为独立文件放置），回车下一步

是否将此保存为将来项目的预设

# 输出
Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

是否将本次配置保存为将来项目的预设，输入y的话，会要求输入一个名字，输入n的话就跳过。这里输入n后回车。

输入回车后，系统就开始下载相关文件并进行配置安装，安装完成后，系统提示

Vue CLI v4.5.14
✨  Creating project.
.......
.......
�  Successfully created project test_vue_cli_01.
�  Get started with the following commands:

 $ cd test_vue_cli_01
 $ npm run serve

根据提示，进入test_vue_cli_01目录，使用vscode打开项目即可。