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