成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如果你也想寫個(gè) Vue 組件卻又苦于沒有好的項(xiàng)目模板

callmewhy / 1429人閱讀


首先，這不是一篇技術(shù)文章，是一個(gè)籠統(tǒng)的 guide，關(guān)于寫一個(gè)組件的 guide，更是個(gè)廣告，目的是讓更多人用你的庫(kù)

最開始想要自己寫一個(gè)的時(shí)候，會(huì)想著去抄現(xiàn)有優(yōu)秀庫(kù)的項(xiàng)目結(jié)構(gòu)之類的，通常在這上面就會(huì)花不少時(shí)間，我們現(xiàn)在來挖掘下

1.一個(gè)完整的組件項(xiàng)目需要什么？ 必要的：

組件構(gòu)建方式 ( webpack / rollup 之類 )，并提供至少一個(gè)主流的輸出格式 (ESModule)

Demo 及 Demo 源碼

文檔，可以是 docsify 之類的生成的頁(yè)面，懶點(diǎn)就內(nèi)嵌在 README 里了

其實(shí)上面的除了文檔都比較容易做到，除了可能會(huì)在構(gòu)建上踩坑外。那么做到了這些可以上線了嗎？是的。不過看一些優(yōu)秀的庫(kù)其實(shí)還可以做更多的，例如下面的這些：

有就更好了：

一個(gè)清晰地 README.md

提供多種構(gòu)建方式 es/cjs/umd 等多種格式的包

一個(gè)不丑的 Logo

組件截圖（沒 *8 說個(gè)圖），有具體交互的最好還能是動(dòng)圖

package.json 不要有多余的 dependencies，盡量都在 peerDependencies 和 devDependencies 里

在 Readme 里幾句話介紹清楚組件的功能

對(duì)的，以上幾條說起來很容易，就像寫公司內(nèi)部系統(tǒng)時(shí)一樣，想要什么什么交互的想法很美好，但是身體力行總力不從心

時(shí)間很寶貴的，能用就行了嘛，要做好誰不會(huì)，我忙...

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

2.那么，有沒有...

有沒有這樣一個(gè)模板可以直接拿來用，我只要關(guān)心怎么寫組件就行了呢，那是當(dāng)然啦！

vue-component-boilerplate 就是這樣一個(gè)致力于讓廣大人民群眾簡(jiǎn)單點(diǎn)，寫組件項(xiàng)目更簡(jiǎn)單 的點(diǎn)的倉(cāng)庫(kù)，內(nèi)含:

組件、文檔、demo 全方位一體，開箱即用

優(yōu)美的 Readme ，結(jié)構(gòu)清晰實(shí)用！內(nèi)聯(lián)折疊格式的 API 文檔

Vue 組件支持多種打包方式，采用 Bili 構(gòu)建，基于 rollup，輸出 es/cjs/umd三種格式

Demo 采用 poi 打包

上個(gè)圖

3.使用方法 
# 克隆項(xiàng)目
git clone https://github.com/waynecz/vue-component-boilerplate.git example-name

cd example-name

# 刪除原來的 git 信息
rm -rf .git
# git 到你自己的倉(cāng)庫(kù)
git init && git remote add origin {your repo address}
# 安裝依賴
yarn

將 package.json 內(nèi)的一些必要信息替換成你自己的

開始寫組件吧！！

# 開發(fā)
npm run dev

# 組件打包
npm run build

# 打包 demo
npm run build:demo

4.發(fā)布組件

你都開發(fā)完后，需要發(fā)布組件了，這里貼個(gè)簡(jiǎn)單的 npm 發(fā)布教程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95933.html

相關(guān)文章

  • 新手自學(xué)前端的一些建議與總結(jié)

    摘要：作為文科專業(yè)畢業(yè)，無名校背景，無任何關(guān)系，沒有接受過任何專業(yè)培訓(xùn)，完全靠自學(xué)和看書看視頻做了五年前端，在外包公司，創(chuàng)業(yè)公司，級(jí)公司再到新型互聯(lián)網(wǎng)公司都呆過，想結(jié)合自己的經(jīng)歷談?wù)剬?duì)于自學(xué)前端的一些看法學(xué)習(xí)大綱關(guān)于技術(shù)棧學(xué)習(xí)，網(wǎng)上總會(huì)有各種討論 作為文科專業(yè)畢業(yè)，無名校背景，無任何關(guān)系，沒有接受過任何專業(yè)培訓(xùn)，完全靠自學(xué)和看書看視頻做了五年前端，在外包公司，創(chuàng)業(yè)公司，BAT級(jí)公司再到新型互...

    xfee 評(píng)論0 收藏0

  • 實(shí)例PK(Vue服務(wù)端渲染 VS Vue瀏覽器端渲染)

    摘要：說起，其實(shí)早在出現(xiàn)之前，網(wǎng)頁(yè)就是在服務(wù)端渲染的。二服務(wù)器渲染如此快有部分原因來自，但是排除這部分，還是比瀏覽器端要快至少幾倍。當(dāng)然，我們可以考慮首屏采用服務(wù)端渲染的方式，因?yàn)橥耆?wù)端渲染會(huì)考慮到很多問題，比如復(fù)雜均衡等等等 Vue 2.0 開始支持服務(wù)端渲染的功能，所以本文章也是基于vue 2.0以上版本。網(wǎng)上對(duì)于服務(wù)端渲染的資料還是比較少，最經(jīng)典的莫過于Vue作者尤雨溪大神的 vu...

    GeekGhc 評(píng)論0 收藏0

  • Vue.js實(shí)現(xiàn)用戶登錄退出和e2e測(cè)試

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

    MycLambert 評(píng)論0 收藏0

  • [ 學(xué)習(xí)路線 ] 2015 前端(JS)工程師必知必會(huì) (2)

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

    stefan 評(píng)論0 收藏0

  • [ 學(xué)習(xí)路線 ] 2015 前端(JS)工程師必知必會(huì) (2)

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

    liaorio 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<