Vue组件库的那些事儿，你都知道吗？
[blockquote]
前段时间一直在研究Vue组件库，终于在组内派上了用场。来给大家贡献一篇关于Vue组件库的相关知识。经验不多，如果有不合理的地方还请多多指出哦～～～
[/blockquote]
回想一下，在你们公司或者你们小组是否有一个以上的项目需要你维护？你是否遇到两个项目需要开发类似的功能的情况？那么你是怎么做的呢？
有这么三种常用的解决方案：
COPY 你可能会说我讲究速度，复制之前的组件到新项目中，慢慢的你会发现随着你的项目的增加代码量在成倍上升，重复工作浪费了你很多时间。
子模块 我可以抽离出所有公共的组件放入一个子模块（git submodule）中，这种方式虽然解决了重复工作，但对目录结构以及使用者的要求比较多，不够灵活，还是不满意。。。
使用开源组件库 这可能是一个好的选择，但是，一用才发现很多并不是我们想要的，尤其是移动端组件库：
C端产品定制化需求多
组件库风格与产品不符
适配方案不同rem/px/vw等。
针对以上痛点，写一个通用组件库是较优的方案
内容分为两部分
组件库的两个核心思想的实现：全局引用和按需引用。
从使用者和开发者两个角度看问题
我们以一个简单的vue组件库为例讲一下重点部分：
全局引用
1.把公共组件放入components目录中，并编写导出文件如下：
// src/index.js
import Btn from './components/btn'
import Swipe from './components/swipe'
const install = function(Vue) {
if (install.installed) return;
// 此处注意：组件中需要添加name属性，代表注册的组件名，也可修改成其他
Vue.component(Btn.name, Btn)
Vue.component(Swipe.name, Swipe)
}
// Vue 是全局变量时，自动 install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
};
module.exports = {
install,
Btn,
Swipe
} 此处需要注意的是 install。 Vue的插件必须提供一个公开方法 install，该方法会在你使用该插件，也就是 Vue.use(yourPlugin)时被调用。这样也就给 Vue全局注入了你的所有的组件。
2.webpack配置
var path = require('path')
var options = require('./webpack.base')
var merge = require('webpack-merge')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = merge(options, {
entry: path.resolve(__dirname, '../src/index.js'),
output: {
filename: 'UiLib.js',
path: path.resolve(__dirname, '../dist'),
library: 'UiLib',
libraryTarget: 'umd' // commonjs2
},
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
plugins: [
new ExtractTextPlugin({
filename: './style.css',
disable: false,
allChunks: true
})
]
}) 这里需要注意：必须加上externals（产出文件不打包vue）和library，libraryTarget（打包产出模式）。可以去webpack官网查看详细说明。样式需要单独打包出来，否则打包的js文件过大影响性能。
3.在package.json中添加：
{
"main": "dist/UiLib.js", // 引用的入口文件
"name": "vue-ui-lib",
"version": "0.0.1"
}