Vue-Donut——專用於構建Vue的UI組件庫的開發框架

寫於 2017.05.04

相信很多使用Vue的開發者和公司都有定製一套屬於本身的UI組件庫的需求。可是要開發、測試、打包、發佈這個組件庫，卻須要耗費較大的勞動力去搭建一整套的環境。針對這個問題，我搭建了一個專門用來構建Vue的UI組件庫的開發框架，以節省搭建環境的勞動力，專心於組件庫的開發。

1、介紹

項目地址：github.com/jrainlau/vu…

Vue-Donut是一個開發框架，配合vue-cli使用。因此首先保證全局安裝有vue-cli。接下來就能夠初始化咱們的項目了：

vue init jrainlau/vue-donut <項目名>
複製代碼

相似官方的vuejs-templates/webpack模板，Vue-Donut也容許用戶進行一些配置。在配置完成後則會生成你的組件庫目錄。值得注意的是，這個組件庫最終發佈的名字也是你所自定義的項目名（固然這些都是能夠修改的）。

接下來按照提示，進入項目目錄後，經過yarn命令下載所需依賴包便可開始使用。

目錄結構以下：

.
├── 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
複製代碼

2、命令

• yarn run dev：開發模式

  • 經過webpack-dev-server開啓一個測試服務器，就和官方的vuejs-templates/webpack模板裏面的同樣。

• yarn run build：打包及發佈模式

  • 這個命令會以src/components/index.js爲入口文件，經過webpack構建後產出到dist目錄。
  • 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的資源目錄。

3、注意事項

Vue-Donut默認使用less做爲預處理器，若是須要用其餘預處理器，能夠自定義配置。

測試同理。

4、證書

MIT

一些碎碎念

在工做的過程當中，遇到了搭建UI組件庫的需求。開發不難，麻煩的是如何在項目中引入使用。首先咱們嘗試了使用git的submodule方案，就是把UI組件庫直接做爲項目的子模塊使用。另一種方式，是把整個組件庫發佈到npm，而後在webpack.module.rules的exclude裏面經過正則或者函數的方式，使用項目的webpack配置去跑組件庫的代碼。這兩種方式都不那麼優雅，思考再三，最後決定搭個更加方便優雅的開發框架來。

在此以前，對於webpack的使用及配置僅處於「看得懂」的程度，但從未真正從頭開始搭過。在搭建的過程當中也遇到了很多坑，但經過查閱官方文檔大都能得到解決辦法，實在不行還有萬能的google和stackoverflow。搭的過程當中也參考了不少優秀的實踐，好比公司前輩的搭建方式，以及vue-cli官方出品的搭建方式等，搭完後對webpack的掌握也獲得了極大的提高。

但願這個做品可以發揮能效，也歡迎提出問題和建議和我交流~