12.1 Vue CLI工具入门 -TypeScript和Vue从入门到精通(四)

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

### 12.1 Vue CLI工具入门

在Vue.js的开发旅程中，Vue CLI（Command Line Interface，命令行界面）是一个不可或缺的工具。它不仅简化了Vue项目的创建、配置和管理过程，还通过提供一套预设的插件系统，使得开发者能够快速搭建起符合自己需求的项目框架。本章将深入介绍Vue CLI的基本使用、安装、项目创建、配置调整以及常见插件的利用，帮助读者从入门到精通Vue CLI的使用。

#### 12.1.1 Vue CLI概述

Vue CLI是一个基于Vue.js进行快速开发的完整系统，提供了零配置的项目脚手架，同时保持高度的可配置性和灵活性。通过Vue CLI，你可以轻松创建单页应用（SPA）、渐进式Web应用（PWA）、服务器端渲染（SSR）应用等多种类型的Vue项目。Vue CLI的核心优势包括：

- **快速开始**：通过简单的命令即可创建项目，无需从零开始配置。
- **现代化构建**：内置了Webpack、Babel、TypeScript等现代JavaScript工具链。
- **图形化管理**：支持通过Vue UI进行项目配置和管理。
- **丰富的插件生态**：Vue CLI插件系统允许社区和个人贡献各种功能扩展。

#### 12.1.2 安装Vue CLI

在开始使用Vue CLI之前，你需要先确保你的开发环境中已经安装了Node.js和npm（或yarn）。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，npm是Node.js的包管理工具，用于安装和管理项目依赖。

安装Vue CLI通常使用npm或yarn，在命令行中执行以下命令之一：

```bash
# 使用npm
npm install -g @vue/cli

# 或者使用yarn
yarn global add @vue/cli
```

上述命令中的`-g`或`global`参数表示全局安装Vue CLI，这样你就可以在任何地方通过命令行访问Vue CLI命令了。

#### 12.1.3 创建Vue项目

安装完Vue CLI后，你可以通过简单的命令来创建一个新的Vue项目。在命令行中，切换到你想创建项目的目录，然后执行以下命令：

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

这里的`my-project`是你想要创建的项目名称，你可以根据自己的需求进行命名。执行上述命令后，Vue CLI会启动一个交互式会话，询问你一些配置选项，比如选择预设的配置（例如Babel, Router, Vuex等）或手动选择特性。如果你熟悉这些配置，也可以直接选择默认的预设或跳过预设选择。

#### 12.1.4 项目结构解析

创建完项目后，进入项目目录（`cd my-project`），你会看到Vue CLI生成的项目结构。一个典型的Vue CLI项目结构可能包括以下文件和目录：

- `node_modules/`：存放项目依赖的npm包。
- `public/`：通常包含项目的入口文件`index.html`和静态资源（如图片、字体等）。
- `src/`：包含应用的源代码。
  - `assets/`：存放静态资源，如图片、样式文件等。
  - `components/`：存放Vue组件。
  - `App.vue`：主组件文件，所有页面组件的根组件。
  - `main.js`（或`main.ts`）：应用的入口文件，用于创建Vue实例。
  - `router/`：存放Vue Router的路由配置（如果使用Vue Router）。
  - `store/`：存放Vuex的状态管理配置（如果使用Vuex）。
- `.gitignore`：指定不需要纳入版本控制的文件和目录。
- `package.json`：项目的npm配置文件，包含项目依赖、脚本等。
- `README.md`：项目的说明文件。
- 其他配置文件，如`vue.config.js`（Vue CLI的配置文件）。

#### 12.1.5 Vue CLI配置

Vue CLI提供了灵活的配置方式，你可以通过命令行参数、`vue.config.js`文件或环境变量来配置Vue CLI的行为。

- **命令行参数**：在创建项目或运行命令时，Vue CLI接受一系列命令行参数来调整构建过程。例如，`vue-cli-service serve --port 8081`可以指定开发服务器监听的端口为8081。

- **`vue.config.js`**：在项目根目录下创建或编辑`vue.config.js`文件，可以覆盖Vue CLI的默认配置。这个文件应该导出一个包含了选项的对象。例如，配置Webpack的别名：

```javascript
  // vue.config.js
  module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, 'src/')
        }
      }
    }
  }
  ```

- **环境变量**：Vue CLI项目支持通过`.env`文件来设置环境变量，这些变量可以在项目的任何地方通过`process.env`访问。例如，在`.env.production`文件中设置`VUE_APP_SECRET=some-secret-key`，然后在你的代码中通过`process.env.VUE_APP_SECRET`访问它。

#### 12.1.6 使用Vue CLI插件

Vue CLI的插件系统允许社区和个人贡献各种功能扩展，以简化开发流程。通过Vue CLI的插件，你可以轻松地添加路由管理、状态管理、UI框架、国际化等特性到你的项目中。

安装Vue CLI插件通常使用Vue CLI提供的`add`命令，例如，安装Vue Router：

```bash
vue add router
```

执行上述命令后，Vue CLI会下载并安装Vue Router及其依赖，同时自动修改你的项目配置（如更新`main.js`、`App.vue`等），以集成Vue Router。

#### 12.1.7 Vue CLI UI

除了命令行界面外，Vue CLI还提供了一个图形化的用户界面（UI），允许你通过图形界面来管理Vue项目。你可以通过执行`vue ui`命令来启动Vue CLI UI。

Vue CLI UI提供了项目管理、插件安装、任务执行等功能，使得项目管理和配置变得更加直观和方便。在Vue CLI UI中，你可以轻松地浏览项目的依赖、查看和修改配置、安装和卸载插件等。

#### 12.1.8 总结

Vue CLI是Vue.js开发中不可或缺的工具，它极大地简化了Vue项目的创建、配置和管理过程。通过本章的学习，你应该已经掌握了Vue CLI的基本使用、安装、项目创建、配置调整以及常见插件的利用。接下来，你可以尝试使用Vue CLI来创建自己的Vue项目，并通过实践来深化对Vue CLI的理解和应用。随着Vue生态的不断发展，Vue CLI也将不断更新和完善，为开发者提供更加高效、便捷的开发体验。

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

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

vue项目构建基础入门与实战

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

Vue面试指南

Vue3技术解密

VUE组件基础与实战

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

Vue原理与源码解析

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

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

Vue源码完全解析

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