关于vue中main.js一些自己使用的一些小东西

vue中main.js个人理解就是我们在项目中使用到的一些插件的集合

一般比较常使用的有 vue.use(实现原理)

那vue.use     会自动阻止多次注册相同插件，届时只会注册一次该插件  Vue 是可访问的全局变量时会自动调用 Vue.use()

vue.prototype  自我理解延伸原形

下边就贴一下自己在实际项目中的main.js 的配置

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import '../static/css/common.css'
import './utils/global'
import rem from "../static/js/rem.js";


使用element-ui  和 rem 布局
//element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.use(rem)
import Vuetree from 'vue-simple-tree'

Vue.use(Vuetree);
import 'iview/dist/styles/iview.css';

这是自己写一个存储的方法 可以引进来直接使用
//存储
import tool from "./utils/tool.js";
Vue.prototype.$tool = tool;

工具类同上
//工具类
import uitls from './utils/utils'
Vue.prototype.$utils = uitls;
Vue.prototype.$tool = tool;

axios的使用 以及 设置请求超时的时间  还有全局方法添加请求头
//axios
import axios from "axios";
import vueAxios from "vue-axios";
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.axios = axios;
Vue.prototype.axios = axios.create({
  timeout: 600000
});
//设置请求头
Vue.prototype.axios.interceptors.request.use((config) => {
  let userInfo = uitls.getCookie('username');
  if (userInfo) {
    config.headers.Authorization = 'bearer ' + JSON.parse(uitls.getCookie('username')).value.access_token;
　　注意：我所使用的请求头可能不是你所需要的，所以需要看自身的情况来写这里的逻辑   比如userInfo 可以自己定义任何东西
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

这一块是抓取错误的返回值，因为后台可能会有一些不是报错的报错，比如 412 浏览器认为是错误，但其实可能是没有权限之类的东西，但是在代码中console也获取不到这个错误信息 所以 可以使用下面的方法
import { Message } from 'element-ui';
Vue.prototype.$message = Message;
Vue.prototype.axios.interceptors.response.use(response => {
  return response;
}, error => {
  if(error && error.response.status){
    switch (error.response.status) {
      case 400:
        error.messages = "错误请求";
        Message.error('错误信息：400');
　　　　　可能会有人问为什么提示错误信息要这么写，注意：又有一个知识点，在main.js 无法直接使用 this.$message  所以Vue.prototype.$message = Message;

        break
      case 412:
        Message.error('错误信息：412');
        break
      case 500:
        Message.error('错误信息：500');
        break
      case 504:
        Message.error('错误信息：504');
        break
    }

    return error.response;
  }
})
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
vuex的引入，应该都会的
//vuex
import store from "./store/index";
import 'swiper/dist/css/swiper.css'
Vue.prototype.$vm = new Vue();
Vue.config.productionTip = false;
//滚动条
import HappyScroll from 'vue-happy-scroll'
// 引入css
import 'vue-happy-scroll/docs/happy-scroll.css'
Vue.use(HappyScroll)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App,HappyScroll },
  template: '<App/>'
})

小白一枚，如有幸帮到你，那真是极好，如有错误，还请多多指正，感激不尽。