简介

在上一章中，我们介绍了如何使用 Vue.js 在组件模板中被动地管理和操作数据。 在本章中，我们将了解如何使用 Vue CLI 支持此类模板的开发。 Vue.js 利用了 npm 和 webpack 生态系统，如第 1 章 “启动您的第一个 Vue 项目” 中的 “简单 Vue 应用程序中的 Vue 实例” 示例所示。 这些工具可帮助开发人员快速构建和构建出色的 Web 应用程序。 Vue.js 中值得注意的模式是 vue.config（它允许您添加 webpack 规则，而无需直接编辑 webpack 文件本身）、双向数据绑定 和 单文件组件 (SFC)，如第 1 章 “启动您的第一个 Vue 项目” 中使用 V-Model 的双向绑定示例中所示。

使用 Vue 命令行界面 (Vue CLI) 实例化的 Webpack 项目将附带已安装的热重载。 热重载是一种前端开发模式，当检测到代码更改时，浏览器中的应用程序将自动更新。您希望这样做的原因是这样您就不会丢失任何浏览器状态，并且代码中所做的更改会立即反映在浏览器中，这在处理用户界面 (UI) 时非常有用。有时，需要重新加载整页，因为 JavaScript 是一种有状态的语言。

Vue CLI 是 Vue 开发的核心工具，因为它允许程序员通过一组描述性和预配置的命令更轻松地维护他们的项目。开发项目中经常被忽视的过程是代码检查，在此过程中程序将标记代码中的潜在错误或问题，而将其添加到现有项目中可能非常困难。使用 Vue CLI 时，只要您在创建 Vue CLI 项目时选择它作为选项，您的 webpack 项目就会附带 linting。

我们将使用 Vue CLI 配置 Vue 项目并运行每个基本命令，以便您了解构建 Vue 应用程序所需的工具。Vue CLI 开箱即用，支持 Babel、TypeScript、ESLint、PostCSS、PWAs、testing 等。