目录

一    
    
    
、程序入口

（一）入口页面 index.html

（二） 入口js脚本：src/main.js

（三）顶层组件：src/App.vue

（四）路由：src/router/index.js 

一  


     


     


  、程序入口

（一）入口页面 index.html

查看源代码

这正是srb-admin/public/index.html

 我们进入积分等级列表 
    
    
  ，查看源代码会发现仍然是index.html中的代码

 那么它是怎么实现页面的不同加载的呢？答案：通过脚本

（二） 入口js脚本：src/main.js

上面的脚本中的路径/static/js/app.js我们在文件目录中找不到
     


     


     
，因为它是根据我们的vue文件


 




 




 
、html文件   

   

   

、js文件等动态生成的 




 




 




，真正的文件是src/main.js

查看代码我们发现其导入了很多模块 

   

   

 ，就像我们后端创建springboot项目
     

     

     ，使用某些功能需要导入对于的starter一样  




  




  




，即导入依赖

 这里挂载element-ui可以像我们前面做例子那样直接使用<script src="https://unpkg.com/element-ui/lib/index.js"></script>导入 


  


  


，但是这样只能使用简单的template定义

而无法使用vue文件式的template定义 

创建Vue对象
     
     
     ，指定渲染的是入口index.html中id为app的div

（三）顶层组件：src/App.vue

 既然创建的Vue对象将我们的app组件进行渲染   




   




   



，我们就去看一下App.vue

（四）路由：src/router/index.js 

有一个router-view路由出口 



 



 



，是进行模板template展示的               ，在router/index.js中定义了大量的路由
    




    




    


，当我们访问对应path就会跳到对应的组件同时显示到id为app的div中

