Vue組件庫(kù)發(fā)布到npm詳解
制作了一套自己的組件庫(kù)，并發(fā)布到npm上，項(xiàng)目代碼見(jiàn)https://github.com/hamger/hg-vcomponents
前期準(zhǔn)備
- 有一個(gè)npm賬號(hào)
- 安裝了vue-cli
搭建項(xiàng)目
vue init webpack hg-vcomponents cd hg-vcomponents cnpm install
目錄結(jié)構(gòu)
- vue-flag-list
+ build
+ dist // 存放發(fā)布到npm的代碼
- src
- components // 存放組件源代碼 和 README.md
- arrows
arrows.vue
README.md
- round
round.vue
README.md
index.js // 組件導(dǎo)出文件
- examples // 存放組件的 demo
arrows.vue
round.vue
index.vue // 組件 demo 的入口
- router
index.js // 引入 examples 下的組件，并配置路由
App.vue
main.js
...
內(nèi)部代碼詳見(jiàn) GitHub，如果對(duì)你有所幫助，給個(gè)star吧 。
項(xiàng)目配置
為了使項(xiàng)目能上傳到npm上，需要配置一些地方。
build/webpack.base.conf.js
entry: {
app: process.env.NODE_ENV === 'production'
? './src/components/index.js' // 生產(chǎn)模式下導(dǎo)入文件
: './src/main.js' // 開(kāi)發(fā)模式下導(dǎo)入文件
},
package.json
"private": false, // 因?yàn)榻M件包是公用的，所以 private 為 false "main": "dist/hg-vcomponents.min.js", // 導(dǎo)出文件名，即 import 引入的文件
.gitignore
dist文件夾下文件是要導(dǎo)出的文件，所以在.gitignore文件中把dist/去掉，這樣上傳代碼的時(shí)候也會(huì)更新打包后的文件。
開(kāi)發(fā)與生產(chǎn)
由于配置了webpack.base.conf.js，使得項(xiàng)目的開(kāi)發(fā)與生產(chǎn)獨(dú)立開(kāi)來(lái)。
使用npm run dev進(jìn)入開(kāi)發(fā)環(huán)境，就可以看到組件的demo，方便調(diào)試。使用npm run build打包組件庫(kù)。
發(fā)布到npm
在你登錄了npm的情況下，在根目錄輸入命令行(每次更新代碼執(zhí)行同樣操作)
npm version patch npm publish
大功告成！現(xiàn)在你可以在其他地方使用npm install hg-vconponents下載自己寫(xiě)的組件庫(kù)了。
相關(guān)文章
Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格鏈接頁(yè)面跳轉(zhuǎn)和路由效果
這篇文章主要介紹了Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格中鏈接進(jìn)行頁(yè)面跳轉(zhuǎn)和路由,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
vue3+vite+ts?通過(guò)svg-sprite-loader?插件使用自定義圖標(biāo)的詳細(xì)步驟
這篇文章主要介紹了vue3+vite+ts通過(guò)svg-sprite-loader插件使用自定義圖標(biāo),本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫(xiě)鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)題，就是本篇要探討的主要問(wèn)題，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
mpvue是一個(gè)使用Vue.js開(kāi)發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了Vue3中自定義指令的實(shí)踐，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以了解一下2023-06-06
這篇文章主要介紹了Vue3之修改端口號(hào)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案
這篇文章主要介紹了詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
最近在做一個(gè)前端vue.js對(duì)接的功能模塊時(shí)，需要實(shí)現(xiàn)一個(gè)下載圖片的功能，本文就介紹了vue.js根據(jù)圖片url進(jìn)行圖片下載，感興趣的可以了解一下2021-06-06
Vue3 Vant組件庫(kù)使用過(guò)程中的避坑點(diǎn)
本片文章主要寫(xiě)了，Vue3開(kāi)發(fā)時(shí)運(yùn)用Vant UI庫(kù)的一些避坑點(diǎn)。讓有問(wèn)題的小伙伴可以快速了解是為什么。也是給自己做一個(gè)記錄2023-04-04
el-form 多層級(jí)表單的實(shí)現(xiàn)示例
這篇文章主要介紹了el-form 多層級(jí)表單的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09