vue-element-admin 项目代码学习- 01

前言

vue-element-admin 是vue项目中一个比较典型的代表项目，是一个后台前端解决方案，它基于 vue 和 element-ui实现。集成了多个功能实现和优秀的组件封装，目前在github上以后70K+的star，那么学习该项目代码，参考内部的函数，组件，可以提升我们日常中的开发效率和打码思路。

main.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

入口文件引入了 Vue， Cookies插件， 引入全局样式、element-ui, 入口vue文件，vuex, 路由，icon图片

icons
icons 是项目定义的svgIcon组件，并使用svg-sprite-loader,对svg目录下的所有svg文件自动制作为雪碧图 。

permission
权限控制，再router文件中会讲到。

error-log

错误日志，通过 Vue.config.errorHandler 获取错误信息，并存储在vuex中。默认是搜集生产环境报错，可以配置其他环境。

filters

全局过滤方法，通过es6的 import * as filters from './filters' 把文件里所有导出的函数，合并成一个对象，然后遍历定义过滤方法。

Vue.config.productionTip = false

阻止启动生产消息，常用作指令

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

核心代码，创建vue实例，挂载在指定id为app的dom元素上，并在实例上挂载路由和vuex，然后使用render函数把入口vue文件生成为真实DOM。

个人学习，可能理解有不足的地方，谢谢~