vue-element-admin源码解读——项目组件布局及状态管理

vue-element-admin作为一款优秀的前端解决方案，整个框架的结构非常清晰，同时利用Vuex和Vue Router来实现SPA(单页面应用)开发模式，只需要简单的编写组件和配置文件即可完成项目的初步搭建，这对某些需要简单的前端界面的团队无疑是个福利。不过对于需要高度自定义的公司可能还需要更加深入的了解一下，所以这篇文章将带你一步步的摸索整个项目的组件是如何加载的。

基础页面

要摸索当然首先就要找到入口，对于界面而言当然就是index.html的作为入口了。

public\index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这个界面很简单就是定义了一个#app的节点，而是谁在给该节点渲染子节点呢。

src\router\index.js

import Vue from 'vue'

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css' // a modern alternative to CSS resets

import Element from 'element-ui'
import './styles/element-variables.scss'
import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import './icons' // icon
import './permission' // permission control
import './utils/error-log' // error log

import * as filters from './filters' // global filters

//如果是开发模式，则启动本地mock服务器
if (process.env.NODE_ENV === 'production') {
   
  const {
    mockXHR } = require('../mock')
  mockXHR()
}

//使用element-ui插件
Vue.use(Element, {
   
  size: Cookies.get('size') || 'medium', // set element-ui default size
  locale: enLang // 如果使用中文，无需设置，请删除
})

//指定组件过滤器
Object.keys(filters).forEach(key => {
   
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

//为index.html绑定基础组件App.vue，同时绑定路由和状态管理插件
new Vue({
   
  el: '#app',
  router,
  store,
  render: h => h(App)
})

// App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
   
  name: 'App'
}
</script>

到这里我们遇到了第一个路由组件<router-view />,接下来我们来看看路由配置信息加载了什么路由组件到这个位置。

src\main.js

import router from './router'

new Vue({
   
  el: '#app',
  router,
  store,
  render: h => h(App)
})

路由配置信息