九層之臺，起於累土：碼良組件

本文爲「碼良系統的使用及設計實現」系列文章的第三篇。

GVP

近日收到了 gitee 寄來的 GVP 獎盃（/牌/章？），反正就是這麼一個東西咯

好像，除了年終獎，很久沒有拿過什麼獎了 😂，感謝 gitee

閒言少敘，進入正文。

當咱們談論組件時咱們在談論什麼

上篇文章給出了大量碼良編輯器的使用實例，相信讀者對於碼良編輯器已經有了直觀的認識。

下圖是碼良編輯器的結構圖，

能夠看到，整個編輯器的核心是組件，其餘配置或功能都是服務於組件的。

在碼良系統中，組件是構成頁面的基礎元素，每一個組件各自承擔着特異的功能，好比圖片組件能夠呈現一張圖片，文本組件能夠展現一段文本。一系列組件按照必定的位置和樣式排布在頁面內，再加以必定的配置，最終就組成了頁面。所以，組件的能力決定了碼良的能力，組件的豐富程度即表明了碼良的強大程度。

官方提供的大部分組件已經在上篇文章中露過臉了（但願智障機器人給你留下了美好印象），好比圖片、文本、富文本、輪播等，都是一些功能較爲基礎的組件。那麼，除了官方組件之外，自制組件如何集成到碼良中呢，且看下文介紹。

碼良組件開發

gods-pen

gods-pen 是基於 nodejs 的命令行工具，提供了覆蓋碼良組件開發全流程的工具。

npm install gods-pen-cli -g # install gods-pen
複製代碼

查看幫助 gods-pen help，有四個子命令可用

建立一個組件

gods-pen create my-component
複製代碼

根據提示輸入組件名、描述，選擇組件分類

項目文件結構以下

能夠看到，這是一個典型的 vue 工程。沒錯，碼良組件自己與普通 vue 組件無異，只是在普通 vue 組件的基礎上，咱們添加了一些約定字段，使組件能被碼良編輯器識別、配置。

/src/index.vue 即爲剛纔建立的組件。組件開發的主要工做就是針對這個組件進行功能開發。

/src/example.vue 提供了一些簡單的代碼示例和說明。

preview/ 目錄下的文件是供開發預覽使用的，最終發佈的時候是不會打包此文件夾文件的，必要時能夠按需修改其中的代碼，好比測試組件傳參（props）。

icon.png 將做爲組件圖標隨組件發佈至組件倉庫，您應該將此文件替換爲本身的組件圖標。

[README.md](http://readme.md) 是組件的詳細使用說明，支持 markdown，也會隨組件發佈上傳至組件倉庫，在碼良編輯器中能夠查看組件說明。

不知道你有沒有注意到建立組件時，最後一步是選擇「是否建立屬性配置組件「，所謂屬性配置組件就是能夠在編輯器中使用此自定義組件來對組件的屬性進行配置，而不是使用編輯器默認提供的。editor/ 文件夾下就是屬性配置組件，事實上，不管你選擇建立此組件與否，這個文件夾都存在，區別僅在於，選擇「是「的時候，webpack entry 配置會包含editor/index.vue 文件，反之不包含，所以，當你發現本身須要一個自定義屬性配置組件而此前未選擇「是」的時候，在 webpack.config.js 中 entry 字段下添加 editor: './editor/index.vue' 便可。

組件開發

碼良組件基於 vue ，在對vue 框架有必定了解後就能夠輕鬆開發碼良組件了。

上圖中，安裝了依賴並啓動了項目，簡單修改組件展現了「hello world」

下圖中咱們來開發一個簡單的卡片組件，包含一張圖片，一行文字，圖片和文字可配置

截止目前仍然仍是一個普通vue組件的樣子，接受兩個參數 img 和 line，如何讓編輯器能識別它所需參數並提供合理的輸入控件呢，接着看對它的改造

能夠看到，咱們爲img 參數和 line 參數都添加了一個 editor 字段，並指定了 editor.type 和 editor.label ，type爲 「image」 表明了編輯器應該爲該參數提供一個圖片選擇器，label 爲「圖片」表示在編輯器中應將該參數顯示爲「圖片」，更多的 type 輸入類型請參考文檔。

組件構建和發佈

組件開發完成，準備一張美美的圖片替換 icon.png 做爲組件圖標，寫好組件 readme，確認一下 package.json 組件版本號（version 字段）是否最新、組件中文名（label 字段）是否已配置，準備停當就能夠發佈了。

若是此前沒有設置過組件倉庫，請先執行設置命令

# 設置爲官方組件倉庫 godspen.ymm56.com
gods-pen config registry https://godspen.ymm56.com
複製代碼

執行發佈（含自動構建）

gods-pen publish -t [access-token]
複製代碼

其中 access-token 請在碼良管理後臺——用戶設置獲取。

這就發佈成功了，使用一下吧

閒話

例行求體驗，例行求 star。