從零到一教你基於vue開發一個元件庫

前言

Vue是一套用於構建使用者介面的漸進式框架,目前有越來越多的開發者在學習和使用.在筆者寫完 從0到1教你搭建前端團隊的元件系統 之後很多朋友希望瞭解一下如何搭建基於vue的元件系統,所以作為這篇文章的補充,本文來總結一下如何搭建基於vue的元件庫.

雖然筆者有近2年沒有從事vue的開發了,但平時一直在關注vue的更新和發展, 筆者一直認為技術團隊的元件化之路重點在於基礎架構的搭建以及元件化的設計思想,我們完全可以採用不同的框架實現類似的設計,所以透過現象看本質,思想才是最重要的.本文主要教大家通過使用vue-cli3 一步步搭建一個元件庫併發布到npm上,但筆者認為重點不在於實現搭建元件庫的具體方式,而在於設計元件庫的思想和取捨.

你將收穫

• 使用vue-cli3搭建團隊的元件庫併發布到npm
• npm發包的常用基礎知識

相關資料

• 從0到1教你搭建前端團隊的元件系統（高階進階必備）
• 一張圖教你快速玩轉vue-cli3
• vue專案實戰經驗彙總

正文

本文假設大家對vue有一定的瞭解,並熟悉vue-cli3的配置.首先我們在搭建元件庫的時候,一定要清楚是否有必要搭建,如果專案是一次性的或者不同專案中不存在可複用的元件,那麼搭建元件庫是沒有必要的,反之如果團隊存在多個不同的專案都會使用一致的元件設計規範,那麼搭建元件庫無疑是不二選擇.接下來我們直接開始實現元件庫的搭建.

1.安裝vue-cli3並建立一個專案

首先我們先安裝開發必要的工具集,並建立一個專案:

yarn global add @vue/cli
// 建立專案
vue create vui
複製程式碼

我們安裝完依賴並進入專案啟動服務後vue-cli3會自動給我們展示一個預設頁面,關於vue的元件庫目錄結構,筆者參考element的來組織,大家也可以按照自己團隊的風格來設計.首先我們看看原來的目錄結構:

我們做如下調整:

我們將src重新命名為examples, 並新增packages目錄,用來存放我們的自定義元件. 但是cli預設會啟動src下的服務,如果目錄名變了,我們需要手動修改配置,vue-cli3中提供自定義打包配置專案的檔案,我們只需要手動建立vue.config.js即可.我們具體修改如下:

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

首先修改入口檔案地址為examples下的main.js,其次將packages加入打包編譯任務中.

2.編寫元件程式碼

首先我們拿一個Button元件來示範，這裡只實現一個比較簡單的元件，如果大家想了解更加詳細的元件設計方法和思路，可以參考筆者的元件設計相關的文章。 首先我們先在packages目錄下新建一個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元件設計中會大量應用插槽機制，比如vue裡的slot標籤， react的children等，所以這一塊大家可以重點關注一下。 我們在在Button的index.js裡編寫如下程式碼來作為vue的元件安裝：

// 匯入元件，元件必須宣告 name
import XButton from './src'

// 為元件提供 install 安裝方法，供按需引入
XButton.install = function (Vue) {
  Vue.component(XButton.name, XButton)
}

// 匯出元件
export default XButton
複製程式碼

Button的元件結構如下：

接下來我們在packages的入口檔案中匯入元件並安裝匯出：

// 匯入button元件
import XButton from './Button'

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

// 定義 install 方法，接收 Vue 作為引數。如果使用 use 註冊外掛，那麼所有的元件都會被註冊
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，才能被 Vue.use() 方法安裝
  install,
  // 以下是具體的元件列表
  XButton
}
複製程式碼

上面的install步驟和匯出步驟非常關鍵，大家需要按照規則配置，這也是vue元件註冊的規則之一。詳細文件大家可以看vue官網的元件篇。

3.測試程式碼

我們要想看到自己寫的元件效果，可以將元件匯入到examples目錄下的main.js中，其本質就是一個專案的開發目錄，我們只需要按照如下方式匯入即可：

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

// 匯入元件庫
import xui from '../packages'
// 註冊元件庫
Vue.use(xui)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
複製程式碼

這種方式是全域性匯入，至於按需匯入，完全可以採用element的方式來配置，對於業務元件來說，一般專案中都是使用的到，所以全域性匯入比較合適，作為UI庫來說，按需匯入可能更適合。

