第 12 章 Vue CLI工具的使用 -TypeScript和Vue从入门到精通(四)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(四)

### 第12章 Vue CLI工具的使用

在Vue.js的开发旅程中，Vue CLI（Vue Command Line Interface）是一个不可或缺的工具，它极大地简化了Vue项目的创建、配置以及开发流程。本章将深入介绍Vue CLI的安装、基本使用、高级配置以及如何利用Vue CLI插件扩展项目功能，帮助读者从入门到精通Vue CLI的使用。

#### 12.1 Vue CLI简介

Vue CLI是一个基于Vue.js进行快速开发的完整系统，它提供了标准的项目结构、本地开发服务器、构建命令、单元测试以及E2E（端到端）测试等。通过Vue CLI，开发者可以快速搭建Vue项目框架，专注于业务逻辑的开发，而无需从头开始配置构建工具和环境。

Vue CLI支持多种预设配置，如Webpack、Babel、ESLint等，这些配置都是开箱即用的，极大地提高了开发效率。此外，Vue CLI还提供了丰富的插件系统，允许开发者根据项目需求安装额外的插件，如Vue Router、Vuex、Vue I18n等，进一步扩展项目功能。

#### 12.2 安装Vue CLI

要使用Vue CLI，首先需要确保你的开发环境中已经安装了Node.js和npm（或yarn）。Node.js是JavaScript的运行环境，npm是Node.js的包管理器，用于安装和管理项目依赖。

安装Vue CLI可以通过npm或yarn进行全局安装。打开终端或命令提示符，执行以下命令之一：

```bash
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
```

安装完成后，可以通过运行`vue --version`来检查Vue CLI是否安装成功，并查看其版本号。

#### 12.3 创建Vue项目

使用Vue CLI创建新项目非常简单。在命令行中，切换到你想创建项目的目录，然后运行以下命令：

```bash
vue create my-project
```

这里`my-project`是你的项目名称，可以根据需要替换。运行该命令后，Vue CLI会启动一个交互式会话，询问你一些配置选项，如预设配置（如Babel、ESLint等）、Vue版本（2.x或3.x）等。你也可以选择手动选择特性来定制你的项目配置。

完成配置后，Vue CLI会自动生成项目文件结构，并安装必要的依赖。项目创建完成后，你可以通过`cd my-project`进入项目目录，并使用`npm run serve`或`yarn serve`命令启动本地开发服务器。

#### 12.4 Vue CLI项目结构

Vue CLI生成的项目结构通常包括以下几个关键部分：

- **`public/`**：存放静态资源，如HTML模板、图片、字体等。
- **`src/`**：存放项目的源代码。
  - **`assets/`**：存放项目中使用的静态资源，如图片、样式文件等。
  - **`components/`**：存放Vue组件。
  - **`router/`**（可选）：存放Vue Router的配置文件。
  - **`store/`**（可选）：存放Vuex的状态管理文件。
  - **`views/`**（Vue 3.x + Vue Router时常用）：存放页面级组件。
  - **`App.vue`**：根组件。
  - **`main.js`/`main.ts`**：入口文件，用于创建Vue实例并挂载到DOM上。
- **`tests/`**：存放测试文件。
- **`.env`、`.env.local`、`.env.production`等**：环境变量配置文件。
- **`vue.config.js`**（可选）：Vue CLI的配置文件，用于覆盖默认配置。

#### 12.5 Vue CLI配置

Vue CLI允许通过`vue.config.js`文件在项目根目录下进行自定义配置。这个文件是一个可选的，但非常强大的工具，允许你调整Webpack、Babel、ESLint等工具的默认配置。

例如，你可以通过修改`vue.config.js`来配置Webpack的别名（alias）、添加新的loader或插件、调整开发服务器的端口等。

```javascript
// vue.config.js
module.exports = {
  // 配置Webpack的别名
  configureWebpack: {
    resolve: {
      alias: {
        '@': require('path').resolve(__dirname, 'src/')
      }
    }
  },
  // 修改开发服务器端口
  devServer: {
    port: 8081
  }
}
```

#### 12.6 使用Vue CLI插件

Vue CLI插件是Vue CLI生态系统的重要组成部分，它们允许开发者以插件的形式扩展Vue CLI的功能。通过Vue CLI插件，你可以轻松集成Vue Router、Vuex、Vue I18n等Vue生态系统中的库和工具。

安装Vue CLI插件通常使用Vue CLI的`add`命令。例如，要安装Vue Router插件，可以运行：

```bash
vue add router
```

Vue CLI会自动处理插件的安装和配置，确保插件能够无缝集成到你的项目中。

#### 12.7 高级用法

除了上述基本用法外，Vue CLI还提供了许多高级功能，如：

- **图形化界面**：Vue CLI 3.x及以上版本支持通过`vue ui`命令启动一个图形化界面，允许你通过图形界面管理Vue项目。
- **多页面应用**：Vue CLI支持通过配置`vue.config.js`来构建多页面应用。
- **PWA支持**：通过Vue CLI插件，可以轻松地将Vue项目转换为Progressive Web App（PWA）。
- **构建优化**：Vue CLI提供了多种构建优化策略，如代码分割、懒加载、预加载等，帮助开发者优化应用的加载速度和性能。

#### 12.8 小结

Vue CLI是Vue.js开发的重要工具，它简化了Vue项目的创建、配置和开发流程。通过本章的学习，你应该已经掌握了Vue CLI的安装、基本使用、高级配置以及插件系统的使用方法。随着Vue CLI的不断发展和完善，相信它将在未来的Vue.js开发中扮演更加重要的角色。希望本章的内容能够帮助你更好地理解和使用Vue CLI，从而更加高效地开发Vue应用。

该分类下的相关小册推荐：

Vue.js从入门到精通(三)

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(一)

移动端开发指南

Vue面试指南

Vue3技术解密

VUE组件基础与实战

TypeScript和Vue从入门到精通(五)

Vue源码完全解析

Vue.js从入门到精通(二)

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(二)