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

最新推荐文章于 2024-05-13 16:54:22 发布

Dask Jhonson

最新推荐文章于 2024-05-13 16:54:22 发布

阅读量4.3k

点赞数 12

分类专栏： Vue 文章标签： vue web

本文链接：https://blog.csdn.net/qq_41115702/article/details/106663278

版权

本文深入解析vue-element-admin项目组件布局和状态管理。基础页面始于publicindex.html，路由配置在src outerindex.js，静态路由如srcviewsdashboardadminindex.vue，动态路由依赖srcpermission.js和srcstoremodulespermission.js。状态管理主要涉及srcstore，包括模块化的app.js和全局getter.js。

摘要由CSDN通过智能技术生成

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)
})

路由配置信息

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/* Router Modules */
import componentsRouter from './modules/components'
import chartsRouter from './modules/charts'
import tableRouter from './modules/table'
import nestedRouter from './modules/nested'

export const constantRoutes = [
  {
   
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
   
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
   
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
   
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },
  {
   
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  {
   
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true
  },
  {
   
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
   
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: {
    title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
  },
  ...
]

/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 */
export const asyncRoutes = [
  {
   
    path: '/permission',
    component: Layout,
    redirect:

最低0.47元/天解锁文章

Dask Jhonson

关注

12
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
vue-element-admin源码解读——项目组件布局及状态管理

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

扫一扫