市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。

为何要进行组件库开发

如果你所在的公司对于页面的样式没有什么要求，那么你只要随便拿一个组件库来用就行了，比如element、iView等等，不用再重复造轮子了；
如果你目前只有个人用一个组件，或者是只对个别组件有要求，那么只要在你的工程里面开发一个.vue单文件组件就可以了；如果你的团队想要一个更加快速的开发方式，希望有一套一类应用的标准，并且对组件的样式有较高的要求，那么你就需要开发一个组件库了。

正确的学习方式

我觉得我写完这篇文章以后，大家看完可能只是能按部就班地开发一个组件库而已，而且具体的记忆和理解不是很深，所以我觉得正确的方式应该是站在巨人的肩膀上，比如去查看element组件库的源码，去了解他的文件组织方式，文档是如何管理的，主题文件是如何管理的，以及一些复杂组件是如何实现的。接下来，我们就进入正题。

步骤

我们来理一下整个步骤：

创建项目

调整项目结构

编写组件

使用vue-cli-service库模式打包编译

发布到npm

开发步骤

第一步创建一个项目

 

调整目录

将项目的目录调整到以下形式，该目录方式像是成了业界不成名的规定，element和iview都是以这样的方式组织的。我觉得挺好的，所以不做修改了。

 

目录调整以后，我们需要修改相应的webpack配置，使原来的src目录指向修改后的examples目录，修改vue.config.js文件：

const path =  require('path')
function resolve  (dir) {
  return path.join(__dirname, '..', dir)
}
 
module.exports = {
    // 将entry指向examples
    pages: {
        index: {
            entry:  'examples/main.js',
             template: 'public/index.html',
             filename: 'index.html'
        }
    },
    // 为packages目录添加babel-loader处理
    chainWebpack:  config => {
        config.module
        .rule('js')
        .include
             .add(resolve('packages'))
            .end()
        .use('babel')
             .loader('babel-loader')
             .tap(options => {
                return options
            })
    }
}

编写组件

packages目录下面的文件组织情况如下：

 

其中：

|-- datePicker      // 新编写的组件，以datepicker为例

|-- theme-default   // 主题文件

主题文件较为特殊，他作为单独的一个包进行发布引入，方便进行主题发布，后面再进行介绍。下面对datePicker进行介绍：

<template>
  <div>这是一个datePicker组件</div>
</template>
 
<script>
export default {
   name: 'datePicker'
}
</script>

datePicker/index.js

/* eslint-disable */
 
import datePicker  from './src/datePicker.vue';
 
 
datePicker.install = function (Vue) {
   Vue.component(datePicker.name, datePicker)
}
 
 
export default datePicker

 

批量注册组件

Package/index.js

/* eslint-disable */
import datePicker  from './datePicker';
 
const components  = [
  datePicker
]
 
 
const install =  function (Vue) {
  
  if (install.installed) return
  
  components.map(component =>  Vue.component(component.name, component))
}
 
 
if (typeof  window !== 'undefined' && window.Vue) {
   install(window.Vue)
}
 
export default {
  
  install,
  datePicker
}

本地测试组件

我们的组件以及编写完成，第一步先在本地进行测试：

examples/main.js

/* eslint-disable */
import Vue from 'vue';
import App from './App.vue';
import datePicker  from './../packages/index'
 
Vue.use(datePicker)
 
Vue.config.productionTip = false;
 
new Vue({
  render: h =>  h(App),
}).$mount('#app');

如何在浏览器中就可以看到我们的组件运行成功了，下一步就是要将我们的代码打包成npm库了，那么需要通过vue-cli3中vue-cli-service的库模式进行打包。

package.json

 

执行 npm run build-lib

 

修改package.json

主要要修改的是：

{
 
"private": false,     
// 是否私有，必须指定为false才能发布到npm
 
"main": "lib/fklhenu.umd.min.js", // 编译后包的入口文件
}

根目录添加.npmignore文件

发布到npm下，只需要lib目录、package.json 和readme.md文件,所以需要忽略掉其他的目录
.npmignore

examples/
packages/
public/
vue.config.js
postcss.config.js
babel.config.js
*.map

登录npm