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

文章目录

前言
一、创建项目
二、原理分析
三、创建入口文件集体注册组件
四、批量注册
五、组件打包
总结

前言

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组件库并打包复用相关推荐

vue组件库大全（忘了的时候可以进来找一下~）
基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/ ...
使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...
京东Vue组件库NutUI 2.0发布：将支持跨平台！
NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布.据不完全统计,目前在京东至少有30多个 web 项目正在使用 Nut ...
不厌其烦，又一个Vue组件库
Github仓库地址: github.com/ms-design/m- 文档和Demo网站: ms-design.github.io MS Design 基于微软 Fluent Design 设计的 ...
vue 组件库发布_如何创建和发布Vue组件库
vue 组件库发布 Component libraries are all the rage these days. They make it easy to maintain a consisten ...
Vant 1.0 发布：轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...
十多款优秀的Vue组件库介绍
十多款优秀的Vue组件库介绍 1. iView UI组件库 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.iView的组件还是比较齐全的,更新也很快, ...
少女风vue组件库制作全攻略~~
预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈, 请勿在生产环境中使用,供学习&交流~~ 完整项目目录结构 git clone到本地安装依赖后,执行npm r ...
Vant - 高效的 Vue 组件库，再造一个有赞移动商城也不在话下
Vant ( \ˈvænt\ ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant,可以快速搭建出风格统一的页面,提升开发效率.目前已有近 ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...

如何开发自己的VUE组件库并打包复用