全局安装成功webpack:

全局安装vue-cli（命令：npm install -g vue-cli），安装完成后输入 vue -V（这里V是大写V）：

证明vue-cli脚手架全局安装成功。

2）使用vue-cli构建vue项目

① 我首先在新建如下目录作为项目存放地：

然后使用命令行cd进入到项目目录输入：

vue init webpack vue-node-webpack4复制代码

出现如下图所示：

选项前几个都是yes,ESLint是代码规范与错误检测工具，暂时不选，unit是单元测试工具，是站在开发者角度测试，暂时不选，e2e也是单元测试工具，e2e测试是把我们的程序堪称是一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果，暂时不选。

注意：unit测试是程序员写好自己的逻辑后可以很容易的测试自己的逻辑返回的是不是都正确。e2e代码是测试所有的需求是不是都可以正确的完成，而且最终要的是在代码重构，js改动很多之后，需要对需求进行测试的时候测试代码是不需要改变的，你也不用担心在重构后不能达到客户的需求。

② 配置完成后，可以看到目录下多出了一个项目文件夹vue-node-webpack4，然后cd进入这个文件夹，安装依赖：

npm install复制代码

然后安装完目录结构如下图：

3）启动项目

npm run dev复制代码

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js

启动命令这块解释：

注意：在进行vue页面调试时，一定要去谷歌商店下载一个vue-tool扩展程序。 

4）vue-cli的webpack配置分析

从package.json可以看到开发和生产环境的入口 。

• 可以看到dev中的设置，build/webpack.dev.conf.js，该文件是开发环境中webpack的配置入口。
• 在webpack.dev.conf.js中出现webpack.base.conf.js，这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置。
• 更详细配置文件信息请看segmentfault.com/a/119000000…

5）打包上线

npm run build复制代码

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。

项目上线时，只需要将 dist 文件夹放到服务器就行了。

二、vue-router梳理

三、vue-resource介绍、axios介绍与使用

1、vue-resource

Vue.js的插件提供了使用XMLHttpRequest或JSONP 进行Web请求和处理响应的服务

单来说，vue-resource就像jQuery里的$.ajax，用来进行数据交互。

特点：

• 体积小
• 支持主流的浏览器（ie9以下不支持）
• 支持Promise API和URI Templates（Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。）
• 支持拦截器（拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。

  拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。）

2、axios

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。

特点：

• 在浏览器中发送 XMLHttpRequests 请求
• 在 node.js 中发送 http请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持保护安全免受 CSRF/XSRF 攻击

get请求方式如下：

方向代理的配置如下：

四、vue项目的滚动加载分页

vue滚动加载的插件:vue-infinite-scroll

安装命令如下：

npm install vue-infinite-scroll --save复制代码

五、左侧菜单高亮

通过索引判断高亮