目錄

一、程序入口

（一）入口頁面 index.html

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

（三）頂層組件：src/App.vue

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

一、程序入口

（一）入口頁面 index.html

查看源代碼

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

?

?我們進入積分等級列表，查看源代碼會發(fā)現(xiàn)仍然是index.html中的代碼

?那么它是怎么實現(xiàn)頁面的不同加載的呢？答案：通過腳本

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

上面的腳本中的路徑/static/js/app.js我們在文件目錄中找不到，因為它是根據(jù)我們的vue文件、html文件、js文件等動態(tài)生成的，真正的文件是src/main.js

查看代碼我們發(fā)現(xiàn)其導入了很多模塊，就像我們后端創(chuàng)建springboot項目，使用某些功能需要導入對于的starter一樣，即導入依賴

?這里掛載element-ui可以像我們前面做例子那樣直接使用<script src="https://unpkg.com/element-ui/lib/index.js"></script>導入，但是這樣只能使用簡單的template定義

而無法使用vue文件式的template定義?

創(chuàng)建Vue對象，指定渲染的是入口index.html中id為app的div

（三）頂層組件：src/App.vue

?既然創(chuàng)建的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(默認):當父節(jié)點下只有一個子節(jié)點時，不顯示父節(jié)點，直接顯示子節(jié)點
    //true:任何時候都顯示父節(jié)點和子節(jié)點
    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，是動態(tài)的
        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: '系統(tǒng)設置', icon: 'el-icon-setting' },
    alwaysShow: true,
    children: [
      {
        path: 'dict/list',
        name: '數(shù)據(jù)字典',
        component: () => import('@/views/core/dict/list'),
        meta: { title: '數(shù)據(jù)字典' },
      },
    ],
  },

  {
    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組件

那么這些 側(cè)邊欄、導航欄和主頁面是如何組成的呢？

?查看src/layout/index.vue我們可以發(fā)現(xiàn)是在這里組裝起來的

<template>
  <div :class="classObj" class="app-wrapper">
    <div
      v-if="device === 'mobile' && sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside"
    />
    <!--側(cè)邊欄-->
    <sidebar class="sidebar-container" />
    <!-- <Sidebar/> 同理 -->
    <div class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <!--導航欄-->
        <navbar />
        <!-- <Navbar />  實際上是這樣寫，直接使用組件，但是小寫也支持，所以寫成上一行的寫法 -->
      </div>
      <!--主內(nèi)容區(qū)-->
      <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>

總結(jié)：App組件下面有l(wèi)ayout組件、layout組件下有Sidebar、Navbar、AppMain組件

?

?Appmain是怎么實現(xiàn)內(nèi)容的變換的，又是一個子路由?

?總結(jié)：入口index.html中有一個id為app的div，App.vue里導入需要的模塊，創(chuàng)建一個根組件App，App中有一個路由出口，根據(jù)router/index.html中定義的路由進行跳轉(zhuǎn)。在主頁面也就是layout/index.html中將側(cè)邊欄Sidebar，導航欄Navbar和主內(nèi)容區(qū)AppMain結(jié)合，這三個也是組件，AppMain中有子路由出口，對應router中index.html中的children。文章來源地址http://www.zghlxwxcb.cn/news/detail-410754.html

到了這里，關(guān)于尚融寶13-后臺管理系統(tǒng)前端架構(gòu)梳理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！