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

    目录

    一、mock的使用

    mock.js的使用步骤：

    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的使用

    mock.js的使用步骤：

    1、下载依赖  npm install mock -d

     下载到了 package.json 里面：

    2、引入到main.js中使用

    为了只在开发环境使用mock，而打包到生产环境时自动不使用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、添加默认接口数据

    把mock文件夹导入到src中，然后在json下的文件里造数据

    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">Mainel-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. 		
    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">选项1el-menu-item>
    16. 				<el-menu-item index="1-2">选项2el-menu-item>
    17. 			el-menu-item-group>
    18. 			<el-menu-item-group title="分组2">
    19. 				<el-menu-item index="1-3">选项3el-menu-item>
    20. 			el-menu-item-group>
    21. 			<el-submenu index="1-4">
    22. 				<template slot="title">选项4template>
    23. 				<el-menu-item index="1-4-1">选项1el-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. 	
    3. 	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    4. 		<el-button class="buttonimg">
    5. 			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    6. 		el-button>
    7. 		<el-submenu index="2" class="submenu">
    8. 			<template slot="title">超级管理员template>
    9. 			<el-menu-item index="2-1">设置el-menu-item>
    10. 			<el-menu-item index="2-2">个人中心el-menu-item>
    11. 			<el-menu-item @click="exit()" index="2-3">退出el-menu-item>
    12. 		el-submenu>
    13. 	el-menu>
    14. template>
    15.  
    16. <script>
    17. 	export default {
    18.     data(){
    19.       return {
    20.         collapsed:false,
    21.         imgsq:require('@/assets/img/sq.png'),
    22.         imgshow:require('@/assets/img/show.png')
    23.       }
    24.     },
    25.     methods:{
    26.       doToggle(){
    27.         this.collapsed = !this.collapsed;
    28.         //将 this.collapsed 放到总线上
    29.         this.$root.Bus.$emit("collapsed-side",this.collapsed);
    30.       },
    31.       exit(){
    32.         this.$router.push({path:'/Login'})
    33.       }
    34.     }
    35. 	}
    36. script>
    37.  
    38. <style scoped>
    39. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    40. 		border: none;
    41. 	}
    42.  
    43. 	.submenu {
    44. 		float: right;
    45. 	}
    46.  
    47. 	.buttonimg {
    48. 		height: 60px;
    49. 		background-color: transparent;
    50. 		border: none;
    51. 	}
    52.  
    53. 	.showimg {
    54. 		width: 26px;
    55. 		height: 26px;
    56. 		position: absolute;
    57. 		top: 17px;
    58. 		left: 17px;
    59. 	}
    60.  
    61. 	.showimg:active {
    62. 		border: none;
    63. 	}
    64. 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.       }

     

     

    今日分享结束，如有疑问尽可在评论区提出~

  • 相关阅读:
    Spring+Vue工程部署在Linux
    【C++初阶】动态内存管理
    注册电气工程师（供配电）专业考试大纲纯干货分享
    Flex布局和Float布局的实现
    微信小程序异步请求数据promise方法
    基于springboot的高校学科竞赛系统
    【App自动化测试】（十七）遍历测试工具——Android Maxim
    APP自动化测试-5.触屏操作及toast处理
    ARMday2
    Java 时间的加减处理
  • 原文地址：https://blog.csdn.net/weixin_65808248/article/details/126808985