Vue工程的搭建（二）

前言

本章会演示创建 Vue 工程的全过程，并对涉及的依赖环境、包管理器、脚手架进行手把手的安装以及使用教学。

1、环境搭建

---

在工具链齐备的情况下，我们通常会使用Vue CLI来进行 Vue 项目的快速创建。但在使用它之前，我们有必要了解它所依赖的编译环境以及它的配置项，以便我们更加清楚的了解和掌握它。

Node.js

本小节主要介绍 vue-cli 工程所依赖的Node.js环境和安装步骤。Node.js 是一个开源和跨平台的 JavaScript 运行时环境，其基于 Chrome V8 引擎使我们的 JavaScript 代码可以脱离浏览器运行，Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。它的包管理器npm也是全球最大的开源库生态系统，后面我们课程中项目的依赖管理也会去使用 npm。

安装Node.js

通常所有主流平台的官方软件包都可以在 http://nodejs.cn/download/ 获得，但在这里，我不推荐大家直接去官网安装 Node.js。因为在实际工作中，你会遇到由 Node.js 的版本导致的各种问题（相信我，一定会遇到），尤其是在多项目并行开发时，你会去不断的切换 Node.js 的版本。所以，我推荐使用nvm 安装 Node.js，它可以轻松地切换 Node.js 版本，也可以安装新版本用以尝试并且当出现问题时轻松地回滚。

在这里，我假设我们是使用 Windows 的操作系统，则可以通过 https://github.com/coreybutler/nvm-windows/releases 来安装 nvm，其他操作系统的安装方法请自行网上查找。

当我们安装完 nvm 后，便可以在控制台里输入命令nvm -v来查看安装情况。输入命令后我们可以看到控制台中打印出 nvm 的用法。

按照打印的用法说明，我们可以使用nvm install 版本号来进行指定 Node.js 版本进行安装。当安装了多个版本的 Node.js 后，我们可以通过命令nvm ls来查看我们安装过的版本以及当前使用的版本。

并通过nvm use 版本号来切换我们要使用的 Node.js 版本。

现在我们简单的写一段 JavaScript 代码，并用 Node.js 来运行它。

NPM

我们在上一小节提到了npm，实际上我们在安装 Node.j 时候便一并安装了 npm。我们通过命令npm -v来查看其安装情况。

npm的基本使用

通常我们通过命令npm install 包名或npm i 包名来安装第三方包，这种情况下默认安装的是最新版本，若要指定安装版本，可在包名后紧跟@版本号。

// install可缩写为i，默认安装最新版本
npm install <Module Name>  

// 安装指定版本
npm install <Module Name>@latest 
npm install <Module Name>@0.1.1
npm install <Module Name>@">=0.1.0 <0.2.0"

运行上面命令，npm 将会把安装包放在 ./node_modules 下（运行 npm 命令时所在的目录）如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。通常我们运行命令的所在目录，就是我们的项目根目录，而 node_modules 下就是我们当前项目所依赖的所有第三方包。这里还会涉及一个依赖和开发依赖的差别，我会在介绍 Vue 项目目录结构时再做说明。此时，需要说明的是本地安装和全局安装的区别。

上面的安装实际就是默认进行本地安装，可理解为仅当前项目使用的依赖。但有些依赖，我们会在多个项目使用，这时候就需要进行全局安装，实现全局安装只需在安装命令后添加参数-g，下载的包安装在 Node.js 安装目录下的 node_modules 文件夹中。全局安装后可以在任何目录呼出命令行使用，用户可以在命令行中直接运行该组件包支持的命令。

根据上面的描述，vue-cli就需要进行全局安装，因为我们每次新建 Vue 项目的时候都会使用它。现在，在我们使用 npm 安装东西之前，还有一点需要补充，就是 npm 默认安装依赖是从国外服务器下载，受网络影响大，速度慢且可能出现异常，所以如果 npm 每次去寻找的下载源都在中国就好了。我们在控制台运行如下命令npm config set registry https://registry.npm.taobao.org，这样我们的下载源就被指向了淘宝的镜像仓库。

2、创建项目

---

紧接上一小结，我们有了 Node.js 和 npm，也更改了 npm 的下载源。现在我们要下载 vue-cli 并用它创建我们的 Vue 项目。现在我们执行命令npm install -g @vue/cli进行全局安装，其中@vue/cli是 vue-cli 的包名，等待安装成功后，使用vue -V查看安装情况。

如果出现依赖 Node.js 版本不对的情况，这时候就可以用到我们之前讲过的nvm来切换 Node.js 版本。现在，我们找一个准备存放项目的目录，并在这个目录使用vue create 项目名命令来创建我们的项目。

这个 defaul（默认）的设置非常适合快速创建一个新项目的原型，而 Manually（手动）设置则提供了更多的选项，它们是面向生产的项目更加需要的。这里我们使用默认的选项进行创建项目。

这里是进行包管理器的选择，我们选择已经学习过的 npm 作为包管理器。

现在 vue-cli 已经帮助我们创建好了hello-world这个项目，从上图可以看到它在当前目录下创建以我们项目名为目录名的新目录。接下来我们的学习，将围绕着生成的这个目录展开，而这个目录也意味着包含了我们整个项目工程的所有文件。现在我们根据控制台给出的命令提示，切换到这个项目目录并运行npm run serve命令来体验项目跑起来的效果。

控制台提示编译成功，我们点击给出的地址进行预览。

当确认开发内容完成后（此处省略漫长的开发过程😄），再使用npm run build打包生成要发布的前端资源目录dist就算完成整个 Vue 的开发过程了。

内容预告

本章我们介绍了创建 Vue 项目会使用到一些工具以及简单使用，完成了整个项目的创建。在下一章，我们会围绕生成的整个项目目录进行讲解，包括各子目录和文件的作用、前端模块化、Vue 单文件规范等。