市面上目前已有各種各樣的UI組件庫，比如 Element 和 iView ，他們的強(qiáng)大毋庸置疑。但是我們面臨的情況是需求越來越復(fù)雜，當(dāng)它們不能再滿足我們需求的時(shí)候，這個(gè)時(shí)候就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫了。

所以本文的目的就是讓讀者能通過此文，小能做一個(gè)簡(jiǎn)單的插件供人使用，大能架構(gòu)和維護(hù)一個(gè)組件庫不在話下。

以下一個(gè)簡(jiǎn)單的顏色選擇器插件 vColorPicker 講述從開發(fā)到上線到npm的流程。

vColorPicker 插件 DEMO

一、技術(shù)棧

如何通過新版腳手架創(chuàng)建項(xiàng)目，這里就不提了，自行看官方文檔。

• Vue-cli3: 新版腳手架的庫模式，可以讓我們很輕松的創(chuàng)建打包一個(gè)庫
• npm：組件庫將存放在npm
• webpack：修改配置需要一點(diǎn) webapck 的知識(shí)。

二、大綱

想要搭建一個(gè)組件庫，我們必須先要有一個(gè)大概的思路。

1. 規(guī)劃目錄結(jié)構(gòu)
2. 配置項(xiàng)目以支持目錄結(jié)構(gòu)
3. 編寫組件
4. 編寫示例
5. 配置使用庫模式打包編譯
6. 發(fā)布到npm

三、規(guī)劃目錄結(jié)構(gòu)

1、創(chuàng)建項(xiàng)目

在指定目錄中使用命令創(chuàng)建一個(gè)默認(rèn)的項(xiàng)目，或者根據(jù)自己需要自己選擇。

$ vue create .

2、調(diào)整目錄

我們需要一個(gè)目錄存放組件，一個(gè)目錄存放示例，按照以下方式對(duì)目錄進(jìn)行改造。

.
...
|-- examples // 原 src 目錄，改成 examples 用作示例展示
|-- packages // 新增 packages 用于編寫存放組件
...
.

四、配置項(xiàng)目以支持新的目錄結(jié)構(gòu)

我們通過上一步的目錄改造后，會(huì)遇到兩個(gè)問題。

1. src 目錄更名為 examples ，導(dǎo)致項(xiàng)目無法運(yùn)行
2. 新增 packages 目錄，該目錄未加入 webpack 編譯

注：cli3 提供一個(gè)可選的 vue.config.js 配置文件。如果這個(gè)文件存在則他會(huì)被自動(dòng)加載，所有的對(duì)項(xiàng)目和webpack的配置，都在這個(gè)文件中。

1、重新配置入口，修改配置中的 pages 選項(xiàng)

新版 Vue CLI 支持使用 vue.config.js 中的 pages 選項(xiàng)構(gòu)建一個(gè)多頁面的應(yīng)用。

這里使用 pages 修改入口到 examples

module.exports = {
 // 修改 src 目錄 為 examples 目錄
 pages: {
 index: {
 entry: 'examples/main.js',
 template: 'public/index.html',
 filename: 'index.html'
 }
 }
}

2、支持對(duì) packages 目錄的處理，修改配置中的 chainWebpack 選項(xiàng)

packages 是我們新增的一個(gè)目錄，默認(rèn)是不被 webpack 處理的，所以需要添加配置對(duì)該目錄的支持。

chainWebpack 是一個(gè)函數(shù)，會(huì)接收一個(gè)基于 webpack-chain 的 ChainableConfig 實(shí)例。允許對(duì)內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改。

module.exports = {
 // 修改 src 為 examples
 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')
 .tap(options => {
  // 修改它的選項(xiàng)...
  return options
 })
 }
}

鏈?zhǔn)讲僮?/a>

webpack-chain

五、編寫組件

以上我們已配置好對(duì)新目錄架構(gòu)的支持，接下來我們嘗試編寫組件。以下我們以一個(gè)已發(fā)布到 npm 的小插件作為示例。

GitHub - 顏色選擇器：vcolorpicker

1. 創(chuàng)建一個(gè)新組件

1. 在 packages 目錄下，所有的單個(gè)組件都以文件夾的形式存儲(chǔ)，所有這里創(chuàng)建一個(gè)目錄 color-picker/
2. 在 color-picker/ 目錄下創(chuàng)建 src/ 目錄存儲(chǔ)組件源碼
3. 在 /color-picker 目錄下創(chuàng)建 index.js 文件對(duì)外提供對(duì)組件的引用。

修改 /packages/color-picker/index.js 文件，對(duì)外提供引用。

