这是我参与「第四届青训营 」笔记创作活动的第2天。

为什么要使用 Vue CLI

Vue 本身是一个渐进式的前端 Web 开发框架，允许我们只在项目中的部分页面中使用 Vue 进行开发，也允许我们仅仅使用 Vue 中的部分功能来进行项目开发。但是如果我们的目标是完成一个风格统一、可扩展性强的现代化 Web 单页面应用，那么使用 Vue 提供的一整套完整的流程进行开发是很合适的。而 Vue CLI就是这样的一个基于 Vue 进行快速开发的工具。

Vue CLI 入门

安装

Vue CLI 是一个需要全局安装的 NPM 包，需要先安装 Node.js的环境。青训营的老师提到过如何在非 Windows 系统上安装多个版本的 Node.js，由于我们这里是学习，且是在 Windows 下安装，这里就按照Node.js官网提供的安装工具快速安装了。

安装好 Node.js后，可以查看下版本确认安装是否成功：

node -v

下面使用 npm 安装 Vue CLI工具，在终端输入如下命令：

npm install -g @vue/cli

-g 指的是全局安装。由于需要下载很多的依赖包，这里可能需要多等一会。

安装完成后，可以检查一下是否成功：

vue --version

快速创建项目

Vue CLI提供了命令行和 UI 界面两种方式来帮助开发者快速创建项目。

1. 使用 Vue UI

在终端输入：

vue ui

就打开了一个 Vue 工程管理工具界面。在页面中可以创建项目、导入项目或者对已有的项目进行管理。由于 ui 界面操作起来很方便，这里就不再赘述了。

2. 使用命令行

在终端执行如下命令来创建一个 Vue 项目工程：

vue create hello-world

其中 hello-world 是要创建的工程名称。之后终端还会询问一系列的配置问题，我们都选择默认的即可。稍等后，Vue CLI 就会创建一个模板工程。其目录结构如下：

后面的笔记我们会详细介绍这些文件的意义和用法。

运行 Vue 项目

运行 Vue 项目非常简单。打开终端，进入当前项目目录，执行如下命令：

cd hello-world
npm run serve

之后，Vue CLI会进行项目工程的编译，并在本地启动一个服务器：

打开 local 的地址，就会访问当前的项目主页：

注意：该服务器默认热加载，所以我们在修改代码后点击保存，网页就会自动更新，非常方便。