vue組件打包并發(fā)布到npm的全過程
一、創(chuàng)建項(xiàng)目
vue create 項(xiàng)目名稱
二、配置相關(guān)文件
1.修改文件名
src目錄更改為-examples // 改成 examples 用作示例展示
新增 packages 用于編寫存放組件

2.根目錄下新建 vue.config.js文件
因?yàn)?strong>src 目錄更名為 examples ,導(dǎo)致項(xiàng)目無法運(yùn)行
在 vue.config.js 添加以下配置
module.exports = {
? pages: {
? ? index: {
? ? ? entry: "examples/main.js",
? ? ? template: "public/index.html",
? ? ? filename: "index.html"
? ? }
? }
}然后就可以在 packages 新建組件了
例如以下截圖

packages/lemonUploads/index.js 添加以下代碼
// 導(dǎo)入組件,組件必須聲明 name
import LemonUploads from './index.vue';
// 為組件提供 install 安裝方法,供按需引入
LemonUploads.install = function(Vue) {
Vue.component(LemonUploads.name, LemonUploads);
};
// 默認(rèn)導(dǎo)出組件
export default LemonUploads;將packages中的所有組件導(dǎo)出
packages下新建 index.js 并添加
// 導(dǎo)入組件
import LemonUploads from './lemonUploads/index';
// 存儲(chǔ)組件列表
const components = [LemonUploads];
// 定義 install 方法,接收 Vue 作為參數(shù)。如果使用 use 注冊(cè)插件,則所有的組件都將被注冊(cè)
const install = function (Vue) {
// 遍歷注冊(cè)全局組件
components.forEach((component) => {
Vue.component(component.name, component);
});
};
// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
// 導(dǎo)出的對(duì)象必須具有 install,才能被 Vue.use() 方法安裝
install,
// 以下是具體的組件列表
LemonUploads,
};
在組件項(xiàng)目中引入
main,js中添加如下:
// 導(dǎo)入組件庫
import LemonUploads from './../packages/lemonUploads/index'
// 注冊(cè)組件庫
app.use(Antd)
app.use(LemonUploads)
app.mount('#app')3.發(fā)布到npm
1)更改配置文件-package.json
"name": "lemon-upload", "version": "1.8.42", "private": false, "keyword": "上傳文件 vue antdesign upload", "description": "基于vue3.x+antdesign的文件上傳組件", "author": "LemonSong", "main": "",
2)更改打包編譯方式
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name lemonUploads --dest lib packages/index.js"
},3)新增.npmignore文件 寫入一些不必要上傳的文件名稱
.DS_Store node_modules/ examples/ public/ packages/ vue.config.js babel.config.js *.map *.html # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw*
4)打包編譯
npm run lib
5)發(fā)布npm
登錄npm
npm login
發(fā)布命令
npm publish
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
如何利用vue3實(shí)現(xiàn)一個(gè)俄羅斯方塊
俄羅斯方塊這個(gè)游戲相信大家都玩過,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)一個(gè)俄羅斯方塊的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
Vue3+Elementplus實(shí)現(xiàn)面包屑功能
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-11-11
Vue中addEventListener()?監(jiān)聽事件案例講解
這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽事件案例講解,包括語法講解和事件冒泡或事件捕獲的相關(guān)知識(shí),本文結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue3簡(jiǎn)單封裝input組件和統(tǒng)一表單數(shù)據(jù)詳解
最近有一個(gè)需求是很多個(gè)表單添加,編輯等操作,會(huì)用到很多input輸入框,所以就想把input進(jìn)行簡(jiǎn)單封裝,這篇文章主要給大家介紹了關(guān)于vue3簡(jiǎn)單封裝input組件和統(tǒng)一表單數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-05-05

