若是你也想寫個 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 打包

上個圖

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 發佈教程