1.2.3 使用Vue CLI-Vue.js从入门到精通(一)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(一)

### 1.2.3 使用Vue CLI

在Vue.js的开发旅程中，Vue CLI（Vue Command Line Interface）是一个不可或缺的工具，它极大地简化了Vue.js项目的创建、开发和构建流程。Vue CLI提供了标准项目结构、本地开发服务器、热重载、单元测试和端到端测试等现代开发功能。本章节将详细介绍如何安装Vue CLI、使用Vue CLI创建新项目、以及如何利用Vue CLI提供的命令和配置来优化你的开发体验。

#### 1.2.3.1 安装Vue CLI

在开始之前，请确保你的开发环境中已经安装了Node.js和npm（Node Package Manager）。Vue CLI是一个全局安装的npm包，你可以通过npm轻松安装它。

打开你的命令行工具（在Windows上是CMD或PowerShell，Mac和Linux上是Terminal），然后运行以下命令来全局安装Vue CLI：

```bash
npm install -g @vue/cli
# 或者如果你使用yarn作为包管理器
yarn global add @vue/cli
```

安装完成后，你可以通过运行`vue --version`或`vue -V`来检查Vue CLI是否安装成功，以及安装的版本号。

#### 1.2.3.2 创建一个新的Vue项目

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

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

将`my-project-name`替换为你想要的项目名称。执行该命令后，Vue CLI会启动一个交互式会话，询问你一些选项，如预设（preset）、Babel、TypeScript、PWA支持、路由器、状态管理（Vuex）、CSS预处理器等。你可以选择默认的预设（这通常包含大多数开发所需的基本配置），也可以手动选择特性。

对于初学者来说，推荐选择默认的预设以快速开始，随着对Vue.js的深入了解，再逐步添加需要的特性。

完成选项选择后，Vue CLI会自动安装项目依赖并创建项目文件结构。这个过程可能需要一些时间，具体取决于你的网络速度和电脑性能。

#### 1.2.3.3 项目结构概览

Vue CLI创建的项目具有一个清晰且标准化的结构，这有助于保持代码的组织性和可维护性。以下是一个典型Vue CLI项目的基本结构概览：

- **`node_modules/`**：存放项目依赖的npm包。
- **`public/`**：存放静态资源文件，如`index.html`入口文件。
- **`src/`**：项目的源代码目录。
  - **`assets/`**：存放项目中使用的静态资源，如图片、字体等。
  - **`components/`**：存放Vue组件。
  - **`router/`**：存放Vue Router相关的配置和组件（如果你选择了路由）。
  - **`store/`**：存放Vuex相关的状态管理配置（如果你选择了Vuex）。
  - **`views/`**：存放页面级别的Vue组件（如果你选择了Vue Router）。
  - **`App.vue`**：主组件文件，所有页面都在这个根组件下渲染。
  - **`main.js`**：入口文件，负责创建Vue实例，并挂载到DOM上。
- **`tests/`**：存放测试文件（如果你选择了测试相关的预设）。
- **`.gitignore`**：指定哪些文件或目录不应该被Git追踪。
- **`babel.config.js`**：Babel的配置文件，用于ES6+代码的转译。
- **`package.json`**：项目的配置文件，定义了项目依赖、脚本和元数据。
- **`README.md`**：项目的说明文件。
- **`vue.config.js`**（可选）：Vue CLI的配置文件，用于覆盖或扩展默认配置。

#### 1.2.3.4 使用Vue CLI提供的命令

Vue CLI提供了一系列命令来帮助你进行项目开发、测试和部署。以下是一些常用的Vue CLI命令：

- **`npm run serve`** 或 **`yarn serve`**：启动本地开发服务器，默认访问地址是`http://localhost:8080`。这个命令会开启热重载功能，即当你修改代码并保存后，浏览器会自动刷新显示最新内容。
- **`npm run build`** 或 **`yarn build`**：构建生产环境的代码，将`src/`目录下的文件编译并输出到`dist/`目录。这个命令还会进行代码压缩、优化等操作，以提高页面加载速度和性能。
- **`npm run lint`** 或 **`yarn lint`**：运行ESLint代码检查工具，帮助你发现并修正代码中的错误和潜在问题。
- **`npm run test:unit`** 或 **`yarn test:unit`**：运行单元测试。Vue CLI支持多种测试框架，如Jest、Mocha+Chai等，具体取决于你创建项目时选择的配置。
- **`npm run test:e2e`** 或 **`yarn test:e2e`**：运行端到端测试。Vue CLI支持Cypress、Nightwatch等测试框架，用于模拟真实用户操作，测试应用的完整流程。

#### 1.2.3.5 自定义Vue CLI配置

虽然Vue CLI提供了丰富的默认配置和预设，但在实际开发中，你很可能需要根据自己的需求进行自定义配置。Vue CLI允许你通过`vue.config.js`文件来覆盖或扩展默认配置。

在项目根目录下创建或编辑`vue.config.js`文件，你可以配置各种选项，如输出目录、静态资源目录、Webpack配置、DevServer配置等。例如，如果你想改变默认的构建输出目录，可以这样做：

```javascript
// vue.config.js
module.exports = {
  outputDir: 'dist-custom',
  // 其他配置...
}
```

Vue CLI还提供了`vue.config.js`的官方文档，详细介绍了所有可配置的选项和它们的默认值，你可以根据自己的需要查阅并应用这些配置。

#### 1.2.3.6 小结

通过本章节的学习，你已经掌握了Vue CLI的基本使用方法，包括安装Vue CLI、创建新项目、了解项目结构、使用Vue CLI提供的命令进行开发、测试和部署，以及如何通过`vue.config.js`文件进行自定义配置。Vue CLI作为Vue.js的官方脚手架工具，为开发者提供了极大的便利，使得Vue.js项目的开发、测试和维护变得更加高效和标准化。随着你对Vue.js的深入学习和实践，你将能够更加熟练地运用Vue CLI，创建出更多高质量、高性能的Vue.js应用。

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

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

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

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

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

移动端开发指南

Vue原理与源码解析

Vue3技术解密

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

Vue源码完全解析

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

Vue面试指南

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