搭建项目
全局安装 vue-cli
npm install –global vue-cli
vue init webpack my-project
项目目录
登录页面
源代码
(1)component文件夾下添加Login.vue，index.js引入页面。
(2)安装iview: 控制台:npm install iview –save，main.js添加如下代码，引入iview
import iView from ‘iview’
import ‘iview/dist/styles/iview.css’
Vue.use(iView)
(3)提交=>跳转到Home页面
先在index.js添加Home页面路由
登录成功跳转主页面:self.$router.push({path: ‘/page/home’})
主页面
源代码
axios
axios用于在node.js中发送请求。
(1)安装axios
npm install axios –save
(2)引入方式
在安装其他插件式，可以直接在main.js中引入，并使用Vue.use()来注册，但由于axios不是vue的插件，所以要使用如下方法在main.js文件中进行注册。
import axios from ‘axios’
Vue.prototype.$axios = axios
注:Vue.prototype指原型属性。如果在很多组件用到同一数据，但是不想污染全局作用域，可以通过原型定义，使这个数据可以在每个Vue实例中使用。
(3)使用方法
mock.js插件
mockjs用于模拟数据实现前后端分离。在开发过程中，前端开发需要后端接口才能进行，在后端不能及时提供接口时，有没有可能模拟后端接口呢?于是就用到了mock.js插件，模拟后端数据来实现增删改查操作。
(1)安装mockjs
npm install mockjs –save
(2)引入方式
在main.js中添加require(‘mockjs’)
(3)使用方法
项目目录：
前端发送请求:
模拟数据:
连接后台
在config目录下的index.js文件中修改如下代码可以关联后台代码并修改端口为8888。proxyTable是代理表,作用是用来建一个虚拟api服务器用来代理本机的请求，只能用于开发模式。vue-cli使用这个功能是借助http-proxy-middleware插件，一般解决跨域请求api。
注: proxyTable: {
‘/list’: {
target: ‘
http://api.xxxxxxxx.com‘, -> 目标url地址changeOrigin: true, -> 指示是否跨域
pathRewrite: {
‘^/list’: ‘/list’ -> 可以使用 /list 等价于 api.xxxxxxxx.com/list
} } }
SessionStorage登录状态存储页面
保存数据到sessionStorage
sessionStorage.setItem(‘key’, ‘value’);
http响应拦截(前端实现登录拦截)
页面发送请求时,例如查询场点数据,要进行登陆判断，如果已经登录就显示数据，没登录要跳转到登录页面。响应拦截器。想要统一处理请求和响应就会用到axios拦截器。
利用vue-router提供的钩子函数beforeEach()对路由进行判断。
参数:
to: 即将要进入的目标 路由对象
from: 当前导航正要离开的路由
next:function 使用beforEach最后都要调用next(),如果不传递参数,to:/login,就会跳转到login界面。如果传递参数,例如next(‘/home’)，to:/login就会失效，只会跳转到home界面。
组件
面包屑
源码
1.在主页面中添加面包屑组件。
2.为了route同步，主要watch $route的值，$routed.matched得到的是一个数组。
3.做完只显示二级目录
4.为了显示三级目录，添加货架管理。
(1)判断是否有上级目录
(2)index.js路由里添加上级目录描述和空路径。
(3)路径为空不能链接，路径不为空可以链接。
