devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Vue.js】使用Element搭建首页导航&左侧菜单_vue管理项目中,左侧栏如何添加

作者：weixin_40725706 | 2024-02-10 01:17:38

赞

踩

vue管理项目中,左侧栏如何添加

目录

Mock.js

是什么

有什么好处

安装mockjs

​编辑 

引入mockjs

 mockjs使用

 login-mock

Bus事物总线 

首页导航栏与左侧菜单搭建

结合总线完成组件通讯

Mock.js

是什么

Mock.js是一个用于生成随机数据的模拟数据生成器。它可以帮助开发人员模拟接口请求，生成随机的数据，以便进行开发和测试。Mock.js提供了丰富的数据模板和随机数据生成规则，可以根据需求生成各种类型的数据，如字符串、数字、布尔值、数组、对象等。同时，Mock.js还支持拦截Ajax请求，使得在开发过程中可以独立于后端接口进行前端开发和测试。

有什么好处

使用Mock.js可以有效地提高开发效率，尤其在前后端分离的开发模式下，可以让前端开发人员独立于后端接口进行开发，减少对后端接口的依赖性。此外，Mock.js还可以模拟接口请求的各种场景，如请求失败、请求超时等，以便测试前端页面的容错性和稳定性。 

安装mockjs

npm i mockjs -D

注意：在SPA项目工作区间使用cmd执行该命令

执行完毕之后，在devDependencies下会发现已下载好mockjs插件，证明已经安装好了

 

引入mockjs

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置

dev.env.js

加入Mock:'true'

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

prod.env.js(生产坏境):

加入Mock:'flase'

  1. module.exports = {
  2.   NODE_ENV: '"production"',
  3. 	MOCK: 'false'
  4. }

 mian.js导入Mock动态依赖

  1. //开发环境下才会引入mockjs
  2. process.env.MOCK && require('@/mock')

 mockjs使用

导入两个js

 login-mock

  1. // const loginInfo = {
  2. // 	code: -1,
  3. // 	message: '密码错误'
  4. // }
  5.  
  6. //使用mockjs的模板生成随机数据
  7. const loginInfo = {
  8. 	'code|-1-0': 0,
  9. 	'message|3-10': 'msg'
  10. }
  11. export default loginInfo;

index.js

  1. import Mock from 'mockjs' //引入mockjs，npm已安装
  2. import action from '@/api/action' //引入请求地址
  3.  
  4. //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
  5. Mock.setup({
  6. 	// timeout: 400  //延时400s请求到数据
  7. 	timeout: 200 - 400 //延时200-400s请求到数据
  8. })
  9.  
  10. //引登陆的测试数据，并添加至mockjs
  11. import loginInfo from '@/mock/json/login-mock.js'
  12. let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
  13. Mock.mock(s1, "post", loginInfo)
  14. // Mock.mock(s1, /post|get/i, loginInfo)

