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

    目录

    一、mock的使用

    1、下载依赖  npm install mock -d

     2、引入main.js

    3、添加默认接口数据

    4、绑定接口数据

    二、主界面搭建&左侧树收缩功能（vue总线的概念）

    主界面布局：

    1、导入图片

    2、导入AppMain.vue / LeftMav.vue / TopNav.vue

    3、AppMain.vue中注册使用组件

    4、router/index.js中添加路由和组件的映射

    5、修改添加组件中需要用到的变量

    总线：

    1、在main.js中创建一个变量，这个变量就是vue实例

    2、在子组件中通过this.$root.Bus.$emit注册事件进行传参

    3、在需要用到总线中变量时，通过this.$root.Bus.$on获取总线中的变量值

    三、退出

    一、mock的使用

    1、下载依赖  npm install mock -d

     2、引入main.js

    由于我们的mock只在开发环境下使用，打包时不能带入生产环境中，所以我们需要在env中进行配置

    dev.env开发环境

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

     prod.env生产环境

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

    3、添加默认接口数据

    4、绑定接口数据

     mock/inde.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)

    二、主界面搭建&左侧树收缩功能（vue总线的概念）

    界面原型 

     

    主界面布局：

    1、导入图片

    2、导入AppMain.vue / LeftMav.vue / TopNav.vue

    3、AppMain.vue中注册使用组件

    4、router/index.js中添加路由和组件的映射

    5、修改添加组件中需要用到的变量

    AppMain.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. 		components:{
    23.       TopNav,LeftNav
    24.     },
    25.     data(){
    26.       return {
    27.         asideClass:'main-aside'
    28.       }
    29.     },
    30.     created() {
    31.       //从总线上取出this.collapsed变量
    32.       this.$root.Bus.$on("collapsed-side",v => {
    33.         this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
    34.       })
    35.     }
    36. 	};
    37. </script>
    38. <style scoped>
    39. 	.main-container {
    40. 		height: 100%;
    41. 		width: 100%;
    42. 		box-sizing: border-box;
    43. 	}
    44.  
    45. 	.main-aside-collapsed {
    46. 		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    47. 		width: 64px !important;
    48. 		height: 100%;
    49. 		background-color: #334157;
    50. 		margin: 0px;
    51. 	}
    52.  
    53. 	.main-aside {
    54. 		width: 240px !important;
    55. 		height: 100%;
    56. 		background-color: #334157;
    57. 		margin: 0px;
    58. 	}
    59.  
    60. 	.main-header,
    61. 	.main-center {
    62. 		padding: 0px;
    63. 		border-left: 2px solid #333;
    64. 	}
    65. </style>

    LeftNav.vue：

    1. <template>
    2. 	<el-menu default-active="2" class="el-menu-vertical-demo"  background-color="#334157"
    3. 	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
    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.         data(){
    43.           return {
    44.             collapsed:false
    45.           }
    46.         },
    47.       created() {
    48.       //    从总线上取出this.collapsed变量
    49.         this.$root.Bus.$on("collapsed-side",v => {
    50.           this.collapsed=v;
    51.         })
    52.       }
    53.   }
    54. </script>
    55. <style>
    56. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    57. 		width: 240px;
    58. 		min-height: 400px;
    59. 	}
    60.  
    61. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    62. 		border: none;
    63. 		text-align: left;
    64. 	}
    65.  
    66. 	.el-menu-item-group__title {
    67. 		padding: 0px;
    68. 	}
    69.  
    70. 	.el-menu-bg {
    71. 		background-color: #1f2d3d !important;
    72. 	}
    73.  
    74. 	.el-menu {
    75. 		border: none;
    76. 	}
    77.  
    78. 	.logobox {
    79. 		height: 40px;
    80. 		line-height: 40px;
    81. 		color: #9d9d9d;
    82. 		font-size: 20px;
    83. 		text-align: center;
    84. 		padding: 20px 0px;
    85. 	}
    86.  
    87. 	.logoimg {
    88. 		height: 40px;
    89. 	}
    90. </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. 		<el-menu-item index="3" disabled>消息中心</el-menu-item>
    18. 		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    19. 	</el-menu> -->
    20. 	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    21. 		<el-button class="buttonimg">
    22. 			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    23. 		</el-button>
    24. 		<el-submenu index="2" class="submenu">
    25. 			<template slot="title">超级管理员</template>
    26. 			<el-menu-item index="2-1">设置</el-menu-item>
    27. 			<el-menu-item index="2-2">个人中心</el-menu-item>
    28. 			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    29. 		</el-submenu>
    30. 	</el-menu>
    31. </template>
    32.  
    33. <script>
    34. 	export default {
    35.     data(){
    36.       return {
    37.         collapsed:false,
    38.         imgsq:require('@/assets/img/sq.png'),
    39.         imgshow:require('@/assets/img/show.png')
    40.       }
    41.     },
    42.     methods:{
    43.       doToggle(){
    44.         this.collapsed = !this.collapsed;
    45.         //将 this.collapsed 放到总线上
    46.         this.$root.Bus.$emit("collapsed-side",this.collapsed);
    47.       },
    48.       exit(){
    49.         this.$router.push({path:'/Login'})
    50.       }
    51.     }
    52. 	}
    53. </script>
    54.  
    55. <style scoped>
    56. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    57. 		border: none;
    58. 	}
    59.  
    60. 	.submenu {
    61. 		float: right;
    62. 	}
    63.  
    64. 	.buttonimg {
    65. 		height: 60px;
    66. 		background-color: transparent;
    67. 		border: none;
    68. 	}
    69.  
    70. 	.showimg {
    71. 		width: 26px;
    72. 		height: 26px;
    73. 		position: absolute;
    74. 		top: 17px;
    75. 		left: 17px;
    76. 	}
    77.  
    78. 	.showimg:active {
    79. 		border: none;
    80. 	}
    81. </style>

     router/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 Reg from "../views/Reg";
    9.  
    10. Vue.use(Router)
    11.  
    12. export default new Router({
    13.   routes: [
    14.     {
    15.       path: '/',
    16.       name: 'Login',
    17.       component: Login
    18.     },
    19.     {
    20.       path: '/Login',
    21.       name: 'Login',
    22.       component: Login
    23.     },
    24.     {
    25.       path: '/Reg',
    26.       name: 'Reg',
    27.       component: Reg
    28.     },
    29.     {
    30.       path: '/AppMain',
    31.       name: 'AppMain',
    32.       component: AppMain,
    33.       children:[
    34.         {
    35.           path: '/LeftNav',
    36.           name: 'LeftNav',
    37.           component: LeftNav
    38.         },
    39.         {
    40.           path: '/TopNav',
    41.           name: 'TopNav',
    42.           component: TopNav
    43.         }
    44.       ]
    45.     }
    46.   ]
    47. })

    总线：

    1、在main.js中创建一个变量，这个变量就是vue实例

    2、在子组件中通过this.$root.Bus.$emit注册事件进行传参

    3、在需要用到总线中变量时，通过this.$root.Bus.$on获取总线中的变量值

    三、退出

     

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

  • 相关阅读:
    AI创新下的生成式人工智能——Amazon Bedrock
    网络层解析——IP协议、地址管理、路由选择
    【技术分享】Python 和 JavaScript 的区别是什么？
    VUE必知必会
    node模块化的流程说明
    Linux内核面试题（3）
    MyBatisPlus（十六）逻辑删除
    二层广播风暴（产生原因+判断+解决）
    一套极简的MQTT使用接口EasyMqttClient
    Lecture 14 IO System（IO系统）
  • 原文地址：https://blog.csdn.net/m0_67477525/article/details/126813376