20181203——Vue.use()再涉及到vue中定义全局函数

vue.use（plugin, arguments） 语法
前提是：如果vue安装的组件类型必须为Function或者是Object
如果是个对象，必须提供install方法

如果是一个函数，会被直接当作install函数执行

const Plugin1 = {
  install(a, b, c) {
    console.log('Plugin1 第一个参数:', a);
    console.log('Plugin1 第二个参数:', b);
    console.log('Plugin1 第三个参数:', c);
  },
};
 
function Plugin2(a, b, c) {
  console.log('Plugin2 第一个参数:', a);
  console.log('Plugin2 第二个参数:', b);
  console.log('Plugin2 第三个参数:', c);
}
 
export { Plugin1, Plugin2 };

import Vue from 'vue';
 
import { Plugin1, Plugin2 } from './plugins';
 
Vue.use(Plugin1, '参数1', '参数2');
Vue.use(Plugin2, '参数A', '参数B');

import Vue from 'vue';
 
import '@/classes/vue-use';
import App from './App';
import router from './router';
 
Vue.config.productionTip = false;
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

分析源码

---

---

Vue使用use自定义组件的方法
我们在main.js中用到了Vue.use(VueRouter)等代码，这个VueRouter其实就是别人已经封装好的组件，我们使用use方法调用即可，那么我们也可以做一些自己的组件，代码如下：

接着Webpack集成Vue2.0打包部署项目实例这个例子，我在项目目录下新建myComponents文件夹，然后再新建loading文件夹，在loading文件夹下分别新建index.js和loading.vue文件，如图所示：

loading.vue中的代码如下：

以上代码随便定义了一个普通的vue组件，重点是index.js，代码如如下：

最后在main.js中，就可以导入这个组件了：

---

---

//在mian.js中写入函数 Vue.prototype.changeData = function (){ alert('执行成功'); } //在所有组件里可调用函数 this.changeData();

// 写好自己需要的base.js文件
exports.install = function (Vue, options) {
Vue.prototype.changeData = function (){
alert(‘执行成功’);
};
};
// main.js 引入并使用
import base from ‘./base’
Vue.use(base);
//在所有组件里可调用函数
this.changeData();