登入Login.vue

  1. <template>
  2. 	<div class="login-wrap">
  3. 		<el-form class="login-container">
  4. 			<h1 class="title">用户登录</h1>
  5. 			<el-form-item label="">
  6. 				<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
  7. 			</el-form-item>
  8. 			<el-form-item label="">
  9. 				<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
  10. 			</el-form-item>
  11. 			<el-form-item>
  12. 				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
  13. 			</el-form-item>
  14. 			<el-row style="text-align: center;margin-top:-10px">
  15. 				<el-link type="primary">忘记密码</el-link>
  16. 				<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
  17. 			</el-row>
  18. 		</el-form>
  19. 	</div>
  20. </template>
  21.  
  22. <script>
  23. import axios from 'axios'
  24. import qs from 'qs' //用于post请求
  25. export default {
  26.     name: 'Login',
  27.     data() {
  28.       return {
  29.         username: "",
  30.         password: "",
  31.         msg: '啊'
  32.       }
  33.     },
  34.     methods: {
  35.       Register() {
  36.         this.$router.push('/Register');
  37.       },
  38.       doSubmit() {
  39.         let params = {
  40.           username: this.username,
  41.           password: this.password
  42.         };
  43.         console.log(params);
  44.         //定义后端都请求地址
  45.         var url = this.axios.urls.SYSTEM_USER_DOLOGIN;
  46.  
  47.         //以下是post请求及整合资源
  48.         //通过qs中的stringify方法进行格式转换
  49.         //注意数据是保存到json对象的params属性
  50.         this.axios.post(url,params).then(r => {
  51.           console.log(r);
  52. 		  this.$message({
  53. 			  message:r.data.message,
  54. 			  type:r.data.code==0?'success':'error'
  55. 		  });
  56. 		  
  57.         }).catch(e => {
  58.           console.log(e);
  59.         });
  60.  
  61.  
  62.       }
  63.     }
  64.   }
  65.  
  66. </script>
  67. <style scoped>
  68. 	.login-wrap {
  69. 		box-sizing: border-box;
  70. 		width: 100%;
  71. 		height: 100%;
  72. 		padding-top: 10%;
  73. 		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTgiIG9wYWNpdHk9IjAuOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzQuOTAxNDE2LCA1NjkuNjk5MTU4KSByb3RhdGUoLTcuMDAwMDAwKSB0cmFuc2xhdGUoLTc0LjkwMTQxNiwgLTU2OS42OTkxNTgpIHRyYW5zbGF0ZSg0LjkwMTQxNiwgNTI1LjE5OTE1OCkiPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTExIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjI1IiBjeD0iNjMuNTc0ODc5MiIgY3k9IjMyLjQ2ODM2NyIgcng9IjIxLjc4MzA0NzkiIHJ5PSIyMS43NjYwMDgiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0zIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjU5OTk5OTk2NCIgY3g9IjUuOTg3NDY0NzkiIGN5PSIxMy44NjY4NjAxIiByeD0iNS4yMTczOTEzIiByeT0iNS4yMTMzMDk5NyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02NC4yNzc1NTgyLDMzLjE3MDQ5NjMgTDExOS4xODU4MzYsMTYuNTY1NDkxNSIgaWQ9IlBhdGgtMTIiIHN0cm9rZT0iI0NGREFFNiIgc3Ryb2tlLXdpZHRoPSIxLjczOTEzMDQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDIuMTQzMTcwOCwyNi41MDAyNjgxIEw3LjcxMTkwMTYyLDE0LjU2NDA3MDIiIGlkPSJQYXRoLTE2IiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMC43MDI2Nzg5NjQiIG9wYWNpdHk9IjAuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLjQwNTM1Nzg5OTg3MzE1MywyLjEwODAzNjk1MzQ2OTk4MSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02My45MjYyMTg3LDMzLjUyMTU2MSBMNDMuNjcyMTMyNiw2OS4zMjUwOTUxIiBpZD0iUGF0aC0xNSIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjAuNzAyNjc4OTY0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjEuNDA1MzU3ODk5ODczMTUzLDIuMTA4MDM2OTUzNDY5OTgxIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjYuODUwOTIyLCAxMy41NDM2NTQpIHJvdGF0ZSgzMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI2Ljg1MDkyMiwgLTEzLjU0MzY1NCkgdHJhbnNsYXRlKDExNy4yODU3MDUsIDQuMzgxODg5KSIgZmlsbD0iI0NGREFFNiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSI5LjEzNDgyNjUzIiBjeT0iOS4xMjc2ODA3NiIgcng9IjkuMTM0ODI2NTMiIHJ5PSI5LjEyNzY4MDc2Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC4yNjk2NTMxLDE4LjI1NTM2MTUgQzE4LjI2OTY1MzEsMTMuMjE0MjgyNiAxNC4xNzk4NTE5LDkuMTI3NjgwNzYgOS4xMzQ4MjY1Myw5LjEyNzY4MDc2IEM0LjA4OTgwMTE0LDkuMTI3NjgwNzYgMCwxMy4yMTQyODI2IDAsMTguMjU1MzYxNSBMMTguMjY5NjUzMSwxOC4yNTUzNjE1IFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMTM0ODI3LCAxMy42OTE1MjEpIHNjYWxlKC0xLCAtMSkgdHJhbnNsYXRlKC05LjEzNDgyNywgLTEzLjY5MTUyMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYuMjk0NzAwLCAxMjMuNzI1NjAwKSByb3RhdGUoLTUuMDAwMDAwKSB0cmFuc2xhdGUoLTIxNi4yOTQ3MDAsIC0xMjMuNzI1NjAwKSB0cmFuc2xhdGUoMTA2LjI5NDcwMCwgMzUuMjI1NjAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMiIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC4yNSIgY3g9IjI5LjExNzY0NzEiIGN5PSIyOS4xNDAyNDM5IiByeD0iMjkuMTE3NjQ3MSIgcnk9IjI5LjE0MDI0MzkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjMiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjIxLjU2ODYyNzUiIHJ5PSIyMS41ODUzNjU5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMi1Db3B5IiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuNCIgY3g9IjE3OS4wMTk2MDgiIGN5PSIxMzguMTQ2MzQxIiByeD0iMjMuNzI1NDkwMiIgcnk9IjIzLjc0MzkwMjQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQkFDQUQ5IiBvcGFjaXR5PSIwLjUiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjEwLjc4NDMxMzciIHJ5PSIxMC43OTI2ODI5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI5LjExNzY0NzEsMzkuOTMyOTI2OCBMMjkuMTE3NjQ3MSwxOC4zNDc1NjEgQzIzLjE2MTYzNTEsMTguMzQ3NTYxIDE4LjMzMzMzMzMsMjMuMTc5NjA5NyAxOC4zMzMzMzMzLDI5LjE0MDI0MzkgQzE4LjMzMzMzMzMsMzUuMTAwODc4MSAyMy4xNjE2MzUxLDM5LjkzMjkyNjggMjkuMTE3NjQ3MSwzOS45MzI5MjY4IFoiIGlkPSJPdmFsLTIiIGZpbGw9IiNCQUNBRDkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOSIgb3BhY2l0eT0iMC40NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcyLjAwMDAwMCwgMTMxLjAwMDAwMCkiIGZpbGw9IiNFNkExQTYiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yLUNvcHktMiIgY3g9IjcuMDE5NjA3ODQiIGN5PSI3LjE0NjM0MTQ2IiByeD0iNi40NzA1ODgyNCIgcnk9IjYuNDc1NjA5NzYiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAuNTQ5MDE5NjA4LDEzLjYyMTk1MTIgQzQuMTIyNjI2ODEsMTMuNjIxOTUxMiA3LjAxOTYwNzg0LDEwLjcyMjcyMiA3LjAxOTYwNzg0LDcuMTQ2MzQxNDYgQzcuMDE5NjA3ODQsMy41Njk5NjA5NSA0LjEyMjYyNjgxLDAuNjcwNzMxNzA3IDAuNTQ5MDE5NjA4LDAuNjcwNzMxNzA3IEwwLjU0OTAxOTYwOCwxMy42MjE5NTEyIFoiIGlkPSJPdmFsLTItQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjc4NDMxNCwgNy4xNDYzNDEpIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuNzg0MzE0LCAtNy4xNDYzNDEpICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMCIgZmlsbD0iI0NGREFFNiIgY3g9IjIxOC4zODIzNTMiIGN5PSIxMzguNjg1OTc2IiByeD0iMS42MTc2NDcwNiIgcnk9IjEuNjE4OTAyNDQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMC1Db3B5LTIiIGZpbGw9IiNFMEI0QjciIG9wYWNpdHk9IjAuMzUiIGN4PSIxNzkuNTU4ODI0IiBjeT0iMTc1LjM4MTA5OCIgcng9IjEuNjE3NjQ3MDYiIHJ5PSIxLjYxODkwMjQ0Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTAtQ29weSIgZmlsbD0iI0UwQjRCNyIgb3BhY2l0eT0iMC4zNSIgY3g9IjE4MC4wOTgwMzkiIGN5PSIxMDIuNTMwNDg4IiByeD0iMi4xNTY4NjI3NSIgcnk9IjIuMTU4NTM2NTkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjguOTk4NTM4MSwyOS45NjcxNTk4IEwxNzEuMTUxMDE4LDEzMi44NzYwMjQiIGlkPSJQYXRoLTExIiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuOCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwIiBvcGFjaXR5PSIwLjc5OTk5OTk1MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1NC4xMDA2MzUsIDM2LjY1OTMxNykgcm90YXRlKC0xMS4wMDAwMDApIHRyYW5zbGF0ZSgtMTA1NC4xMDA2MzUsIC0zNi42NTkzMTcpIHRyYW5zbGF0ZSgxMDI2LjYwMDYzNSwgNC42NTkzMTcpIj4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC03IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiIGN4PSI0My44MTM1NTkzIiBjeT0iMzIiIHJ4PSIxMS4xODY0NDA3IiByeT0iMTEuMjk0MTE3NiI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQuNTk2Nzc0LCAyMy4xMTExMTEpIiBmaWxsPSIjQkFDQUQ5Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtNyIgb3BhY2l0eT0iMC40NSIgY3g9IjkuMTg1MzQ3MTgiIGN5PSI4Ljg4ODg4ODg5IiByeD0iOC40NzQ1NzYyNyIgcnk9IjguNTU2MTQ5NzMiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBDMTMuODY1NzI2NCwxNy40NDUwMzg2IDE3LjY1OTkyMzUsMTMuNjE0MzE5OSAxNy42NTk5MjM1LDguODg4ODg4ODkgQzE3LjY1OTkyMzUsNC4xNjM0NTc4NyAxMy44NjU3MjY0LDAuMzMyNzM5MTU2IDkuMTg1MzQ3MTgsMC4zMzI3MzkxNTYgTDkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBaIiBpZD0iT3ZhbC03Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC42NTk3Mzg1LDI0LjgwOTY5NCBMNS43MTY2NjA4NCw0Ljc2ODc4OTQ1IiBpZD0iUGF0aC0yIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbCIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjAuOTQxMTc2NDcxIiBjeD0iMy4yNjI3MTE4NiIgY3k9IjMuMjk0MTE3NjUiIHJ4PSIzLjI2MjcxMTg2IiByeT0iMy4yOTQxMTc2NSI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLUNvcHkiIGZpbGw9IiNGN0UxQUQiIGN4PSIyLjc5NjYxMDE3IiBjeT0iNjEuMTc2NDcwNiIgcng9IjIuNzk2NjEwMTciIHJ5PSIyLjgyMzUyOTQxIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjYzMTI0NDMsMzkuMjkyMjcxMiBMNS4wNjM2NjY2Myw1OS43ODUwODIiIGlkPSJQYXRoLTEwIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xOSIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4Mi41MzcyMTksIDQ0Ni41MDI4NjcpIHJvdGF0ZSgtMTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEyODIuNTM3MjE5LCAtNDQ2LjUwMjg2NykgdHJhbnNsYXRlKDExNDIuNTM3MjE5LCAzMjcuNTAyODY3KSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEuMzMzNTM5LCAxMDQuNTAyNzQyKSByb3RhdGUoMjc1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNDEuMzMzNTM5LCAtMTA0LjUwMjc0MikgdHJhbnNsYXRlKDEyOS4zMzM1MzksIDkyLjUwMjc0MikiIGZpbGw9IiNCQUNBRDkiPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSIxMS42NjY2NjY3IiBjeT0iMTEuNjY2NjY2NyIgcj0iMTEuNjY2NjY2NyI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy4zMzMzMzMzLDIzLjMzMzMzMzMgQzIzLjMzMzMzMzMsMTYuODkwMDExMyAxOC4xMDk5ODg3LDExLjY2NjY2NjcgMTEuNjY2NjY2NywxMS42NjY2NjY3IEM1LjIyMzM0NDU5LDExLjY2NjY2NjcgMCwxNi44OTAwMTEzIDAsMjMuMzMzMzMzMyBMMjMuMzMzMzMzMywyMy4zMzMzMzMzIFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjY2NjY2NywgMTcuNTAwMDAwKSBzY2FsZSgtMSwgLTEpIHRyYW5zbGF0ZSgtMTEuNjY2NjY3LCAtMTcuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktNiIgZmlsbD0iI0NGREFFNiIgY3g9IjIwMS44MzMzMzMiIGN5PSI4Ny41IiByPSI1LjgzMzMzMzMzIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQzLjUsODguODEyNjY4NSBMMTU1LjA3MDUwMSwxNy42MDM4NTQ0IiBpZD0iUGF0aC0xNyIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuNSwzNy4zMzMzMzMzIEwxMjcuNDY2MjUyLDk3LjY0NDk3MzUiIGlkPSJQYXRoLTE4IiBzdHJva2U9IiNCQUNBRDkiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xOSIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciIHBvaW50cz0iMTQzLjkwMjU5NyAxMjAuMzAyMjgxIDE3NC45MzU0NTUgMjMxLjU3MTM0MiAzOC41IDE0Ny41MTA4NDcgMTI2LjM2Njk0MSAxMTAuODMzMzMzIj48L3BvbHlsaW5lPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNTkuODMzMzMzLDk5Ljc0NTM4NDIgTDE5NS40MTY2NjcsODkuMjUiIGlkPSJQYXRoLTIwIiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyIgb3BhY2l0eT0iMC42Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIwNS4zMzMzMzMsODIuMTM3MjEwNSBMMjM4LjcxOTQwNiwzNi4xNjY2NjY3IiBpZD0iUGF0aC0yNCIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjY2LjcyMzQyNCwxMzIuMjMxOTg4IEwyMDcuMDgzMzMzLDkwLjQxNjY2NjciIGlkPSJQYXRoLTI1IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNSIgZmlsbD0iI0MxRDFFMCIgY3g9IjE1Ni45MTY2NjciIGN5PSI4Ljc1IiByPSI4Ljc1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTUtQ29weS0zIiBmaWxsPSIjQzFEMUUwIiBjeD0iMzkuMDgzMzMzMyIgY3k9IjE0OC43NSIgcj0iNS4yNSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktMiIgZmlsbC1vcGFjaXR5PSIwLjYiIGZpbGw9IiNEMURFRUQiIGN4PSI4Ljc1IiBjeT0iMzMuMjUiIHI9IjguNzUiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTQiIGZpbGwtb3BhY2l0eT0iMC42IiBmaWxsPSIjRDFERUVEIiBjeD0iMjQzLjgzMzMzMyIgY3k9IjMwLjMzMzMzMzMiIHI9IjUuODMzMzMzMzMiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTUiIGZpbGw9IiNFMEI0QjciIGN4PSIxNzUuNTgzMzMzIiBjeT0iMjMyLjc1IiByPSI1LjI1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
  74. 		/* background-color: #112346; */
  75. 		background-repeat: no-repeat;
  76. 		background-position: center right;
  77. 		background-size: 100%;
  78. 	}
  79. 	 .login-container {
  80. 	border-radius: 10px;
  81. 	margin: 0px auto;
  82. 	width: 350px;
  83. 	padding: 30px 35px 15px 35px;
  84. 	background: #fff;
  85. 	border: 1px solid #eaeaea;
  86. 	text-align: left;
  87. 	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  88. }
  89.  
  90. .title {
  91. 	margin: 0px auto 40px auto;
  92. 	text-align: center;
  93. 	color: #505458;
  94. }
  95. </style>

