提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

vue作为当前比较热门的前端框架之一，因此常见的基于vue开发的UI框架有很多，比如ElementUI、Ant Design Vue等。那么我们怎么去开发一个组件库并且能够打包复用呢？见正文。

一、创建项目

使用vue-cli创建一个新项目，运行终端输入以下命令回车执行。

vue create my-ui

通过上下键切换选项，选择 Manually select features，回车

通过上下键切换选项，空格控制是否选择，这里我们只选择Router和 CSS Pre-processors即可，选好后回车

后面的操作随意即可。

二、原理分析

在vue中，想要全局使用组件，就需要将组件进行全局注册。那么同理，自己开发的组件想要能够在别的项目中复用，就需要将所有组件复制到另一个项目中，并且进行注册。那么最简单的方式就是直接把components文件夹的内容复制过去就行。但复制过去并没有全局注册，还需要一个一个引用。因此我们先来解决vue组件的全局注册问题。

通过Vue.component函数进行全局注册组件，例如在main.js文件中写入以下代码：

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
Vue.component('HelloWorld',HelloWorld)

那么现在就全局注册了一个HelloWorld组件，在其他组件中无需再次引入即可使用。

全局注册的问题解决了，但是现在还有一个问题，假如你有很多组件，那么每次搬运都需要进行全局注册，也就意味着上方代码要编写n次，这就很麻烦。那么接下来我们需要创建一个入口文件，通过入口文件集体注册组件的方式来解决这一问题。

三、创建入口文件集体注册组件

我们先在src/components目录下创建一个Test.vue文件，内容随意，用于多组件注册测试。
接下来我们在src/components目录下创建一个index.js文件，加入以下代码：

import HelloWorld from "@/components/HelloWorld";
import Test from "@/components/Test";
let components = { 
   
  HelloWorld,
  Test
};
let install = (Vue)=>{ 
   
    Vue.component('HelloWorld',HelloWorld)
    Vue.component('Test',Test)
}
export default { 
   
  install,
  components,
}

这里我们实现了两个组件的全局注册，如果还有多个组件时，我们统一将所有组件在这里注册。接下来我们要到main.js中引用这个文件实现组件全局注册。
在main中引入src/components/index.js，并且通过Vue.use函数使用
main.js代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import myCom from '@/components'//引入组件库
Vue.use(myCom)//使用组件库
Vue.config.productionTip = false
new Vue({ 
   
  router,
  render: function (h) { 
    return h(App) }
}).$mount('#app')

此时两个组件都已被全局注册，在其他组件中无需单独引用即可使用。
我们可以验证以下是否成功，将src/views/Home.vue文件中script标签里的内容全部去掉，再查看页面状态，修改后的Home.vue内容如下：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <hello-world msg="Welcome to Your Vue.js App"/>
    <test/>
  </div>
</template>

修改后页面依然能正常渲染，并且没有任何报错，说明全局注册成功。
那么修改后我们不用每次复制组件库，都要到main.js里将所有组件都注册一遍，而是直接将整个components文件夹里的所有文件都搬过去，然后在main.js中引入components/index.js并通过Vue.use函数引用即可。
当然，这还不是最便捷的，因为components/index.js里你还是要写很多组件注册的代码，接下来我们通过批量注册的方式来简化这个注册过程。

四、批量注册

我们可以通过require.context函数批量导入文件，再将整个文件数组进行循环注册，注册时，组件名称使用vue文件里的name字段即可。这也意味着每一个组件的name都要有值，并且唯一。废话不多说，直接上代码，src/components/index.js代码如下：

const files = require.context('@/components',true,/\.vue$/)
let components = { 
   };
files.keys().forEach(key => { 
   
  components[key.replace(/(\.\/|\.vue)/g, '')] = files(key).default;
})
let install = (Vue)=>{ 
   
  for(let i in components){ 
   
    Vue.component(components[i].name,components[i])
  }
}
export default { 
   
  install,
  components,
}

这时候，无论你有多少组件，它都会帮你自动全局注册，这就方便很多了。后续我们只需要专注组件开发即可，无需再管组件注册问题。

组件开发实现了，注册问题也解决了，接下来该谈谈打包的事了。

五、组件打包

我们前面讲到，要在其他项目中复用组件库，把我们写好的components文件夹内容复制过去，在main.js中引用即可，但是components整个文件夹的文件体积太大了，效率太低，并且容易源码泄露。那么此时我们可以将组件单独进行打包。
在package.json中，scripts里加上命令 build:com，代码如下：

 "scripts": { 
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:com": "vue-cli-service build --target lib --name index src/components/index.js"
  },

接下来在中端执行命令：

npm run build:com

运行完成时，你的组件库就被打包好了，在你的根目录里的dist文件夹中，内容如下：

在使用是，我们只需要在main.js中将index.css和index.umd.js引入即可

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import myCom from '@/../dist/index.umd'//引入组件库
import '@/../dist/index.css'
Vue.use(myCom)//使用组件库
Vue.config.productionTip = false
new Vue({ 
   
  router,
  render: function (h) { 
    return h(App) }
}).$mount('#app')

再刷新页面依然正常显示，说明打包成功。
但dist文件夹内有很多map文件，使得有点杂乱，我们可以选择去掉map文件。
在项目根目录下创建vue.config.js文件，加入以下代码：

module.exports = { 
   
  productionSourceMap:false
};

再次运行命令打包：

npm run build:com

此时就不会再生成map文件了：

总结

通过以上方式，我们就能开发出自己的组件库了，当需要复用时，只需要将dist文件夹复制到新项目中，在main.js中引用即可。

今天的文章如何开发自己的VUE组件库并打包复用分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。