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

目录

一、mock的使用

二、主界面搭建

三、退出

---

一、mock的使用

步骤：

1.下载依赖 npm install mockjs -D  

2.引入到main.js中使用

3.添加默认接口数据

4.绑定接口数据

①、

下载完后 package.json会多出下面该依赖

 ②、先配置开发环境

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'true'
})

prod.env.js

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

讲以下代码加入main.js中

// process.env.MOCK 为 false，那么require('@/mock')不执行的；process.env.MOCK 在生成环境下为false
process.env.MOCK && require('@/mock')

③、将文件mock拷到src中

二、主界面搭建

①、将以下文件拷入到主界面中

 

 ②、然后导入图片

 

 ③、配置路由

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
 
Vue.use(Router)
 
export default new Router({
  routes: [{
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children: [{
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        }
      ]
    }
  ]
})

 ④、进行更改

将以下代码段加入到Login.vue中

 this.$router.push({path:"/AppMain"});

 

 AppmMain.vue

// 导出模块
	export default {
		components:{
      TopNav,LeftNav
    },
    data(){
      return{
        asideClass:'main-aside'
      }
    }
	};

 LeftNav.vue:

	export default {
    data(){
      return{
        collapsed:false
      }
    }
	}

 

 TopNav.vue

	export default {
		data(){
		  return{
		    collapsed:false,
        imgsq:require('@/assets/img/sq.png'),
        imgshow:require('@/assets/img/show.png')
		  }
		}
	}

 效果：

三、退出

main.js

  data(){
    return{
      // 在vue根实例中定一个变量，这个变量就是vue实例，它总线
      // props this.$emit
      Bus:new Vue({})
    }
  },

 

TopNav.vue

methods:{
      doToggle(){
        this.collapsed = !this.collapsed;
        // 将this.collapsed放到总线上
        this.$root.Bus.$emit("collapsed-side",this.collapsed);
      },
      exit(){
        this.$router.push({path:'/Login'})
      }
    }

 LeftNav.vue

    created(){
      // 从总线上取出this.collapsed变量
      this.$root.Bus.$on("collapsed-side",v =>{
        this.collapsed = v;
      });
    }

AppMain.vue

    created(){
      // 从总线上取出this.collapsed变量
      this.$root.Bus.$on("collapsed-side",v =>{
        this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
      });
    }

效果：