亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

callmewhy / 1507人閱讀


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

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

1.一個完整的組件項目需要什么？ 必要的：

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

Demo 及 Demo 源碼

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

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

有就更好了：

一個清晰地 README.md

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

一個不丑的 Logo

組件截圖（沒 *8 說個圖），有具體交互的最好還能是動圖

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

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

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

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

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

2.那么，有沒有...

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

vue-component-boilerplate 就是這樣一個致力于讓廣大人民群眾簡單點(diǎn)，寫組件項目更簡單 的點(diǎn)的倉庫，內(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 打包

上個圖

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 內(nèi)的一些必要信息替換成你自己的

開始寫組件吧?。?/p> 

# 開發(fā)
npm run dev

# 組件打包
npm run build

# 打包 demo
npm run build:demo

4.發(fā)布組件

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95933.html

相關(guān)文章

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

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

    xfee 評論0 收藏0

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

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

    GeekGhc 評論0 收藏0

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

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

    MycLambert 評論0 收藏0

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

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

    stefan 評論0 收藏0

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

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

    liaorio 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<