# /packages/color-picker/index.js
// 導(dǎo)入組件，組件必須聲明 name
import colorPicker from './src/color-picker.vue'
// 為組件提供 install 安裝方法，供按需引入
colorPicker = function (Vue) {
 Vue.component(colorPicker.name, colorPicker)
}
// 默認(rèn)導(dǎo)出組件
export default colorPicker

2. 整合所有的組件，對(duì)外導(dǎo)出，即一個(gè)完整的組件庫

修改 /packages/index.js 文件，對(duì)整個(gè)組件庫進(jìn)行導(dǎo)出。

// 導(dǎo)入顏色選擇器組件
import colorPicker from './color-picker'
// 存儲(chǔ)組件列表
const components = [
 colorPicker
]
// 定義 install 方法，接收 Vue 作為參數(shù)。如果使用 use 注冊(cè)插件，則所有的組件都將被注冊(cè)
const install = function (Vue) {
 // 判斷是否安裝
 if (install.installed) return
 // 遍歷注冊(cè)全局組件
 components.map(component => Vue.component(component.name, component))
}
// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
}
export default {
 // 導(dǎo)出的對(duì)象必須具有 install，才能被 Vue.use() 方法安裝
 install,
 // 以下是具體的組件列表
 colorPicker
}

六、編寫示例

1、在示例中導(dǎo)入組件庫

import Vue from 'vue'
import App from './App.vue'
// 導(dǎo)入組件庫
import ColorPicker from './../packages/index'
// 注冊(cè)組件庫
Vue.use(ColorPicker)
Vue.config.productionTip = false
new Vue({
 render: h => h(App)
}).$mount('#app')

2、在示例中使用組件庫中的組件

在上一步用使用 Vue.use() 全局注冊(cè)后，即可在任意頁面直接使用了，而不需另外引入。當(dāng)然也可以按需引入。

<template>
 <colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>
</template>

<script>
export default {
 data () {
 return {
 color: '#ff0000'
 }
 },
 methods: {
 headleChangeColor () {
 console.log('顏色改變')
 }
 }
}
</script>

七、發(fā)布到 npm，方便直接在項(xiàng)目中引用

到此為止我們一個(gè)完整的組件庫已經(jīng)開發(fā)完成了，接下來就是發(fā)布到 npm 以供后期使用。

1、 package.js 中新增一條編譯為庫的命令

在庫模式中，Vue是外置的，這意味著即使在代碼中引入了 Vue，打包后的文件也是不包含Vue的。

Vue Cli3 構(gòu)建目標(biāo)：庫

以下我們?cè)?scripts 中新增一條命令 npm run lib

• --target : 構(gòu)建目標(biāo)，默認(rèn)為應(yīng)用模式。這里修改為 lib 啟用庫模式。
• --dest : 輸出目錄，默認(rèn) dist 。這里我們改成 lib
• [entry] : 最后一個(gè)參數(shù)為入口文件，默認(rèn)為 src/App.vue 。這里我們指定編譯 packages/ 組件庫目錄。

"script": {
 // ...
 "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"
}

執(zhí)行編譯庫命令

$ npm run lib

2、配置 package.json 文件中發(fā)布到 npm 的字段

name
version
description
main
keyword
author
private
license

以下為參考設(shè)置

{
 "name": "vcolorpicker",
 "version": "0.1.5",
 "description": "基于 Vue 的顏色選擇器",
 "main": "lib/vcolorpicker.umd.min.js",
 "keyword": "vcolorpicker colorpicker color-picker",
 "private": false
 }

3、添加 .npmignore 文件，設(shè)置忽略發(fā)布文件

我們發(fā)布到 npm 中，只有編譯后的 lib 目錄、package.json、README.md才是需要被發(fā)布的。所以我們需要設(shè)置忽略目錄和文件。

和 .gitignore 的語法一樣，具體需要提交什么文件，看各自的實(shí)際情況。

# 忽略目錄
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

4、登錄到 npm

首先需要到 npm 上注冊(cè)一個(gè)賬號(hào)，注冊(cè)過程略。

如果配置了淘寶鏡像，先設(shè)置回npm鏡像：

$ npm config set registry http://registry.npmjs.org

然后在終端執(zhí)行登錄命令，輸入用戶名、密碼、郵箱即可登錄。

$ npm login

5、發(fā)布到 npm

執(zhí)行發(fā)布命令，發(fā)布組件到 npm

$ npm publish

6、發(fā)布成功

發(fā)布成功后稍等幾分鐘，即可在 npm 官網(wǎng)搜索到。以下是剛提交的 vcolorpicker

總結(jié)

以上所述是小編給大家介紹的Vue cli3 庫模式搭建組件庫并發(fā)布到 npm，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論