1.VueRouter 配置

创立 router 的 js 文件

const frameIn = [  {    path: '/head1',    redirect: { name: 'head1-1' },    component: layoutHeaderAside,    children: [      // 首页      {        path: 'page1-1',        name: 'head1-1',        meta: {          auth: true,          title: '第一页'        },        component: _import('demo/page1')      }    ]  },// 从新组织后导出export default [...frameIn, ...frameOut, ...errorPage]

实例化 VueRouter 对象

import Vue from 'vue'import VueRouter from 'vue-router'// 路由数据import routes from './routes'// 导出路由 在 main.js 里应用const router = new VueRouter({  routes})

在 main.js 中注册 router

import router from './router'new Vue({  router,  store,  i18n,  render: (h) => h(App),

2.侧边栏配置

menu.js 中配置菜单的 json 数据

export const menuAside = supplementPath([  { path: '/index', title: '首页', icon: 'home' },  {    title: '/head1',    icon: 'folder-o',    children: [      { path: '/page1', title: '页面 1-1' },      { path: '/page2', title: '页面 1-2' },      { path: '/page3', title: '页面 1-3' }    ]  },

监听路由变动动静生成侧边栏

watch: {  '$route.matched': {    handler(val) {      const menuAsideTem = menuAside.find((item) => {        return item.title === val[0].path      })      let aide = []      if (menuAsideTem && menuAsideTem.children) {        aide = menuAsideTem.children      }      this.$store.commit('d2admin/menu/asideSet', aide)    }  }}

成果如下

菜单顶栏也是雷同的原理

3.vuex 对立状态治理

state => 根本数据

// 设置文件import setting from '@/setting.js'export default {  namespaced: true,  state: {    // 顶栏菜单    header: [],    // 侧栏菜单    aside: [],

官网举荐用计算属性拜访属性， 用mapStatus 辅助函数进一步简化写法，因为采纳了 module，所以会带上门路 'd2admin/menu',同时须要对 namespace 的反对

import { mapState } from 'vuex' computed: {  ...mapState('d2admin/menu', [    'aside',    'asideCollapse',    'asideTransition'  ])},// 等效于：computed: {  aside() {    return this.$store.state('d2admin/menu', aside)}, // 'd2admin/menu' 是因为应用了 modules，须要对 namespace 的反对export default {  namespaced: true,  modules} // 在其它中央应用 state 中的数据this.aside.map(menu => createMenu.call(this, h, menu))

mutations => 提交同步批改

mutations: {  asideSet (state, menu) {    // store 赋值    state.aside = menu  }}// 在别处提交批改this.$store.commit('d2admin/menu/asideSet', menuAsideTem.children)

modules => 对立治理

const moduleA = {  state: { ... },  mutations: { ... },  actions: { ... },  getters: { ... }} const moduleB = {  state: { ... },  mutations: { ... },  actions: { ... }} const store = new Vuex.Store({  modules: {    a: moduleA,    b: moduleB  }})

新建并导出 vuex 对象，不便在全局注册

import Vue from 'vue'import Vuex from 'vuex'// 导入 vuex 的 json 文件import d2admin from './modules/d2admin'// 注册 vuexVue.use(Vuex)// 新建 vuex 对象 引入 d2adminexport default new Vuex.Store({  modules: {    d2admin  }})

4.scss 语法的应用

$ 符号用于申明可被援用的变量

$red: red;$g: green;body {  p {    color: $red;    &:hover {      color: $g;    }  }}

% 用于申明可被继承的变量

// 全局设置一个程度垂直居中的款式%flex-center-row {  display: flex;  justify-content: center;  align-items: center;  flex-direction: row;}// 在须要的中央继承它.contain {  width: 100%;  height: 100%;  padding: 15px;  box-sizing: border-box;  @extend %flex-center-row;}