vue-element-admin项目学习笔记（2）main.js 文件分析

vue-element-admin项目学习笔记（1）安装、配置、启动项目
在正式开始写项目之前，我先把项目中主要文件，都分析一遍。

分析过程，在代码注释中。

main.js

// 导入vue
import Vue from 'vue'
//导入cookie操作依赖
import Cookies from 'js-cookie'
//引入重置样式
import 'normalize.css/normalize.css' // a modern alternative to CSS resets
// 引入UI库及样式
import Element from 'element-ui'
import './styles/element-variables.scss'
// 引入自己写的全局样式 自定义样式文件
import '@/styles/index.scss' // global css
// 引入APP组件
import App from './App'
// 引入vuex仓库
import store from './store'
//  引入配置的路由
import router from './router'
// 国际化 
import i18n from './lang' // internationalization
// icon图标库
import './icons' 
// 权限模块，很重要，面试必问，会详解
import './permission'  
// 错误日志模块
import './utils/error-log' 
// 全局过滤器 起了个别名
import * as filters from './filters'  

// process是全局变量
//当我们执行 npm run build时，NODE_ENV就是production
//当我们执行 npm run dev时，NODE_ENV就是development
// 判断当前如果是生产环境，导入mock模块，模拟接口，实现功能
// 以后会注释掉
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// 使用组件库插件，三个参数：1、传入对象，
// 2、默认尺寸（medium 大小：中），也就是右上角切换大中小，设置存入了cookie中
//3、语言（国际化），右上角切换语言
Vue.use(Element, {
  size: Cookies.get('size') || 'medium',  
  i18n: (key, value) => i18n.t(key, value)
})

// 注册全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

//关闭生产环境下 vue的提示
Vue.config.productionTip = false

// 实例化vue对象
new Vue({
  // 挂载根节点
  el: '#app',
  // 挂载路由、仓库、国际化
  router,
  store,
  i18n,
  // 渲染器工作
  render: h => h(App)
})