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

時間 2020-03-22

標籤基於 vue 開發一個組件简体版

原文原文鏈接

前言

Vue是一套用於構建用戶界面的漸進式框架,目前有愈來愈多的開發者在學習和使用.在筆者寫完從0到1教你搭建前端團隊的組件系統以後不少朋友但願瞭解一下如何搭建基於vue的組件系統,因此做爲這篇文章的補充,本文來總結一下如何搭建基於vue的組件庫.javascript

雖然筆者有近2年沒有從事vue的開發了,但平時一直在關注vue的更新和發展, 筆者一直認爲技術團隊的組件化之路重點在於基礎架構的搭建以及組件化的設計思想,咱們徹底能夠採用不一樣的框架實現相似的設計,因此透過現象看本質,思想纔是最重要的.本文主要教你們經過使用vue-cli3 一步步搭建一個組件庫併發布到npm上,但筆者認爲重點不在於實現搭建組件庫的具體方式,而在於設計組件庫的思想和取捨.css

你將收穫

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

正文

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

1.安裝vue-cli3並建立一個項目

首先咱們先安裝開發必要的工具集,並建立一個項目:前端

yarn global add @vue/cli
// 建立項目
vue create vui
複製代碼

咱們安裝完依賴並進入項目啓動服務後vue-cli3會自動給咱們展現一個默認頁面,關於vue的組件庫目錄結構,筆者參考element的來組織,你們也能夠按照本身團隊的風格來設計.首先咱們看看原來的目錄結構: vue

咱們作以下調整:

咱們將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加入打包編譯任務中.java

2.編寫組件代碼

首先咱們拿一個Button組件來示範，這裏只實現一個比較簡單的組件，若是你們想了解更加詳細的組件設計方法和思路，能夠參考筆者的組件設計相關的文章。首先咱們先在packages目錄下新建一個Button目錄，而後src裏存放組件的源代碼：node

<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的組件安裝：react

// 導入組件，組件必須聲明 name
import XButton from './src'

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

// 導出組件
export default XButton
複製代碼

Button的組件結構以下： webpack

接下來咱們在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官網的組件篇。css3

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數據可視化等前端知識和實戰，歡迎在公號《趣談前端》加入咱們的技術羣一塊兒學習討論，共同探索前端的邊界。