接下來我們就可以在專案中使用我們的元件了：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <x-button type="primary">button</x-button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
複製程式碼

效果如下：

大家也可以採用elemnt開發更加美觀的說明文件。

4.配置package.json檔案

作為一個元件庫,我們必須按照npm的發包規則來編寫我們的package.json, 我們先來解決元件庫打包的問題,首先我們需要讓腳手架編譯我們的元件程式碼,並輸出到指定目錄下,我們按照發包規範一般會輸出到lib目錄下,程式碼如下:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name xui --dest lib packages/index.js"
  }
複製程式碼

我們的lib指令碼就是用來打包packages的元件程式碼到lib目錄下,檔名為以--name指定的名稱字首開頭,我們執行指令碼會輸出類似如下程式碼:

其次我們需要編寫package檔案的description,keywords等,具體介紹如下:

• description 元件庫的描述文字
• keywords 元件庫的關鍵詞
• license 許可協議
• repository 元件庫關聯的git倉庫地址
• homepage 元件庫展示的首頁地址
• main 元件庫的主入口地址(在使用元件時引入的地址)
• private 宣告元件庫的私有性,如果要釋出到npm公網上,需刪除該屬性或者設定為false
• publishConfig 用來設定npm釋出的地址,這個配置作為團隊內部的npm伺服器來說非常關鍵,可以設定為私有的npm倉庫

還有很多配置具體要看團隊的要求和規範,這裡就不一一舉例了.具體配置原始碼可參考地址 xui.

5.釋出到npm

釋出到npm的方法也很簡單, 首先我們需要先註冊去npm官網註冊一個賬號, 然後控制檯登入即可,最後我們執行npm publish即可.具體流程如下:

// 本地編譯元件庫程式碼
yarn lib
// 登入
 npm login
 // 釋出
 npm publish
 // 如果釋出失敗提示許可權問題,請執行以下命令
 npm publish --access public
複製程式碼

釋出之後效果如下:

之後我們就可以通過如下方式使用了:

import vui from '@alex_xu/vui'
import '/@alex_xu/vui/lib/vui.css'
Vue.use(vui)
複製程式碼

關於npm相關的知識筆者在這裡簡單提一下,大家可以參考學習.

1. .npmignore 配置檔案

.npmignore配置檔案類似於 .gitignore 檔案，如果沒有 .npmignore，會使用.gitignore來取代他的功能。

2. npm發包的版本管理

npm的發包遵循語義化版本，一個版本號格式如下：Major.Minor.Patch，每一部分具體介紹如下:

• Major 表示主版本號，做了不相容的API修改時需要更新
• Minor 表示次版本號，做了向下相容的功能性需求時需要更新
• Patch 表示修訂號, 做了向下相容的問題修正時需要更新

對應的npm也提供了指令碼幫我們實現自動更新版本號，如下：

npm version patch
npm version minor
npm version major
複製程式碼

還有更加深入的知識比如版本的tag化這些,大家感興趣也可以研究一下. 本文的元件庫搭建參考element的目錄組織方式,大家也可以直接採用element或者其他開源元件庫的腳手架來實現.

最後

後期筆者會花大量時間用在輸出node和資料視覺化方面的覆盤，對於很多朋友說的希望讓筆者多寫點面試題，這塊筆者之前已經說過了不會再出面試相關的文章了，希望大家更專注於技術本身的沉澱和積累，注重技術的格局和深度。筆者時間有限，謝謝各位理解啦～

如果想獲取更多專案完整的原始碼, 或者想學習更多H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas資料視覺化等前端知識和實戰，歡迎在公號《趣談前端》加入我們的技術群一起學習討論，共同探索前端的邊界。

更多推薦

• 10分鐘教你手寫8個常用的自定義hooks
• 《徹底掌握redux》之開發一個任務管理平臺（上）
• 從0到1教你搭建前端團隊的元件系統（高階進階必備）
• 15分鐘帶你瞭解前端工程師必知的javascript設計模式(附詳細思維導圖和原始碼)
• 一張圖教你快速玩轉vue-cli3
• vue高階進階系列——用typescript玩轉vue和vuex
• 《前端實戰總結》之使用postMessage實現可插拔的跨域聊天機器人
• 基於nodeJS從0到1實現一個CMS全棧專案（上）
• 基於nodeJS從0到1實現一個CMS全棧專案（中）（含原始碼）
• CMS全棧專案之Vue和React篇（下）（含原始碼）