SPA项目开发之首页导航+左侧菜单

1.mock.js模拟响应ajax请求

1.1 安装mockjs依赖

 npm install mockjs-D

1.2 配置开发环境及生产环境

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置
(1)在config文件下dev.env.js里添加如下：

 module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
     MOCK: 'true'
        })

(2)在config文件下prod.env.js里添加如下：

module.exports = {
NODE_ENV: '"production"',
MOCK: 'false'
      }

(3)main.js 开发环境下引入mockjs

process.env.MOCK && require('@/mock')

1.3 mock的使用

（1）引用 mockjs,npm已安装

import Mock from'mockjs'

（2）引入请求地址

import action from'@/api/action'

(3) 全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时

 Mock.setup({

// timeout: 400  //延时400s请求到数据

timeout: 200 - 400 //延时200-400s请求到数据

      })

2.退出功能

exit(){
 this.$router.push(
  path:'/Login'
 })
 }                               

3.左侧树收缩功能

3.1 定义总线

  new Vue({
   
  el: '#app',
   
  data(){
             return {
                     
  Bus:new Vue({
                                 
  })
             }
   
  },
   
  router,
   
  components: { App },
   
  template: '<App/>'
  })
  

3.2 在A组件触发事件
this.$root.Bus.$emit(“事件名”, 参数1, 参数2, …);

  doToggle(){
                  this.collapsed
  = !this.collapsed;
                   this.$root.Bus.$emit("collapsed-side",
  this.collapsed);
              }

3.3 在B组件监听事件
this.$root.Bus.$on(“事件名”, 回调函数);

  this.$root.Bus.$on("collapsed-side",
  (v)=>{
                  this.asideClass
  = v ? 'main-aside-collapsed':'main-aside';
              });