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