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