vue component 文件夹_微服务和VUE(8):前端主页的编写

1.期望目标

如图，我们的前端页面很简单，头部导航栏，左侧导航栏，主体待填的内容。管理后台的常用布局。

2. 前端项目结构

我们编写的前端项目结构如上图，最底部的Home.vue作为主页，导航栏和其他内容作为home的组件。common文件夹存放了头部导航栏和侧边栏。library文件夹暂时只放了一个LinbraryIndex.vue。login文件夹还是一个登陆页面和hello页面。stu_manage文件夹存放了三个文件，班级信息管理，学生信息管理。学生成绩管理。

3.编写Home.vue

看完整理结构，我们先来看一个Home.vue。代码很简单，在部分引入了两个导航栏组件，继而挂载。这部分都是套路。使用组件，路由嵌套。

路由嵌套，会在接下来的开发体会到的。

      // 引入两个导航栏作为组件  import NavMenu from './common/NavMenu'  import SideMenu from './common/SideMenu'    export default {      name: "Home",      // 挂载组件      components:{        NavMenu,        SideMenu      }    }

4.编写头部导航栏NavMenu.vue

在elementUI官网上复制的，稍微改了改。没有什么技巧。

      style="width: 100%;left: -5px;"        mode="horizontal"    background-color="#324157"    text-color="#bfcbd9"    active-text-color="#ffd04b">          VUE+SpringCloud，从入门到放弃        更多功能        export default {    name: 'NavMenu',    data () {      return {      }    }  }  a{    text-decoration: none;  }  span {    pointer-events: none;  }

5.编写侧边导航栏

侧边导航栏看起来挺复杂的，就是一些循环而已。没有什么值得说的，都是套路。

有一个router关键词，它代表着：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

              text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>                                         {{ item.title }}                                               {{ subItem.title }}                               {{ threeItem.title }}                                                     {{ subItem.title }}                                                             {{ item.title }}                    

export default {   data() {     return {       collapse: false,       items: [{         icon: 'el-icon-s-home',         index: 'dashboard',         title: '首页',       },         {           icon: 'el-icon-s-management',           index: '1',           title: '学生管理',           subs: [             {               index: 'stuInfoMgmt',               title: '学生信息管理'             },             {               index: 'stuPerfMgmt',               title: '学生成绩管理'             },             {               index: 'classInfoMgmt',               title: '班级信息管理'             }           ]         },         {           icon: 'el-icon-s-data',           index: '2',           title: '图书馆',           subs: [             {               index: 'serviceCodeRegister',               title: '图书浏览'             },             {               index: 'serviceMenu',               title: '我的收藏'             }           ]         }       ]     }   },   computed: {     onRoutes() {       return this.$route.path.replace('/', '')     }   } } .sidebar {   display: block;   position: absolute;   left: 2px;   top: 70px;   bottom: 0;   /*overflow-y: scroll;*/ } .sidebar::-webkit-scrollbar {   width: 0; } .sidebar-el-menu:not(.el-menu--collapse) {   width: 200px; } .sidebar>ul {   height: 100%; }

6.添加路由

import Home from '@/components/Home'

{  path: '/home',  name: 'Home',  component: Home }

这时我们访问：http://localhost:8080/#/home

7. 编写其他页面

ClassInfoMgmt.vue,StuInfoMgmt.vue,StuPerfMgmt.vue三个页面，因为现在还没填什么内容，故而不写什么东西。

    学生成绩管理  

  export default {       name: "StuPerfMgmt"   }

只写一个div，展示一下内容即可。

8. 修改路由

修改我们刚才写的home路由

{  path: '/home',  name: 'Home',  component: Home,  //home页面不需要被访问  redirect: '/stuInfoMgmt',  children:[    {      path: '/stuInfoMgmt',      component: resolve => require(['@/components/stu_manage/StuInfoMgmt.vue'], resolve),      meta: {        title: 'stuInfoMgmt'      }    },    {      path: '/stuPerfMgmt',      component: resolve => require(['@/components/stu_manage/StuPerfMgmt.vue'], resolve),      meta: {        title: 'stuPerfMgmt'      }    },

加上children里面的内容即可，整个页面的结构就算搭建完成。接下来我们就分别去相应页面中填充相应信息。

9.总结

VUE的前端代码比较散碎，组件化代码的好处与缺点吧。刚开始接触挺晕乎的，后面见多了，其实都一样了。