CLI 搭建 Vue 项目

一、安装 Vue CLI

1、关于旧版本

Vue CLI 的包名称从 3.x 开始由 vue-cli 改成了 @vue/cli。

如果已经全局安装了 3.x 之前的旧版本的 vue-cli，需要先通过以下命令卸载旧版本，再重新安装新版本。

  1. npm uninstall vue-cli -g

2、查看 CLI 版本

如果不确定是否安装过，或不确定已安装的版本，可以通过以下命令查看 CLI 版本：

  1. vue --version
  2. # 或
  3. vue -V
  4. # @vue/cli 5.0.6

如果查询不到版本号，则说明没有安装过。

3、安装 CLI

执行以下命令全局安装 Vue CLI 工具：

  1. npm install -g @vue/cli

安装完成后，我们可以再次查看 CLI 版本来确认是否安装成功。

二、搭建项目

1、创建项目

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

  1. vue create students-system

其中，students-system 是项目名称，同时也会作为项目根目录的文件夹名称。

2、选择安装方式

CLI 提供了三种搭建 Vue 项目的方式：

  1. Vue CLI v5.0.6
  2. ? Please pick a preset: (Use arrow keys)
  3. ❯ Default ([Vue 3] babel, eslint) 
  4.   Default ([Vue 2] babel, eslint) 
  5.   Manually select features

说明：

  • Default ([Vue 3] babel, eslint)：默认以 Vue3 安装；
  • Default ([Vue 2] babel, eslint)：默认以 Vue2 安装；
  • Manually select features：自定义安装（推荐）；

我们选择第三种自定义的安装方式。

3、选择插件安装

选择项目中需要用到的插件（按上下键移动箭头，按空格键切换选中）：

  1. ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
  2.  ◉ Babel
  3.  ◯ TypeScript
  4.  ◯ Progressive Web App (PWA) Support
  5.  ◉ Router
  6.  ◉ Vuex
  7. ❯◉ CSS Pre-processors
  8.  ◯ Linter / Formatter
  9.  ◯ Unit Testing
  10.  ◯ E2E Testing

说明：

  • Babel：代码转换器，将一些高版本的 JS 语法转换为浏览器能够识别的低版本语法；
  • Router：路由插件；
  • Vuex：状态管理插件；
  • CSS Pre-processors：CSS 预处理器，例如 Less、Sass 等；
  • Linter / Formatter：代码风格管理插件（暂不安装）；

这里我们就选择 Babel、Router、Vuex、CSS Pre-processors 四种插件就可以了。

Linter / Formatter 暂时不安装是因为这个代码风格管理插件对语法要求很严格，不适合初学者。

4、选择 Vue 版本

选择当前项目要使用的 Vue 的版本：

  1. ? Choose a version of Vue.js that you want to start the project with 
  2.   3.x 
  3. ❯ 2.x

我们暂时以 Vue2 为主要的学习版本。

5、选择路由模式

第 3 步安装插件时，我们选择了 Router 路由插件，所以这里要选择“是否使用 history 模式的路由”：

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

这里我们输入 Y。

创建项目时选择了路由模式，后续在项目中也可以通过代码更改。

6、选择 CSS 预处理器

第 3 步安装插件时，如果我们选择了 CSS Pre-processors 插件，这里就需要选择具体要使用的 CSS 预处理器：

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

这里我们选择 Sass/SCSS (with dart-sass)。

7、选择配置代码位置

前面关于所有插件的配置，都会生成对应的配置代码。这里我们需要选择这个配置代码的保存位置：

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

说明：

  • In dedicated config files：单独生成新的文件来保存配置代码；
  • In package.json：直接将配置代码添加到 package.json 文件中；

这里我们选择第一种 In dedicated config files。

8、是否保存以上配置

这一步是让我们选择是否保存当前配置供以后使用（不管是否保存，当前项目我们已经配置完成了）：

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

说明：

  • 选择 Y 保存，下次再创建项目时就可以直接采用这次保存的所有配置；
  • 选择 N 不保存，下次再创建项目时以上所有步骤就需要重新再来一遍；

这里我们选择 Y 保存。

9、输入配置名称

如果上一步我们选择了 Y 保存配置，那么就会让我们给这个配置取个名字：

  1. ? Save preset as:

名字可以随便取，不要出现中文。

例如我们取个 Vue2 All 的名字为例（表示以 Vue2 为基础的 Vue 全家桶）。

10、项目创建完成

以上所有配置完成后，项目开始安装。

  1. 🎉  Successfully created project students-system.
  2. 👉  Get started with the following commands:
  4.  $ cd students-system
  5.  $ npm run serve

出现类似以上提示时，就表示项目创建完成了。

三、启动项目

1、启动命令

我们参考项目根目录的 package.json 文件，其中 script 属性中配置了项目的启动命令别名：

  1. {
  2.     "scripts": {
  3.         "serve": "vue-cli-service serve",
  4.         "build": "vue-cli-service build",
  5.         "lint": "vue-cli-service lint"
  6.     }
  7. }

其中，serve 就是我们启动项目时要使用的命令别名。

2、启动项目

将终端定位到项目根目录，然后执行以下命令启动项目：

  1. npm run serve

启动成功后，会看到类似以下提示：

  1.  DONE  Compiled successfully in 4987ms                       下午11:50:28
  4.   App running at:
  5.   - Local:   http://localhost:8080/ 
  6.   - Network: http://192.168.0.103:8080/
  8.   Note that the development build is not optimized.
  9.   To create a production build, run npm run build.

3、访问项目

项目启动成功时提示的地址，就是我们当前项目所在的服务器地址。打开浏览器，访问该地址，即可看到我们项目的欢迎界面。

CLI 搭建 Vue 项目 - 图1