Vue-Donut——專(zhuān)用于構(gòu)建Vue的UI組件庫(kù)的開(kāi)發(fā)框架

stormgens 發(fā)布于2019-08-20 16:19 / 1903人閱讀

摘要：相信不少使用的開(kāi)發(fā)者和公司都有定制一套屬于自己的組件庫(kù)的需求。針對(duì)這個(gè)問(wèn)題，我搭建了一個(gè)專(zhuān)門(mén)用來(lái)構(gòu)建的組件庫(kù)的開(kāi)發(fā)框架，以節(jié)省搭建環(huán)境的勞動(dòng)力，專(zhuān)心于組件庫(kù)的開(kāi)發(fā)。首先我們嘗試了使用的方案，就是把組件庫(kù)直接作為項(xiàng)目的子模塊使用。

相信不少使用Vue的開(kāi)發(fā)者和公司都有定制一套屬于自己的UI組件庫(kù)的需求。但是要開(kāi)發(fā)、測(cè)試、打包、發(fā)布這個(gè)組件庫(kù)，卻需要耗費(fèi)較大的勞動(dòng)力去搭建一整套的環(huán)境。針對(duì)這個(gè)問(wèn)題，我搭建了一個(gè)專(zhuān)門(mén)用來(lái)構(gòu)建Vue的UI組件庫(kù)的開(kāi)發(fā)框架，以節(jié)省搭建環(huán)境的勞動(dòng)力，專(zhuān)心于組件庫(kù)的開(kāi)發(fā)。

一、介紹

項(xiàng)目地址：https://github.com/jrainlau/v...

Vue-Donut是一個(gè)開(kāi)發(fā)框架，配合vue-cli使用。所以首先保證全局安裝有vue-cli。接下來(lái)就可以初始化我們的項(xiàng)目了：

vue init jrainlau/vue-donut <項(xiàng)目名>

類(lèi)似官方的vuejs-templates/webpack模板，Vue-Donut也允許用戶(hù)進(jìn)行一些配置。在配置完成后則會(huì)生成你的組件庫(kù)目錄。值得注意的是，這個(gè)組件庫(kù)最終發(fā)布的名字也是你所自定義的項(xiàng)目名（當(dāng)然這些都是可以修改的）。

接下來(lái)按照提示，進(jìn)入項(xiàng)目目錄后，通過(guò)yarn命令下載所需依賴(lài)包即可開(kāi)始使用。

目錄結(jié)構(gòu)如下：

.
├── index.html
├── package.json
├── src
│?? ├── app.vue
│?? ├── assets
│?? │?? └── donut.jpg
│?? ├── components
│?? │?? ├── content.vue
│?? │?? ├── header.vue
│?? │?? ├── index.js
│?? │?? ├── link.vue
│?? │?? └── title.vue
│?? └── main.js
└── webapck
    ├── build.js
    ├── dev.js
    ├── doc.js
    ├── webpack.base.config.js
    ├── webpack.build.config.js
    ├── webpack.dev.config.js
    └── webpack.doc.config.js

二、命令

yarn run dev：開(kāi)發(fā)模式

通過(guò)webpack-dev-server開(kāi)啟一個(gè)測(cè)試服務(wù)器，就和官方的vuejs-templates/webpack模板里面的一樣。

yarn run build：打包及發(fā)布模式

這個(gè)命令會(huì)以src/components/index.js為入口文件，通過(guò)webpack構(gòu)建后產(chǎn)出到dist目錄。

dist/index.js就是你接下來(lái)將會(huì)發(fā)布到npm上面的包。

你應(yīng)該熟練掌握如何編寫(xiě)vue的插件

src/components/index.js入口文件應(yīng)該長(zhǎng)成下面這個(gè)樣子：

import myComponent from "./my-component.vue"

const install = (Vue) => {
  Vue.component("my-componen", myComponent)
}

export default install

yarn run build：文檔模式

通過(guò)運(yùn)行yarn run dev，你所開(kāi)發(fā)的就像是一個(gè)普通的單頁(yè)應(yīng)用，這也類(lèi)似于組件庫(kù)的官方文檔頁(yè)面。當(dāng)開(kāi)發(fā)完成后，你可以通過(guò)這條命令打包你的應(yīng)用。app.[hash].js, vendor.[hash].js和manifest.[hash].js，以及獨(dú)立的css文件都會(huì)被打包到docs文件夾。

source map *.[hash].map會(huì)被自動(dòng)生成。

可以方便地直接使用docs目錄作為github pages的資源目錄。

三、注意事項(xiàng)

Vue-Donut默認(rèn)使用less作為預(yù)處理器，如果需要用其他預(yù)處理器，可以自定義配置。

測(cè)試同理。

四、證書(shū)

MIT

一些碎碎念

在工作的過(guò)程中，遇到了搭建UI組件庫(kù)的需求。開(kāi)發(fā)不難，麻煩的是如何在項(xiàng)目中引入使用。首先我們嘗試了使用git的submodule方案，就是把UI組件庫(kù)直接作為項(xiàng)目的子模塊使用。另外一種方式，是把整個(gè)組件庫(kù)發(fā)布到npm，然后在webpack.module.rules的exclude里面通過(guò)正則或者函數(shù)的方式，使用項(xiàng)目的webpack配置去跑組件庫(kù)的代碼。這兩種方式都不那么優(yōu)雅，思考再三，最后決定搭個(gè)更加方便優(yōu)雅的開(kāi)發(fā)框架來(lái)。

在此之前，對(duì)于webpack的使用及配置僅處于“看得懂”的程度，但從未真正從頭開(kāi)始搭過(guò)。在搭建的過(guò)程中也遇到了不少坑，但通過(guò)查閱官方文檔大都能獲得解決辦法，實(shí)在不行還有萬(wàn)能的google和stackoverflow。搭的過(guò)程中也參考了很多優(yōu)秀的實(shí)踐，比如公司前輩的搭建方式，以及vue-cli官方出品的搭建方式等，搭完后對(duì)webpack的掌握也得到了極大的提升。

希望這個(gè)作品能夠發(fā)揮能效，也歡迎提出問(wèn)題和建議和我交流~