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

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

packages/lemonUploads/index.js 添加以下代碼
// 導入組件,組件必須聲明 name
import LemonUploads from './index.vue';
// 為組件提供 install 安裝方法,供按需引入
LemonUploads.install = function(Vue) {
Vue.component(LemonUploads.name, LemonUploads);
};
// 默認導出組件
export default LemonUploads;將packages中的所有組件導出
packages下新建 index.js 并添加
// 導入組件
import LemonUploads from './lemonUploads/index';
// 存儲組件列表
const components = [LemonUploads];
// 定義 install 方法,接收 Vue 作為參數。如果使用 use 注冊插件,則所有的組件都將被注冊
const install = function (Vue) {
// 遍歷注冊全局組件
components.forEach((component) => {
Vue.component(component.name, component);
});
};
// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
// 導出的對象必須具有 install,才能被 Vue.use() 方法安裝
install,
// 以下是具體的組件列表
LemonUploads,
};
在組件項目中引入
main,js中添加如下:
// 導入組件庫
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
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue中addEventListener()?監(jiān)聽事件案例講解
這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽事件案例講解,包括語法講解和事件冒泡或事件捕獲的相關知識,本文結合示例代碼給大家講解的非常詳細,需要的朋友可以參考下2022-12-12
vue3簡單封裝input組件和統(tǒng)一表單數據詳解
最近有一個需求是很多個表單添加,編輯等操作,會用到很多input輸入框,所以就想把input進行簡單封裝,這篇文章主要給大家介紹了關于vue3簡單封裝input組件和統(tǒng)一表單數據的相關資料,需要的朋友可以參考下2022-05-05

