手把手教你開發(fā)vue組件庫

前言

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,目前有越來越多的開發(fā)者在學(xué)習(xí)和使用.在筆者寫完?從0到1教你搭建前端團(tuán)隊(duì)的組件系統(tǒng)?之后很多朋友希望了解一下如何搭建基于vue的組件系統(tǒng),所以作為這篇文章的補(bǔ)充,本文來總結(jié)一下如何搭建基于vue的組件庫.

雖然筆者有近2年沒有從事vue的開發(fā)了,但平時(shí)一直在關(guān)注vue的更新和發(fā)展, 筆者一直認(rèn)為技術(shù)團(tuán)隊(duì)的組件化之路重點(diǎn)在于基礎(chǔ)架構(gòu)的搭建以及組件化的設(shè)計(jì)思想,我們完全可以采用不同的框架實(shí)現(xiàn)類似的設(shè)計(jì),所以透過現(xiàn)象看本質(zhì),思想才是最重要的.本文主要教大家通過使用vue-cli3 一步步搭建一個(gè)組件庫并發(fā)布到npm上,但筆者認(rèn)為重點(diǎn)不在于實(shí)現(xiàn)搭建組件庫的具體方式,而在于設(shè)計(jì)組件庫的思想和取舍.

你將收獲

• 使用vue-cli3搭建團(tuán)隊(duì)的組件庫并發(fā)布到npm
• npm發(fā)包的常用基礎(chǔ)知識

相關(guān)資料

• 從0到1教你搭建前端團(tuán)隊(duì)的組件系統(tǒng)（高級進(jìn)階必備）
• 一張圖教你快速玩轉(zhuǎn)vue-cli3
• vue項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)匯總

正文

本文假設(shè)大家對vue有一定的了解,并熟悉vue-cli3的配置.首先我們在搭建組件庫的時(shí)候,一定要清楚是否有必要搭建,如果項(xiàng)目是一次性的或者不同項(xiàng)目中不存在可復(fù)用的組件,那么搭建組件庫是沒有必要的,反之如果團(tuán)隊(duì)存在多個(gè)不同的項(xiàng)目都會(huì)使用一致的組件設(shè)計(jì)規(guī)范,那么搭建組件庫無疑是不二選擇.接下來我們直接開始實(shí)現(xiàn)組件庫的搭建.

1.安裝vue-cli3并創(chuàng)建一個(gè)項(xiàng)目

首先我們先安裝開發(fā)必要的工具集,并創(chuàng)建一個(gè)項(xiàng)目:

yarn global add @vue/cli
// 創(chuàng)建項(xiàng)目
vue create vui

我們安裝完依賴并進(jìn)入項(xiàng)目啟動(dòng)服務(wù)后vue-cli3會(huì)自動(dòng)給我們展示一個(gè)默認(rèn)頁面,關(guān)于vue的組件庫目錄結(jié)構(gòu),筆者參考element的來組織,大家也可以按照自己團(tuán)隊(duì)的風(fēng)格來設(shè)計(jì).首先我們看看原來的目錄結(jié)構(gòu):

我們做如下調(diào)整:

我們將src重命名為examples, 并添加packages目錄,用來存放我們的自定義組件. 但是cli默認(rèn)會(huì)啟動(dòng)src下的服務(wù),如果目錄名變了,我們需要手動(dòng)修改配置,vue-cli3中提供自定義打包配置項(xiàng)目的文件,我們只需要手動(dòng)創(chuàng)建vue.config.js即可.我們具體修改如下:

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 擴(kuò)展 webpack 配置，使 packages 加入編譯
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
  }
}

首先修改入口文件地址為examples下的main.js,其次將packages加入打包編譯任務(wù)中.

2.編寫組件代碼

首先我們拿一個(gè)Button組件來示范，這里只實(shí)現(xiàn)一個(gè)比較簡單的組件，如果大家想了解更加詳細(xì)的組件設(shè)計(jì)方法和思路，可以參考筆者的組件設(shè)計(jì)相關(guān)的文章。首先我們先在packages目錄下新建一個(gè)Button目錄，然后src里存放組件的源代碼：

<template>
  <div class="x-button">
    <slot>slot>
  div>
template>

<script>
export default {
  name: 'x-button',
  props: {
    type: String
  }
}
script>

<style scoped>
  .x-button {
      display: inline-block;
      padding: 3px 6px;
      background: #000;
      color: #fff;
  }
style>

vue和react組件設(shè)計(jì)中會(huì)大量應(yīng)用插槽機(jī)制，比如vue里的slot標(biāo)簽， react的children等，所以這一塊大家可以重點(diǎn)關(guān)注一下。?我們在在Button的index.js里編寫如下代碼來作為vue的組件安裝：

// 導(dǎo)入組件，組件必須聲明 name
import XButton from './src'
// 為組件提供 install 安裝方法，供按需引入
XButton.install = function (Vue) {
  Vue.component(XButton.name, XButton)
}
// 導(dǎo)出組件
export default XButton

Button的組件結(jié)構(gòu)如下：

接下來我們在packages的入口文件中導(dǎo)入組件并安裝導(dǎo)出：

// 導(dǎo)入button組件
import XButton from './Button'

// 組件列表
const components = [
  XButton
]

// 定義 install 方法，接收 Vue 作為參數(shù)。如果使用 use 注冊插件，那么所有的組件都會(huì)被注冊
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 {
  // 導(dǎo)出的對象必須具有 install，才能被 Vue.use() 方法安裝
  install,
  // 以下是具體的組件列表
  XButton
}

上面的install步驟和導(dǎo)出步驟非常關(guān)鍵，大家需要按照規(guī)則配置，這也是vue組件注冊的規(guī)則之一。詳細(xì)文檔大家可以看vue官網(wǎng)的組件篇。

3.測試代碼

我們要想看到自己寫的組件效果，可以將組件導(dǎo)入到examples目錄下的main.js中，其本質(zhì)就是一個(gè)項(xiàng)目的開發(fā)目錄，我們只需要按照如下方式導(dǎo)入即可：

// examples/main.js
import Vue from 'vue'
import App from './App.vue'

// 導(dǎo)入組件庫
import xui from '../packages'
// 注冊組件庫
Vue.use(xui)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

這種方式是全局導(dǎo)入，至于按需導(dǎo)入，完全可以采用element的方式來配置，對于業(yè)務(wù)組件來說，一般項(xiàng)目中都是使用的到，所以全局導(dǎo)入比較合適，作為UI庫來說，按需導(dǎo)入可能更適合。

接下來我們就可以在項(xiàng)目中使用我們的組件了：