效果图 

Bus事物总线 

首页导航栏与左侧菜单搭建

组件(3个)

1.AppMain.vue：布局容器组件

2.LeftAside.vue：左侧菜单组件

3.TopNav.vue：首页导航组件

 APPMian.vue

  1. <template>
  2. 	<el-container class="main-container">
  3. 		<el-aside v-bind:class="asideClass">
  4. 			<LeftNav></LeftNav>
  5. 		</el-aside>
  6. 		<el-container>
  7. 			<el-header class="main-header">
  8. 				<TopNav></TopNav>
  9. 			</el-header>
  10. 			<el-main class="main-center">Main</el-main>
  11. 		</el-container>
  12. 	</el-container>
  13. </template>
  14.  
  15. <script>
  16. 	// 导入组件
  17. 	import TopNav from '@/components/TopNav.vue'
  18. 	import LeftNav from '@/components/LeftNav.vue'
  19.  
  20. 	// 导出模块
  21. 	export default {
  22. 		
  23. 	};
  24. </script>
  25. <style scoped>
  26. 	.main-container {
  27. 		height: 100%;
  28. 		width: 100%;
  29. 		box-sizing: border-box;
  30. 	}
  31.  
  32. 	.main-aside-collapsed {
  33. 		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
  34. 		width: 64px !important;
  35. 		height: 100%;
  36. 		background-color: #334157;
  37. 		margin: 0px;
  38. 	}
  39.  
  40. 	.main-aside {
  41. 		width: 240px !important;
  42. 		height: 100%;
  43. 		background-color: #334157;
  44. 		margin: 0px;
  45. 	}
  46.  
  47. 	.main-header,
  48. 	.main-center {
  49. 		padding: 0px;
  50. 		border-left: 2px solid #333;
  51. 	}
  52. </style>

