如果你也想寫個完整的 Vue 元件專案

你看上去很美味得樣子發表於2018-07-04
Vue元件

首先，這不是一篇技術文章，是一個籠統的 guide，關於寫一個元件的 guide，更是個廣告，目的是讓更多人用你的庫

最開始想要自己寫一個的時候，會想著去抄現有優秀庫的專案結構之類的，通常在這上面就會花不少時間，我們現在來挖掘下

1.一個完整的元件專案需要什麼？

必要的：

  • 元件構建方式 ( webpack / rollup 之類 )，並提供至少一個主流的輸出格式 (ESModule)
  • Demo 及 Demo 原始碼
  • 文件，可以是 docsify 之類的生成的頁面，懶點就內嵌在 README 裡了

其實上面的除了文件都比較容易做到，除了可能會在構建上踩坑外。那麼做到了這些可以上線了嗎？是的。不過看一些優秀的庫其實還可以做更多的，例如下面的這些：

有就更好了：

  • 一個清晰地 README.md
  • 提供多種構建方式 es/cjs/umd 等多種格式的包
  • 一個不醜的 Logo
  • 元件截圖（沒 *8 說個圖），有具體互動的最好還能是動圖
  • package.json 不要有多餘的 dependencies，儘量都在 peerDependencies 和 devDependencies 裡
  • 在 Readme 裡幾句話介紹清楚元件的功能

對的，以上幾條說起來很容易，就像寫公司內部系統時一樣，想要什麼什麼互動的想法很美好，但是身體力行總力不從心

時間很寶貴的，能用就行了嘛，要做好誰不會，我忙...

好了，寫這篇文章的目的來了

2.那麼，有沒有...

有沒有這樣一個模板可以直接拿來用，我只要關心怎麼寫元件就行了呢，那是當然啦！

vue-component-boilerplate 就是這樣一個致力於讓廣大人民群眾簡單點，寫元件專案更簡單 的點的倉庫，內含:

  • 元件、文件、demo 全方位一體，開箱即用
  • 優美的 Readme ，結構清晰實用！內聯摺疊格式的 API 文件
  • Vue 元件支援多種打包方式，採用 Bili 構建，基於 rollup，輸出 es/cjs/umd三種格式
  • Demo 採用 poi 打包

上個圖

如果你也想寫個完整的 Vue 元件專案

3.使用方法

# 克隆專案
git clone https://github.com/waynecz/vue-component-boilerplate.git example-name

cd example-name

# 刪除原來的 git 資訊
rm -rf .git
# git 到你自己的倉庫
git init && git remote add origin {your repo address}
# 安裝依賴
yarn
複製程式碼

  1. 將 package.json 內的一些必要資訊替換成你自己的

  2. 開始寫元件吧！！

    # 開發
npm run dev

# 元件打包
npm run build

# 打包 demo
npm run build:demo
複製程式碼

4.釋出元件

你都開發完後，需要釋出元件了，這裡貼個簡單的 npm 釋出教程

相關文章