vue main.js作用

来源:简书分类: 文章浏览史发布时间:2020-09-06 10:32:55 最后更新:2020-09-06 浏览:1029

转载声明：

本文为摘录自“简书”，版权归原作者所有。

原文链接:

https://www.jianshu.com/p/e108ae9d1c88

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-09-06 10:32:55

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

image.png

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