vue开发全局插件

由于vuecli的组件里有很多引入，比如在一个文件里引入另一个组件

import xx from '../components/xx.js';

如果有一个组件多次被引用，我们可以把它提升到全局去，这样就不需要每次都用 import 来引用了。具体实现如下：

首先我们有一个要被多次引用的组件叫 example-component ，新建一个 main.js 文件用来把 example-component 这个组件暴露出去 内容如下：

import ExampleComponent from './example-component';

ExampleComponent.install = function(Vue) {
  Vue.component(ExampleComponent.name, ExampleComponent);
};

export default ExampleComponent;

在vue官方文档里有这样一段话：组件名.install，就是一个方法，用来开发插件。

Vue.component 就是一个组件的方法，用于注册或获取全局组件。以下是官方文档截图，第一个参数就是组件名，第二个参数是Vue.extend({ /* ... */ }) （Vue.extend：使用基础 Vue 构造器，创建一个“子类”）

 在 example-component 组件里就是正常的组件代码，但是这里要注意一点：需要有 name 属性，因为在之前定义 main.js 时里面用到了 ExampleComponent .name 。

<template>
  <div></div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  components: {},
  props: {},
  ...
}
</script>

<style scoped>
</style>

之后 在最外层的 index.js 里引用 抛出；

import ExampleComponent from "./components/main";
export default ExampleComponent;

最后一步在new vue({}) 文件里引用 Vue.use();

import App from './app';
import router from './router';
import ExampleComponent from '../../index';

Vue.use(ExampleComponent);

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});