vue main.js作用

来源:简书 分类: 文章浏览史 发布时间:2020-09-06 10:32:55 最后更新:2020-09-06 浏览:152
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
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/>'
})

php技术微信