关于Vue全局方法配置的总结

通过Vue-Cli搭建的Vue项目工程中，我们通常都会或多或少地使用Vue官方支持插件（如Router、Vuex、VueI18n等）、第三方插件、自定义工具函数等等，以方便我们的开发工作、优化代码结构、减少代码冗余。本文就目前我所接触到的业务需求，对Vue工程中的全局方法、属性配置方式进行总结。

一、Vue.use()

Vue官方文档中对Vue.use()定义如下：

即插件需要支持install方法方能使用Vue.use()方式在Vue工程中进行全局配置，常用的如Vue-router，Vuex，Element UI等均支持使用Vue.use()方法在main.js中进行全局配置。

二、Vue.prototype

js中，可以通过对象构造函数原型挂载函数方法或变量属性，如Object.prototype.count=function(){...}。

同理，Vue.prototype挂载方式支持在实例化的Vue中使用原型挂载方法或变量属性，以axios为例，引入axios并定义Vue.prototype.$axios=axios后，即可在组件中使用this.$axios.post/get/delete/put等axios封装函数方法。即插件中未定义install方法的情况下可以使用Vue原型挂载方式在main.js中进行全局配置。

注：同样的，如无需在全局引入，可新建js文件进行实例化封装配置，通过export导出实例，使用时import即可，如axios的相关interceptor、post、get等封装使用。

三、Vue utils

严格来说，Utils只是一种通用的编程思想，当然在Vue工程中同样适用。

对于常用的或工程中的特殊需求，如Date的格式化转换，在全局中需要经常使用，则为避免代码的重复粘贴，可使用工具函数（util）方式，在工程中创建utils目录及相应的util.js文件（如date.js），便于使用。

如需全局引入，则在main.js中import function from 'src/utils/xxx.js'即可。

注：记住main.js即Vue项目中的主入口，项目中所有的页面都会加载main.js。

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