LeftNav.vue

  1. <template>
  2. 	<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#334157"
  3. 	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" :collapse-transition="bb">
  4. 		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
  5. 		<div class="logobox">
  6. 			<img class="logoimg" src="../assets/img/logo.png" alt="">
  7. 		</div>
  8. 		<el-submenu index="1">
  9. 			<template slot="title">
  10. 				<i class="el-icon-location"></i>
  11. 				<span>导航一</span>
  12. 			</template>
  13. 			<el-menu-item-group>
  14. 				<template slot="title">分组一</template>
  15. 				<el-menu-item index="1-1">选项1</el-menu-item>
  16. 				<el-menu-item index="1-2">选项2</el-menu-item>
  17. 			</el-menu-item-group>
  18. 			<el-menu-item-group title="分组2">
  19. 				<el-menu-item index="1-3">选项3</el-menu-item>
  20. 			</el-menu-item-group>
  21. 			<el-submenu index="1-4">
  22. 				<template slot="title">选项4</template>
  23. 				<el-menu-item index="1-4-1">选项1</el-menu-item>
  24. 			</el-submenu>
  25. 		</el-submenu>
  26. 		<el-menu-item index="2">
  27. 			<i class="el-icon-menu"></i>
  28. 			<span slot="title">导航二</span>
  29. 		</el-menu-item>
  30. 		<el-menu-item index="3" disabled>
  31. 			<i class="el-icon-document"></i>
  32. 			<span slot="title">导航三</span>
  33. 		</el-menu-item>
  34. 		<el-menu-item index="4">
  35. 			<i class="el-icon-setting"></i>
  36. 			<span slot="title">导航四</span>
  37. 		</el-menu-item>
  38. 	</el-menu>
  39. </template>
  40. <script>
  41. 	export default {
  42. 		
  43. 	}
  44. </script>
  45. <style>
  46. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
  47. 		width: 240px;
  48. 		min-height: 400px;
  49. 	}
  50.  
  51. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
  52. 		border: none;
  53. 		text-align: left;
  54. 	}
  55.  
  56. 	.el-menu-item-group__title {
  57. 		padding: 0px;
  58. 	}
  59.  
  60. 	.el-menu-bg {
  61. 		background-color: #1f2d3d !important;
  62. 	}
  63.  
  64. 	.el-menu {
  65. 		border: none;
  66. 	}
  67.  
  68. 	.logobox {
  69. 		height: 40px;
  70. 		line-height: 40px;
  71. 		color: #9d9d9d;
  72. 		font-size: 20px;
  73. 		text-align: center;
  74. 		padding: 20px 0px;
  75. 	}
  76.  
  77. 	.logoimg {
  78. 		height: 40px;
  79. 	}
  80. </style>