import Vue from vue import Router from vue-router Vue.use(Router) /* Layout */ import Layout from @/layout /** * Note: sub-menu only appear when route children.length >= 1 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html * * hidden: true if set true, item will not show in the sidebar(default is false) * alwaysShow: true if set true, will always show the root menu * if not set alwaysShow, when item has more than one children route, * it will becomes nested mode, otherwise not show the root menu * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb * name:router-name the name is used by <keep-alive> (must set!!!) * meta : { roles: [admin,editor] control the page roles (you can set multiple roles) title: title the name show in sidebar and breadcrumb (recommend set) icon: svg-name/el-icon-x the icon show in the sidebar breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) activeMenu: /example/list if set path, the sidebar will highlight the path you set } */ /** * constantRoutes * a base page that does not have permission requirements * all roles can be accessed */ export const constantRoutes = [ // 路由列表 { // path: /login, component: () => import(@/views/login/index), hidden: true, }, { path: /404, component: () => import(@/views/404), hidden: true, }, { path: /, component: Layout, redirect: /dashboard, children: [ { path: dashboard, name: Dashboard, component: () => import(@/views/dashboard/index), meta: { title: 首页, icon: dashboard }, }, ], }, { path: /core/integral-grade, component: Layout, redirect: /core/integral-grade/list, name: coreIntegralGrade, meta: { title: 积分等级管理, icon: el-icon-s-marketing }, //false(默认):当父节点下只有一个子节点时














，不显示父节点              ，直接显示子节点 //true:任何时候都显示父节点和子节点 alwaysShow: true, children: [ { path: list, name: coreIntegralGradeList, // 每个路由的name不能相同 component: () => import(@/views/core/integral-grade/list), // 指向的template模板 meta: { title: 积分等级列表 }, // 定义导航的标题 }, { path: create, name: coreIntegralGradeCreate, component: () => import(@/views/core/integral-grade/form), meta: { title: 新增积分等级 }, }, { path: edit/:id, // :id表示一个占位符
     



     



     

，表示这一部分url会是任何一个id














，是动态的 name: coreIntegralGradeEdit, component: () => import(@/views/core/integral-grade/form), meta: { title: 编辑积分等级 }, hidden: true, }, ], }, { path: /core, component: Layout, redirect: /core/dict/list, name: coreDict, meta: { title: 系统设置, icon: el-icon-setting }, alwaysShow: true, children: [ { path: dict/list, name: 数据字典, component: () => import(@/views/core/dict/list), meta: { title: 数据字典 }, }, ], }, { path: /example, component: Layout, redirect: /example/table, name: Example, meta: { title: 例子, icon: el-icon-s-help }, children: [ { path: table, name: Table, component: () => import(@/views/table/index), meta: { title: 表格, icon: table }, }, { path: tree, name: Tree, component: () => import(@/views/tree/index), meta: { title: 树, icon: tree }, }, ], }, { path: /form, component: Layout, children: [ { path: index, name: Form, component: () => import(@/views/form/index), meta: { title: 表单, icon: form }, }, ], }, ] /** * asyncRoutes * the routes that need to be dynamically loaded based on user roles */ export const asyncRoutes = [ { path: /nested, component: Layout, redirect: /nested/menu1, name: Nested, meta: { title: Nested, icon: nested, }, children: [ { path: menu1, component: () => import(@/views/nested/menu1/index), // Parent router-view name: Menu1, meta: { title: Menu1 }, children: [ { path: menu1-1, component: () => import(@/views/nested/menu1/menu1-1), name: Menu1-1, meta: { title: Menu1-1 }, }, { path: menu1-2, component: () => import(@/views/nested/menu1/menu1-2), name: Menu1-2, meta: { title: Menu1-2 }, children: [ { path: menu1-2-1, component: () => import(@/views/nested/menu1/menu1-2/menu1-2-1), name: Menu1-2-1, meta: { title: Menu1-2-1 }, }, { path: menu1-2-2, component: () => import(@/views/nested/menu1/menu1-2/menu1-2-2), name: Menu1-2-2, meta: { title: Menu1-2-2 }, }, ], }, { path: menu1-3, component: () => import(@/views/nested/menu1/menu1-3), name: Menu1-3, meta: { title: Menu1-3 }, }, ], }, { path: menu2, component: () => import(@/views/nested/menu2/index), meta: { title: menu2 }, }, ], }, { path: external-link, component: Layout, children: [ { path: https://panjiachen.github.io/vue-element-admin-site/#/, meta: { title: External Link, icon: link }, }, ], }, // 404 page must be placed at the end !!! { path: *, redirect: /404, hidden: true }, ] const createRouter = () => new Router({ // mode: history, // require service support scrollBehavior: () => ({ y: 0 }), routes: constantRoutes, }) const router = createRouter() // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router } export default router

 以下面为例, 当我们访问http://localhost:9528/login 
    
    
  ，会找到/views/login/index.vue页面进行展示

// 路由列表 { // path: /login, component: () => import(@/views/login/index), hidden: true, },

梳理到这里
     


     


     
，我们可以知道最外层组件是App 




 




 




，在App中嵌套了其他组件 

   

   

 ，当我们访问不同页面
     

     

     ，App中的组件会变换  




  




  




，比如我们在登录页面 


  


  


，App下是login组件

那么这些 侧边栏   

     

     

 、导航栏和主页面是如何组成的呢？

 查看src/layout/index.vue我们可以发现是在这里组装起来的

<template> <div :class="classObj" class="app-wrapper"> <div v-if="device === mobile && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <!--侧边栏--> <sidebar class="sidebar-container" /> <!-- <Sidebar/> 同理 --> <div class="main-container"> <div :class="{ fixed-header: fixedHeader }"> <!--导航栏--> <navbar /> <!-- <Navbar /> 实际上是这样写
     
     
     ，直接使用组件   




   




   



，但是小写也支持 



 



 



，所以写成上一行的写法 --> </div> <!--主内容区--> <app-main /> <!-- <AppMain/> 同理 --> </div> </div> </template> <script> // 导入子组件 import { Navbar, Sidebar, AppMain } from ./components import ResizeMixin from ./mixin/ResizeHandler export default { name: Layout, components: { //注册子组件 Navbar, Sidebar, AppMain, }, mixins: [ResizeMixin], computed: { sidebar() { return this.$store.state.app.sidebar }, device() { return this.$store.state.app.device }, fixedHeader() { return this.$store.state.settings.fixedHeader }, classObj() { return { hideSidebar: !this.sidebar.opened, openSidebar: this.sidebar.opened, withoutAnimation: this.sidebar.withoutAnimation, mobile: this.device === mobile, } }, }, methods: { handleClickOutside() { this.$store.dispatch(app/closeSideBar, { withoutAnimation: false }) }, }, } </script> <style lang="scss" scoped> @import ~@/styles/mixin.scss; @import ~@/styles/variables.scss; .app-wrapper { @include clearfix; position: relative; height: 100%; width: 100%; &.mobile.openSidebar { position: fixed; top: 0; } } .drawer-bg { background: #000; opacity: 0.3; width: 100%; top: 0; height: 100%; position: absolute; z-index: 999; } .fixed-header { position: fixed; top: 0; right: 0; z-index: 9; width: calc(100% - #{$sideBarWidth}); transition: width 0.28s; } .hideSidebar .fixed-header { width: calc(100% - 54px); } .mobile .fixed-header { width: 100%; } </style>

总结：App组件下面有layout组件



  




  




  、layout组件下有Sidebar  


  


  


、Navbar    
     
     
、AppMain组件

 Appmain是怎么实现内容的变换的              ，又是一个子路由 

 总结：入口index.html中有一个id为app的div
    




    




    


，App.vue里导入需要的模块














，创建一个根组件App              ，App中有一个路由出口
     



     



     

，根据router/index.html中定义的路由进行跳转 
    
    
  。在主页面也就是layout/index.html中将侧边栏Sidebar














，导航栏Navbar和主内容区AppMain结合 
    
    
  ，这三个也是组件
     


     


     
，AppMain中有子路由出口 




 




 




，对应router中index.html中的children
     


     


     
。