SPA项目首页导航以及左侧菜单

安装mockjs依赖

安装方法不在啰嗦

npm install mockjs -D   

查看是否成功

如图导入文件夹

assets和mock

配置开发环境及生产环境

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

import Vue from 'vue'
process.env.MOCK && require('@/mock')
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import axios from '@/api/http' 
import VueAxios from 'vue-axios'

测试：

不启动tomact

前台主界面的搭建

拷贝组件以及配置

组件

配置

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain  from '@/components/AppMain'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
Vue.use(Router)

export default new Router({
  routes: [
		{
			path: '/',
			name: 'Login',
			component: Login
		},
		{
			path: '/Login',
			name: 'Login',
			component: Login
		},
		{
			path: '/Reg',
			name: 'Reg',
			component: Reg
		},
		{
			path: '/AppMain',
			name: 'AppMain',
			component: AppMain
		}
		
  ]
})

问题一

解决方案：渲染
AppMain.vue

export default {
		data(){
			return{
				asideClass:'main-aside'
			}
		},
		components:{
			TopNav,LeftNav  //es6的写法
		}
	};

LeftNav.vue

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

TopNav.vue

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

效果图

退出功能

TopNav.vue

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

Vue总线概念

图解

左侧树收缩功能

在main.js中定义容器：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
process.env.MOCK && require('@/mock')
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import axios from '@/api/http' 
import VueAxios from 'vue-axios'


Vue.use(ElementUI)
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  data(){
	  return{
		   Bus:new Vue({//定义总线
		   	
		   })
	  }
  },
  router,
  components: { App },
  template: '<App/>'
})

一边存一边取：
Top

			doToggle(){
				this.collapsed=!this.collapsed;//点击了就是取反 true
				this.$root.Bus.$emit('collapsed-side-click',this.collapsed);
			}

App

created(){
			//v就是从Vue总线Bus获取的变量值
			this.$root.Bus.$on('collapsed-side-click',(v)=>{
				this.asideClass=v ? 'main-aside-collapsed':'main-aside'
			})
		}

可以达到收的功能
改变兄弟组件lief

created(){
			//v就是从Vue总线Bus获取的变量值
			this.$root.Bus.$on('collapsed-side-click',(v)=>{
				this.collapsed=v ;
			})

达到图片收缩

效果：