TopNav.vue

  1. <template>
  2. 	<!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
  3. 	 text-color="#fff" active-text-color="#ffd04b">
  4. 		<el-menu-item index="1">处理中心</el-menu-item>
  5. 		<el-submenu index="2">
  6. 			<template slot="title">我的工作台</template>
  7. 			<el-menu-item index="2-1">选项1</el-menu-item>
  8. 			<el-menu-item index="2-2">选项2</el-menu-item>
  9. 			<el-menu-item index="2-3">选项3</el-menu-item>
  10. 			<el-submenu index="2-4">
  11. 				<template slot="title">选项4</template>
  12. 				<el-menu-item index="2-4-1">选项1</el-menu-item>
  13. 				<el-menu-item index="2-4-2">选项2</el-menu-item>
  14. 				<el-menu-item index="2-4-3">选项3</el-menu-item>
  15. 			</el-submenu>
  16. 		</el-submenu>
  17.  
  18. 		<el-menu-item index="3" disabled>消息中心</el-menu-item>
  19. 		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  20. 	</el-menu> -->
  21. 	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
  22. 		<el-button class="buttonimg">
  23. 			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
  24. 		</el-button>
  25. 		<el-submenu index="2" class="submenu">
  26. 			<template slot="title">超级管理员</template>
  27. 			<el-menu-item index="2-1">设置</el-menu-item>
  28. 			<el-menu-item index="2-2">个人中心</el-menu-item>
  29. 			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
  30. 		</el-submenu>
  31. 	</el-menu>
  32. </template>
  33.  
  34. <script>
  35. 	export default {
  36. 		
  37. 	}
  38. </script>
  39.  
  40. <style scoped>
  41. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
  42. 		border: none;
  43. 	}
  44.  
  45. 	.submenu {
  46. 		float: right;
  47. 	}
  48.  
  49. 	.buttonimg {
  50. 		height: 60px;
  51. 		background-color: transparent;
  52. 		border: none;
  53. 	}
  54.  
  55. 	.showimg {
  56. 		width: 26px;
  57. 		height: 26px;
  58. 		position: absolute;
  59. 		top: 17px;
  60. 		left: 17px;
  61. 	}
  62.  
  63. 	.showimg:active {
  64. 		border: none;
  65. 	}
  66. </style>

 

