【vue-element-admin】github高质量项目逐行解读，小白都能看懂（第一篇）

项目介绍

vue-element-admin是一个后台前端解决方案，基于Vue.js和element-ui实现。其使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由等等，那么话不多说，我们直接开始我们的vue学习之旅吧！！！

如何解析这个vue项目

前几天大致看了一下目录结构，我将以我看项目的顺序来解读，即从项目最目录栏最顶部开始看起，抛弃从路由看起，或者是先看项目依赖的方式。车到山前必有路，船到桥头自然直，在看单独的项目文件之后，最后串起来。顺序如下图所示。

前提概要，与第一行代码

在views文件夹下，放的就是页面，也就是组件，我们的梦就从dashboard文件夹开始吧
两个文件夹，一个vue文件，毫无疑问，先看index.vue，因为它是这个页面最大的组件，它包含了其他的小组件，打开index.vue

<template>
  <div class="dashboard-container">
    <component :is="currentRole" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'

export default {
  name: 'Dashboard',
  components: { adminDashboard, editorDashboard },
  data() {
    return {
      currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
  }
}
</script>

首先看到的这个<template>是用来写html标签模板的，且内部有且只有一个根元素。（有兴趣的小伙伴可以尝试加入两个元素哦）

<template>
  <div class="demo">
    ······
  </div>
</template>

<template>标签本质上没有任何实际意义，其作用是模板占位符，可以帮助我们包裹元素，但是在循环过程中，<template>并不会被渲染到页面上，但是当我们需要包裹一或几个个元素的时候，又不想在外层嵌套一个标签，可以将<template>套在外面，需要注意的是<template>并不支持v-show指令。

文件中导入的组件

本着顺着代码往下讲解的我，要悬崖勒马了，因为感觉还是得先看导入的组件。。。。
第一个是vuex中的mapGetters()方法，mapGetters是vuex中的一个辅助函数，他会将store中的getters.js中的getter映射到局部计算属性。第一次见面大家一定对store和getters比较陌生，没事，store是文件夹，它里面放的是一些vuex为vue开发的状态管理器，它包含着你的项目中大量的状态。

getters 是 Vuex 中的一部分，它们允许你从 store 中提取数据。这些 getter 函数（你看值像不像箭头函数）可以认为是在 store 上的计算属性。每个getter函数都接收 state 作为参数并返回 state 中的某个值。这些函数可以在你的 Vue 组件中使用，以便从 Vuex store 中读取数据。

getters对象中每一个键值对都是getter，这下看这些代码是不是就清楚了，就是将getter放到computed中，是哪个getter呢，下面那个roles。再看上述代码，computed就是计算属性，它会缓存一个值，当这个值的依赖值被改变时，computed会重新计算出这个值。
综上所述，其意思是在计算属性computed中添加一个名为roles的属性，这个属性的值是store中的getter的roles的值。这样，你就可以在组件中通过this.roles来访问这个值了。这是一种将Vuex中的状态引入到Vue组件中的常见方式。至于getters.js文件中的state是什么意思，小偶像，得靠你探知哦。

就只当个标题

<component :is="currentRole" />，<component>是vue内置组件，主要作用为动态渲染组件，:is指令可以根据绑定的is的值决定哪个组件被渲染，所以，就是currentRole被渲染啦，currentRole是谁呢？
就是dashboard目录下admin文件夹也就是adminDashboard组件。当前渲染的就是这个组件，可视化出来长这样
根据一定情况下，会切换成editorDashboard组件。
created()是vue中的生命周期，也是钩子函数，这时候模板还没有渲染成html，常用于初始化某些属性值，然后再渲染成视图。this指的是vue实例，this.roles就是computed干得好事，我们的组件就可以使用this.roles访问状态啦，然后根据其是否含有admin来渲染不同的视图。

今天就到此为止咯，让我们相约在未来某一天再见吧！