Vue main.js作用

main.js是项目的入口文件， 项目中所有的页面都会加载main.js,所以main.js,主要有三个作用：
1.实例化Vue。
2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件: axios和vue-resource、图片懒加载插件： vue-lazyload
3.存储全局变量。例如（用于的基本信息）

 

main.j代码

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import axios from 'axios'
import vueLazyLoad from 'vue-lazyload'
import infiniteScroll from  'vue-infinite-scroll'

// 启用router
Vue.use(router)
// 启用vueLazyLoad
Vue.use(vueLazyLoad, {
  loading: 'static/loading-svg/loading-bars.svg',
  try: 4
})
// 启用Vuex
Vue.use(Vuex);
// 启用infiniteScroll
Vue.use(infiniteScroll);
Vue.config.productionTip = false
// 启用网络请求插件
Vue.prototype.$axios = axios;
 
// 用户基本信息
const store = new Vuex.Store({
  state: {
    nickName:'',
  },
  mutations: {
    // 更新用户信息
    updateUserInfo(state, nickName) {
      state.nickName = nickName;
    }
  }
});

// 公共css
import './assets/css/common.css'
import './assets/css/public.css'

/* eslint-disable no-new */
new Vue({// 页面入口
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})