Vue组件库开发

市面上目前已有各类各样的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