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'; // 存儲組件列表 const components = [LemonUploads]; // 定義 install 方法,接收 Vue 作為參數(shù)。如果使用 use 注冊插件,則所有的組件都將被注冊 const install = function (Vue) { // 遍歷注冊全局組件 components.forEach((component) => { Vue.component(component.name, component); }); }; // 判斷是否是直接引入文件 if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } export default { // 導(dǎo)出的對象必須具有 install,才能被 Vue.use() 方法安裝 install, // 以下是具體的組件列表 LemonUploads, };
在組件項(xiàng)目中引入
main,js中添加如下:
// 導(dǎo)入組件庫 import LemonUploads from './../packages/lemonUploads/index' // 注冊組件庫 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è)參考,也希望大家多多支持腳本之家。
- Vue 組件封裝 并使用 NPM 發(fā)布的教程
- Vue cli3 庫模式搭建組件庫并發(fā)布到 npm的流程
- 詳解如何制作并發(fā)布一個(gè)vue的組件的npm包
- Vue.js構(gòu)建你的第一個(gè)包并在NPM上發(fā)布的方法步驟
- 自定義Vue組件打包、發(fā)布到npm及使用教程
- 一個(gè)vue組件庫發(fā)布到npm的完整實(shí)現(xiàn)過程
- vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
- vue使用npm發(fā)布自己的公網(wǎng)包
- vue組件發(fā)布成npm包
- vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn)
相關(guān)文章
vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
這篇文章主要介紹了vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js前后端數(shù)據(jù)交互相關(guān)的表單結(jié)構(gòu)、約束規(guī)則、數(shù)據(jù)提交等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-04-04Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)帶樣式的單文件組件的新方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05如何使用sm4js進(jìn)行加密和國密sm4總結(jié)
近期由于公司項(xiàng)目的需要開始研究國密SM4加密,下面這篇文章主要給大家介紹了關(guān)于如何使用sm4js進(jìn)行加密和國密sm4的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04unplugin-svg-component優(yōu)雅使用svg圖標(biāo)指南
這篇文章主要為大家介紹了unplugin-svg-component優(yōu)雅使用svg圖標(biāo)指南,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03