如何在Vue中创建全局引用或者全局命令

1 通常在vue中，有不少vue组件，这些组件每一个都是一个文件。均可能须要引用到相同模块(或者插件)。咱们不想每一个文件都import 一次模块。

若是是基于vue.js编写的插件咱们能够用 Vue.use(...)

main.js

 

 2 可是若是想添加一个全局命令，同时又让每一个vue的文件都能用到怎么办？

第一步：最好创建一个全局的命令文件例如：directive/directive.js

第二步：利用Vue.directive()创建一个全局命令，并将它暴露出来，例如一个focus 让表单自动聚焦

directive.js

 

第三部步：在main.js（入口JS文件）中将它引入，能够省略文件后缀

main.js

这样任何一个Vue文件只要这样v-focus(命令名)，就能够很方便的用到了

 

3  Vue.directive() 的命令通常都是自动运行的或者说初始化等等触发的，并不能用于异步事件，怎么办？

因而咱们能够用到'mixins'混合命令，你最好创建一个专门的文件夹用于存放混合命令，例如：

mixins.js

好比 saveScrollPosition （不是vue中的saveScrollPosition）能够每次在路由跳转之间保存住浏览位置信息

注意：vue2.0 中 路由跳转之间会自动保存位置信息 可是有Bug（位置信息之间会相互干扰）。

 因此咱们重新写一个saveScrollPosition暴露出去后，在你须要的页面中混入

这样就会很方便。

 

4 若是你须要应用一个插件，同时他并非基于vue.js的插件命令编写的，那你能够将它赋予Vue的原型上

例如：我想全局引用axios，咱们能够这样

main.js

而后this.$http.get(url) 等等

xxx.vue

5 将须要的变量挂在到window对象上

例如：第三方库Lodash.js,moment.js等等

main.js

xxx.vue

注意：这种方式不适合服务端渲染，服务端并无window对象

 

强调一点：以上全部的引入都必须经过入口JS文件去引入，这样才能适用于全局