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

本是古典何须时尚 2022-05-20 01:26 174阅读 0赞

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

比如我写了一个goLoading组件，目录结构如下：  
![这里写图片描述][70]

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

import GoLoading from './goLoading/index';
    
    const goingComponents = {
      GoLoading,
    };

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

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);

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

[70]: /images/20220520/8e6895b7f645422ca778f77e9977e097.png