1.需要的组件：

1.node.js :安装webpack 需要有node.js 环境

2.npm：node package manager,nodejs的包管理器，用于node插件的安装、卸载、管理以来等。

3.cnpm：因为npm安装插件是从国外服务器下载，受网络的影响比较大，乐于分享的淘宝团队，搭建了一个npmjs.org镜像每10分钟同步一次，以保证尽量与官方服务同步。

2.webpack：是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

2.vue-cli:vue-cli是由Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板

2.安装步骤

2.1安装node.js

1.从node.js 官网下载 node.js

我是windows开发环境，直接选择64位的.msi 进行安装。

2.安装完毕后，在cmd里面用node -v 测试是否安装成功。

3.在cmd中用 npm-v 检查npm 是否安装成功

4.配置npm的全局模块的存放路径、cache的路径。此处选择放在E:Program Files odejs

输入如下命令：

npm config set prefix "E:Program Files
odejs
ode_global"
npm config set cache  "E:Program Files
odejs
ode_cache"

然后将E:Program Files odejs ode_global 写入环境变量path。

2.2安装cnmp

1.执行如下命令，安装cnmp

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

2.在cmd中输入cnpm -v， 检查是否安装成功。

2.3安装webpack

1.安装webpack，在cmd中输入如下命令

cnpm install webpack -g

2.在cmd中输入webpack --display-error-details ，检查webpack是否安装成功

2.4安装Vue-cli

1.安装vue cnpm install vue

2.安装vule-cli cnpm install -g vue-cli

3.构建前端项目

前面我们完成了相关工具的安装，下面我们开始构建前端项目ehour。

在cmd中执行如下命令：

vue init webpack hr

假如报错，检查host文件中是否有相关github的配置，假如存在，删除恢复默认配置。

构建过程中，系统会要求依次输入项目的基本信息。构建完成后，执行如下命令。运行第一个Vue项目。

cd hr npm run dev

系统会自动构建部署应用

按照提示，访问http://localhost:8081/

第一个Vue项目已经运行起来了