目录

一、程序入口

（一）入口页面 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可以像我们前面做例子那样直接使用导入，但是这样只能使用简单的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  (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-357941465export 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我们可以发现是在这里组装起来的

                  <!--  同理 -->                                  <!--   实际上是这样写，直接使用组件，但是小写也支持，所以写成上一行的写法 -->                              // 导入子组件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 })    },  },}@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%;}

总结：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。