相信很多使用Vue的開發者和公司都有定製一套屬於本身的UI組件庫的需求。可是要開發、測試、打包、發佈這個組件庫,卻須要耗費較大的勞動力去搭建一整套的環境。針對這個問題,我搭建了一個專門用來構建Vue的UI組件庫的開發框架,以節省搭建環境的勞動力,專心於組件庫的開發。css
項目地址:https://github.com/jrainlau/v...html
Vue-Donut
是一個開發框架,配合vue-cli
使用。因此首先保證全局安裝有vue-cli
。接下來就能夠初始化咱們的項目了:vue
vue init jrainlau/vue-donut <項目名>
相似官方的vuejs-templates/webpack模板,Vue-Donut
也容許用戶進行一些配置。在配置完成後則會生成你的組件庫目錄。值得注意的是,這個組件庫最終發佈的名字也是你所自定義的項目名(固然這些都是能夠修改的)。webpack
接下來按照提示,進入項目目錄後,經過yarn
命令下載所需依賴包便可開始使用。git
目錄結構以下:github
. ├── 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
:開發模式web
經過webpack-dev-server
開啓一個測試服務器,就和官方的vuejs-templates/webpack模板裏面的同樣。vue-cli
yarn run build
:打包及發佈模式npm
這個命令會以src/components/index.js
爲入口文件,經過webpack
構建後產出到dist
目錄。json
dist/index.js
就是你接下來將會發布到npm
上面的包。
你應該熟練掌握如何編寫vue的插件
src/components/index.js
入口文件應該長成下面這個樣子:
import myComponent from './my-component.vue' const install = (Vue) => { Vue.component('my-componen', myComponent) } export default install
yarn run build
:文檔模式
經過運行yarn run dev
,你所開發的就像是一個普通的單頁應用,這也相似於組件庫的官方文檔頁面。當開發完成後,你能夠經過這條命令打包你的應用。app.[hash].js
, vendor.[hash].js
和manifest.[hash].js
,以及獨立的css
文件都會被打包到docs
文件夾。
source map *.[hash].map
會被自動生成。
能夠方便地直接使用docs
目錄做爲github pages
的資源目錄。
Vue-Donut
默認使用less
做爲預處理器,若是須要用其餘預處理器,能夠自定義配置。
測試同理。
MIT
在工做的過程當中,遇到了搭建UI組件庫的需求。開發不難,麻煩的是如何在項目中引入使用。首先咱們嘗試了使用git的submodule
方案,就是把UI組件庫直接做爲項目的子模塊使用。另一種方式,是把整個組件庫發佈到npm,而後在webpack.module.rules
的exclude
裏面經過正則或者函數的方式,使用項目的webpack配置去跑組件庫的代碼。這兩種方式都不那麼優雅,思考再三,最後決定搭個更加方便優雅的開發框架來。
在此以前,對於webpack的使用及配置僅處於「看得懂」的程度,但從未真正從頭開始搭過。在搭建的過程當中也遇到了很多坑,但經過查閱官方文檔大都能得到解決辦法,實在不行還有萬能的google和stackoverflow。搭的過程當中也參考了不少優秀的實踐,好比公司前輩的搭建方式,以及vue-cli官方出品的搭建方式等,搭完後對webpack的掌握也獲得了極大的提高。
但願這個做品可以發揮能效,也歡迎提出問題和建議和我交流~