如果你也想寫個 Vue 組件卻又苦于沒有好的項目模板

callmewhy 發布于2019-08-22 18:30 / 1422人閱讀

首先，這不是一篇技術文章，是一個籠統的 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

將 package.json 內的一些必要信息替換成你自己的

開始寫組件吧！！

# 開發
npm run dev

# 組件打包
npm run build

# 打包 demo
npm run build:demo

4.發布組件

你都開發完后，需要發布組件了，這里貼個簡單的 npm 發布教程

云服務器 GPU云服務器 vue組件如果沒有 vue組件開發 vue父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95933.html

新手自學前端的一些建議與總結

摘要：作為文科專業畢業，無名校背景，無任何關系，沒有接受過任何專業培訓，完全靠自學和看書看視頻做了五年前端，在外包公司，創業公司，級公司再到新型互聯網公司都呆過，想結合自己的經歷談談對于自學前端的一些看法學習大綱關于技術棧學習，網上總會有各種討論作為文科專業畢業，無名校背景，無任何關系，沒有接受過任何專業培訓，完全靠自學和看書看視頻做了五年前端，在外包公司，創業公司，BAT級公司再到新型互...

xfee 2019-08-21 11:27 評論0 收藏0
實例PK(Vue服務端渲染 VS Vue瀏覽器端渲染)

摘要：說起，其實早在出現之前，網頁就是在服務端渲染的。二服務器渲染如此快有部分原因來自，但是排除這部分，還是比瀏覽器端要快至少幾倍。當然，我們可以考慮首屏采用服務端渲染的方式，因為完全服務端渲染會考慮到很多問題，比如復雜均衡等等等 Vue 2.0 開始支持服務端渲染的功能，所以本文章也是基于vue 2.0以上版本。網上對于服務端渲染的資料還是比較少，最經典的莫過于Vue作者尤雨溪大神的 vu...

GeekGhc 2019-08-20 15:19 評論0 收藏0
Vue.js實現用戶登錄退出和e2e測試

摘要：前言本來只是想寫個實現登錄退出的例子的，但是又覺得這樣干貨太少。哈哈，不小心被嚇到了吧，其實這些都是有辦法可以解決的，下次有機會，我們可以再討論一下使用的正確姿勢。前言本來只是想寫個Vuet實現登錄退出的例子的，但是又覺得這樣干貨太少。一個好的開源項目，少不了單元測試和e2e測試，為了保證Vuet教程的豐富性和程序的穩定性，所以我選擇了寫的例子即能當教程使用，也可以用于測試，豐富的...

MycLambert 2019-08-21 11:45 評論0 收藏0
[ 學習路線 ] 2015 前端(JS)工程師必知必會 (2)

摘要：轉自前端外刊評論非常感謝，翻譯的很好，受益很多，轉到此處讓前端小伙伴們也驚呆下上次我寫前端工程師必知必會已經是三年前了，那是我寫過最火的文章了。測試的第二大障礙是工具。轉自：前端外刊評論非常感謝，翻譯的很好，受益很多，轉到此處讓前端小伙伴們也驚呆下........ 上次我寫《前端工程師必知必會》已經是三年前了，那是我寫過最火的文章了。三年了，我仍然會在Twitter上...

stefan 2019-08-28 18:10 評論0 收藏0
[ 學習路線 ] 2015 前端(JS)工程師必知必會 (2)

摘要：轉自前端外刊評論非常感謝，翻譯的很好，受益很多，轉到此處讓前端小伙伴們也驚呆下上次我寫前端工程師必知必會已經是三年前了，那是我寫過最火的文章了。測試的第二大障礙是工具。轉自：前端外刊評論非常感謝，翻譯的很好，受益很多，轉到此處讓前端小伙伴們也驚呆下........ 上次我寫《前端工程師必知必會》已經是三年前了，那是我寫過最火的文章了。三年了，我仍然會在Twitter上...

liaorio 2019-08-21 10:30 評論0 收藏0