任务2 大觅项目环境搭建_Vue 企业开发实战-QQ阅读女频仙侠网

上QQ阅读APP看书，第一时间看更新

任务2 大觅项目环境搭建

大觅项目的环境搭建依赖于 Node.js 的环境，所以接下来介绍 Node.js 的安装以及NPM包管理工具的安装、配置等。

1.2.1 Node.js的介绍

Node.js 是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型，既轻量又高效。另外，Node.js可以理解为JavaScript运行时环境（runtime），runtime 类似于国际会议中的同声翻译。接下来看一下如何安装Node.js。

从官网下载Node.js，官方提供适用不同系统、不同系统位数的安装包，读者可以根据自己的计算机配置进行选择性下载，具体如图1.8所示。

图1.8 Node.js安装包分类

注意

大觅项目中使用的Node.js版本为V8.9.3，读者可以使用这个Node.js版本，也可以使用更高的版本。

安装完Node.js之后，如何验证Node.js是否安装成功呢？

在Windows系统中，按Win+R组合键调出“运行”窗口，输入“cmd”打开命令提示符窗口。输入“node -v”可得到对应的Node.js版本，说明Node.js已经安装成功，如图1.9所示。

图1.9 验证Node.js是否安装成功

1.2.2 什么是NPM

Node.js的包管理器NPM是全球最大的开源库生态系统，它集成在Node.js中，在安装Node.js的时候就已经自带了NPM包管理工具。验证NPM是否安装成功的方法同验证Node.js的方法。

在命令行窗口中输入“npm -v”可得到NPM的版本，说明NPM已经安装成功，如图1.10所示。

图1.10 验证NPM是否安装成功

NPM安装成功之后，接下来要使用NPM安装依赖包了。那么如何安装依赖包呢？首先打开命令提示符窗口，了解一下NPM常用命令。

npm install<Module Name>-g　　　//安装模块　加不加“-g”代表是不是全局安装

npm list<Module Name>　　　　　//查看某个模块的版本号

npm uninstall<Module Name>　　　//卸载模块

npm update<Module Name>　　　　//更新模块

注意

全局安装和非全局安装的区别：

举例说明，使用“npm install express -g”安装express框架后，就可以在计算机的任意一个文件夹下打开命令提示符窗口，直接使用express创建项目，否则会遇到“'express'不是内部或外部命令，也不是可运行的程序”错误。读者应该也遇到过类似的问题，这就是非全局安装引起的，使用“npm install express”安装express框架为局部安装，局部安装就是将模块下载到当前命令行所在目录下，只有在当前目录下才可以用。

1.2.3 安装cnpm

NPM安装插件需要从国外服务器下载，受网络影响大，下载比较慢，容易出现异常。

说明

来自淘宝NPM镜像官网：

这是一个完整的 npmjs.org 镜像，可以用此代替官方版本（只读），同步频率目前为10分钟一次，以保证尽量与官方服务同步。

既然淘宝NPM镜像这样方便，那么该如何使用呢？

使用方法比较简单，只需要在命令行中输入以下内容，按回车键等待安装成功即可。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装CNPM成功之后，输入“cnpm -v”，如图1.11所示，可以查看到当前CNPM版本，所有用到NPM的地方便可以全部替换为CNPM，这样就成功切换到淘宝NPM镜像上了。

图1.11 验证CNPM是否安装成功

1.2.4 Vue-cli脚手架

Vue-cli是一个官方命令行工具，可用于快速搭建大型单页面应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程，只需几分钟即可创建并启动一个带热重载、保存时静态检查，以及可用于生产环境构建配置的项目。

说明

单页面应用（Single Page Web Application，SPA）

只有一个Web页面的应用，如图1.12所示，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源，公共资源（js、css等）仅需加载一次。

多页面应用（Multi-Page Application，MPA）

多页面跳转刷新所有资源，每个公共资源（js、css 等）需选择性重新加载，如图1.13所示。

图1.12 单页面应用

图1.13 多页面应用

单页面和多页面应用详细对比分析，如表1-1所示。

表1-1 单页面应用和多页面应用对比

上面对Vue-cli脚手架的定义进行了介绍，下面介绍如何安装使用Vue-cli。

Vue-cli是用Node编写的命令行工具，需要进行全局安装。首先打开命令提示符窗口，输入如下命令进行安装：

cnpm install vue-cli -g

经验

安装Vue-cli脚手架之后，执行“vue -v”如果能显示Vue-cli的版本号，表示安装成功。在以后安装依赖包之后，可以通过<Module Name> --version或者简写<Module Name> -v来查看对应的版本号，如果能显示对应版本号，则说明安装成功。

另外还需要全局安装Webpack，关于Webpack的内容后面会介绍到，这里只需先安装：

cnpm install webpack -g

到这里，准备工作已经结束了，可以使用Vue-cli脚手架快速搭建单页面应用，只需在命令行窗口输入以下命令：

vue init webpack <项目名称>

例如：vue init webpack dm。

执行创建项目命令之后，会有一些命令行交互，在这里可以初始化一些项目信息，具体交互信息如图1.14所示。

图1.14 使用脚手架快速生成项目

命令交互的含义如下：

➢ project name：如果输入新的项目名称，则会使用新输入的项目名称；直接回车的话，就会默认使用webpack后面跟的项目名称。

➢ Project description：项目的描述内容，可以自定义一些内容。

➢ Author: 作者，可以写上自己的邮箱或者GitHub的地址。

➢ Vue build：打包的方式，这里直接回车即可。

➢ Install vue-router? (Y/n)：是否安装Vue路由，建议选择Yes，一般项目都需要路由功能。

➢ Use ESLint to lint your code? (Y/n)：是否启用ESlint检测，选择不启用。

➢ Set up unit tests (Y/n)：是否需要单元检测，建议选择不需要。

➢ Setup e2e tests with Nightwatch? (Y/n)：是否需要端对端的检测，建议选择不需要。

经过上面的步骤，项目基本的模板框架已经搭建起来了，下面要安装项目的依赖模块并启动项目。首先进入项目目录中，使用命令“cd dm”，接下来安装项目依赖模块，运行命令“cnpm install”。安装项目依赖模块之后便会多出一个 node_modules文件夹，安装的依赖模块都在这个文件夹中，如图1.15所示。