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

Jrain發表於2019-03-04
VueUI元件框架

寫於 2017.05.04

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

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

一、介紹

專案地址：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
複製程式碼

二、命令

  • 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的資源目錄。

三、注意事項

Vue-Donut預設使用less作為前處理器，如果需要用其他前處理器，可以自定義配置。

測試同理。

四、證書

MIT

一些碎碎念

在工作的過程中，遇到了搭建UI元件庫的需求。開發不難，麻煩的是如何在專案中引入使用。首先我們嘗試了使用git的submodule方案，就是把UI元件庫直接作為專案的子模組使用。另外一種方式，是把整個元件庫釋出到npm，然後在webpack.module.rules的exclude裡面通過正則或者函式的方式，使用專案的webpack配置去跑元件庫的程式碼。這兩種方式都不那麼優雅，思考再三，最後決定搭個更加方便優雅的開發框架來。

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

希望這個作品能夠發揮能效，也歡迎提出問題和建議和我交流~

相關文章