vue組件發(fā)布成npm包
前言
工作中多個項目用到了同一個組件，每次修復(fù)bug或者增加新功能后都需要同步更新每個項目的代碼，然后想到可以通過發(fā)布成npm包的形式來實現(xiàn)代碼統(tǒng)一。此文以蘋果電腦為例，如果是windows系統(tǒng)，可能略有差別。
一、環(huán)境準(zhǔn)備
1.首先最基本的需要安裝nodejs，版本推薦 v10 以上，因為需要安裝vue-cli
2.安裝vue-cli
npm install -g @vue/cli
可能會報錯，如下：
這是因為沒有權(quán)限，重新執(zhí)行如下命令：
sudo npm install -g @vue/cli
輸入密碼，按回車即可
二、初始化項目
1.構(gòu)建項目
vue create vue-link-demo
這里可以選擇vue2或者vue3，我這里選擇的vue3
構(gòu)建完成后的目錄如下：
2.開發(fā)組件/加入組件
可以將已經(jīng)編寫好的組件移動到components目錄下，或者新建一個vue組件，步驟是一樣的。
例如我這里新建了一個HelloWorld.vue組件，需要注意的是，組件必須有name，這將會是用戶使用的組件名稱
然后修改App.vue
運行項目npm run serve，可以看到正常運行
最后一步，增加在src文件夾下新建index.js文件
// src/index.js
import HellowWorld from '@/components/HellowWorld.vue';
// 將引入的組件模塊存儲，如果是組件庫，則在這里引入多個組件即可
const components = [ HellowWorld ];
const install = (Vue,options) => {
if (install.installed) return;
install.installed = true
components.forEach(component => {
// 這里可以看出，為什么上文強調(diào)組件必須有name
Vue.component(component.name, component)
})
}
// 如果是直接引入的vue.js方式，則會掛到window下
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 使用Vue.use必須具有install方法
// https://cn.vuejs.org/v2/api/#Vue-use
install,
...components
}
3. 修改配置文件
將項目根目錄下的package.json文件：
1. scripts修改start和build命令：
```c
"scripts": {
"serve": "vue-cli-service serve",
"start": "vue-cli-service build --target lib --name vue-link-demo --dest lib src/index.js --watch",
"build": "vue-cli-service build --target lib --name vue-link-demo --dest lib src/index.js",
"build:app": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
這里的–target lib是 vue-cli 自帶的打包命令，此命令會將入口文件打包成一個庫碼，具體可參考官網(wǎng)說明vue-cli官方文檔–name 指的是打包后的文件名
–dest 指文件夾的名稱
緊跟的src/index.js 指的是執(zhí)行上文新建的index文件，暴露install方法
執(zhí)行命令
npm run start
執(zhí)行成功之后會在項目根目錄增加lib文件夾：
如果組件庫過大，可能會報錯:allocation failure scavenge might not succeed。可以通過關(guān)閉內(nèi)聯(lián)css(下文有介紹)或者修改--max_old_space_size=10000（可自行百度）嘗試解決
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 為false則強制內(nèi)聯(lián)，區(qū)別是最終lib文件夾中不會生成單獨的css文件
// 設(shè)置為true，則不會內(nèi)聯(lián)css,最紅lib文件如上圖會有單獨的css文件生成，用戶使用組件包時需要在main.js中手動引入：import 'vue-libs-demo/lib/vue-libs-demo.css'
css: { extract: true }
})
- 修改package.json文件中main配置項——外部訪問項目包的入口文件；
// 最終lib文件夾生成的umd.js "main": "lib/vue-link-demo.umd.js"
三、調(diào)試
1、執(zhí)行打包命令
// 開發(fā)環(huán)境執(zhí)行 npm run start // 正式發(fā)布執(zhí)行 npm run build
2、發(fā)布本地連接包
npm link
3、測試項目
按上面構(gòu)建項目的步驟重新新建一個項目用于測試（或者用隨便一個就項目都行），然后在測試項目的目錄終端執(zhí)行
npm link vue-link-demo
然后修改測試項目的main.js:
import olMap from 'ol-map-vue'
import 'ol-map-vue/lib/ol-map.css'
const app = createApp(App)
app.use(olMap)
app.mount('#app')
// 如果為vue2寫法略有不同哦
在App.vue中使用：
<template>
<div class="container">
<HelloWorld msg="測試組件" />
</div>
</template>
然后運行項目
npm run serve
四、發(fā)布使用
測試沒問題后就可以發(fā)布到nodejs了
1、注冊
注冊npm賬號 點擊注冊
2、本地登陸
按步驟注冊完成以后，打開命令行工具，并定位到項目目錄
中間會需要輸入用戶名、密碼、郵箱、郵箱驗證碼
如果中間出錯的話，可能是由于設(shè)置了淘寶鏡像，重新設(shè)置一下即可：
npm config set registry https://registry.npmjs.org/
3、發(fā)布
執(zhí)行命令
npm publish
顯示正在發(fā)布中。
可能會報錯如下，是由于命名沖突了：
驗證是否是由于命名問題導(dǎo)致的，可以執(zhí)行命令：
npm view react
果不其然，修改名稱即可。修改完后重新發(fā)布npm publish
最后一行出現(xiàn) +包名@版本號 即表示發(fā)布成功了
登陸npmjs，可以看到發(fā)布成功了。
4.使用
在測試項目中卸載連接包
npm unlink vue-link-demo
然后安裝發(fā)布成功的包
npm install vue-link-demo --save
最后運行
npm run serve
可以正確顯示即表示成功。
中間可能會出現(xiàn)一些問題，但是如果按照文章的步驟來，流程應(yīng)該是沒錯的，可以排查一下代碼錯誤。
到此這篇關(guān)于vue組件發(fā)布成npm包的文章就介紹到這了,更多相關(guān)vue發(fā)布成npm包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue綁定設(shè)置屬性的多種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue-cli3腳手架安裝方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
Vue.js設(shè)計與實現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計與實現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
最近一直在做 Vue項目代碼層面上的優(yōu)化，寫文章是很easy的事情，今天小編給大家分享Vue.js 父子組件通信的十種方式，感興趣的的朋友跟隨小編一起看看吧2018-10-10
這篇文章主要介紹了vue input實現(xiàn)點擊按鈕文字增刪功能,涉及基于vue.js的事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了vue中的循環(huán)遍歷對象、數(shù)組和字符串，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue背景圖片路徑問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue獲取dom元素注意事項及vue獲取dom元素的內(nèi)容,需要的朋友可以參考下2017-12-12
Vue路由可以幫助你在單頁應(yīng)用中管理應(yīng)用的不同頁面和頁面間的跳轉(zhuǎn),通過Vue路由,你可以實現(xiàn)頁面的動態(tài)切換和無刷新加載,提升用戶體驗和頁面性能,今天就來分享下Vue中實現(xiàn)路由跳轉(zhuǎn)的多種方式,總有一種適合你2025-07-07
vue-cli的index.html中使用環(huán)境變量方式
這篇文章主要介紹了vue-cli的index.html中使用環(huán)境變量方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10