通过Vue CLI脚手架工具创建 Vue 全家桶项目

1. 安装脚手架 Vue CLI

首先可以在cmd中先通过以下命令查看本机电脑中是否有安装过 Vue CLI：

vue --version
# @vue/cli 4.5.13

如果本机电脑中没有安装 Vue CLI，可以通过以下命令来安装：

npm i -g @vue/cli

2. 创建 Vue 项目

将终端路径定位到需要创建项目的目录，执行以下命令创建 Vue 项目：

vue create students-system（要创建的项目名称）

3. 选择安装模式

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features

建议选择最后一个，自定义安装模式。

4. 选择项目需要使用的插件

? Check the features needed for your project:
 ( ) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

5. 选择路由模式

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

说明：Vue Router 路由模式分为：history 和 hash。

6. 选择 CSS 预处理器

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

7. 选择配置代码位置

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

8. 是否保存设置

? Save this as a preset for future projects? (y/N) y
? Save preset as: Vue-All

9. 启动项目

项目创建完成后，终端进入到项目根目录，执行项目启动命令启动项目。

说明：Vue 项目的默认启动命令是 npm run serve，如果发生改变或他人创建的项目对启动命令有所更改，可以查看 package.json 文件的scripts 属性，该属性用来配置项目操作命令：

{
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },
}

到此，vue全家桶项目创建完成，接下来就可以正常的进行开发了。