Vue2+VueRouter3+Webpack3.6+Axios项目实战----定义全局组件库（七）

在开发过程中使用了ivew控件库，但ivew控件毕竟有限，难免有些控件需要自己开发，但自己定义控件库也不可能一个一个单独去引用，也需要定义成全局组件库，业务界面不需要关心引用直接使用就是。

比如我写了一个goLoading组件，目录结构如下：

第一步:将组件在index.js中进行注册：

import GoLoading from './goLoading/index';

const goingComponents = {
  GoLoading,
};

第二步：在index.js文件中添加install方法，因为只有添加了install方法，才可以用vue.use(组件库)来注册

const install = function(Vue, opts = {}) { 
  if (install.installed) return;
  //注册组件
  Object.keys(goingComponents).forEach(key => {
    Vue.component(key, goingComponents[key]);
  });
};

index.js文件内容如下：

import GoLoading from './goLoading/index';

const goingComponents = {
  GoLoading,
};


const install = function(Vue, opts = {}) { 
  if (install.installed) return;
  //注册组件
  Object.keys(goingComponents).forEach(key => {
    Vue.component(key, goingComponents[key]);
  });
};

const goingUI = {
  version: process.env.VERSION, // eslint-disable-line no-undef
  install,
  ...goingComponents
};
export default goingUI;

第三步：在入口main.js里注册组件库

import goingUI from './components/goingComponents/index'
// 这时需要 use(goingUI)，如果不写 Vue.use()的话，浏览器会报错，大家可以试一下
Vue.use(goingUI);

第四步：业务界面直接使用，而不需要单独对组件进行注册了：

<goLoading v-model="isLoading"></goLoading>