前言

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

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

你將收獲

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

正文

本文假設大家對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 = falsenew 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

總結

以上是生活随笔為你收集整理的pls-00302: 必须声明 组件_手把手教你开发vue组件库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。