• 【Vue.js】使用Element搭建首页导航&左侧菜单

    目录

    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: ''
    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.     }

    效果图

  • 相关阅读:
    【机器学习项目实战10例目录】项目详解 + 数据集 + 完整源码
    【数据库三大范式】让我们来聊一聊数据库的三大范式和反范式设计
    Kafka ProducerConfig和ConsumerConfig配置
    小tips；CSS和JS“通信”
    Vue的性能优化：如何利用Vue的各种特性和技术，例如懒加载、代码分割、预渲染等，来优化Vue应用的性能
    Android切换主题生命周期流程与onSaveInstanceState和onRestoreInstanceState，Kotlin
    含文档+PPT+源码等]精品微信小程序计算机维修服务+后台管理系统|前后分离VUE[包运行成功]计算机毕业设计项目源码Java毕设项目
    LeetCode50天刷题计划（Day 31— 插入区间（9.00-11.20）
    SpringCloud Alibaba微服务实战三 - 服务调用
    【JUC】ThreadPoolExecutor构造函数及拒绝策略
  • 原文地址：https://blog.csdn.net/m0_74934282/article/details/133278362