给组件配置路由关系

index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import AppMain from '@/components/AppMain'
  5. import LeftNav from '@/components/LeftNav'
  6. import TopNav from '@/components/TopNav'
  7. import Login from '@/views/Login'
  8. import Register from '@/views/Register'
  9.  
  10.  
  11. Vue.use(Router)
  12.  
  13. export default new Router({
  14. 	routes: [{
  15. 		path: '/',
  16. 		name: 'Login',
  17. 		component: Login
  18. 	
  19. 	},{path: '/Register',
  20. 		name: 'Register',
  21. 		component: Register,
  22. 		
  23. 	},{path: '/AppMain',
  24. 		name: 'AppMain',
  25. 		component: AppMain,
  26. 		children:[
  27. 			{path: '/LeftNav',
  28. 				name: 'LeftNav',
  29. 				component: LeftNav,
  30. 				
  31. 			},{path: '/TopNav',
  32. 				name: 'TopNav',
  33. 				component: TopNav
  34. 			}
  35. 		]
  36. 	}
  37. 	]
  38. })

Login.vue跳转到AppMain(登入跳到主界面)

this.$router.push('/AppMian');

效果图

 

结合总线完成组件通讯

 Bus事件适用于父子组件、非父子组件等之间的通信

定义Bus ：main.js

  1. new Vue({
  2.   el: '#app',
  3.   data(){
  4.     return{
  5.       Bus:new Vue()
  6.     }
  7.   },
  8.   router,
  9.   components: { App },
  10.   template: '<App/>'
  11. })

 TopNav.vue

  1. methods:{
  2.       doToggle(){//收起左侧菜单事件
  3.         this.collapsed=!this.collapsed;
  4.         //将是否折叠的变量放入总线
  5.         this.$root.Bus.$emit('aaa',this.collapsed);
  6.       },
  7.       exit(){//退出事件
  8.         this.$router.push("/")
  9.       }
  10.     }

LeftNav.vue

  1.               created(){
  2. 		      this.$root.Bus.$on('aaa',r=>{
  3. 		        this.collapsed=r;
  4. 		      });
  5. 		    }

AppMain.vue

  1. created(){
  2.       this.$root.Bus.$on('aaa',r=>{
  3.         this.asideClass=r ? 'main-aside-collapsed':'main-aside';
  4.       });
  5.     }

效果图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/73647
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号