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"
}