亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue組件打包并發(fā)布到npm的全過程

 更新時(shí)間:2023年01月13日 15:36:38   作者:一塵不染的白  
這篇文章主要介紹了vue組件打包并發(fā)布到npm的全過程,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、創(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è)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解

    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-04
  • vue中$emit的用法詳解

    vue中$emit的用法詳解

    這篇文章主要介紹了vue中$emit的用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • vue3切換路由時(shí)頁面空白問題解決辦法

    vue3切換路由時(shí)頁面空白問題解決辦法

    在使用Vue3時(shí),有時(shí)頁面修改后會出現(xiàn)空白,這篇文章主要介紹了vue3切換路由時(shí)頁面空白問題解決辦法,文中介紹的步驟可以有效解決頁面空白問題,需要的朋友可以參考下
    2024-09-09
  • Vue虛擬Dom到真實(shí)Dom的轉(zhuǎn)換

    Vue虛擬Dom到真實(shí)Dom的轉(zhuǎn)換

    本文主要介紹了Vue虛擬Dom到真實(shí)Dom的轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-07-07
  • elementUI Tree 樹形控件的官方使用文檔

    elementUI Tree 樹形控件的官方使用文檔

    這篇文章主要介紹了elementUI Tree 樹形控件的官方使用文檔,用清晰的層級結(jié)構(gòu)展示信息,可展開或折疊。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-04-04
  • Vue3中setup方法的用法詳解

    Vue3中setup方法的用法詳解

    在vue3版本中,引入了一個(gè)新的函數(shù),叫做setup。這篇文章將為大家詳細(xì)介紹一下Vue3中setup方法的用法,感興趣小伙伴的可以了解一下
    2022-07-07
  • Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法

    Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法

    這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)帶樣式的單文件組件的新方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • Vue3從0搭建Vite打包組件庫使用詳解

    Vue3從0搭建Vite打包組件庫使用詳解

    這篇文章主要為大家介紹了Vue3從0搭建Vite打包組件庫使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • 如何使用sm4js進(jìn)行加密和國密sm4總結(jié)

    如何使用sm4js進(jìn)行加密和國密sm4總結(jié)

    近期由于公司項(xiàng)目的需要開始研究國密SM4加密,下面這篇文章主要給大家介紹了關(guān)于如何使用sm4js進(jìn)行加密和國密sm4的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • unplugin-svg-component優(yōu)雅使用svg圖標(biāo)指南

    unplugin-svg-component優(yōu)雅使用svg圖標(biāo)指南

    這篇文章主要為大家介紹了unplugin-svg-component優(yōu)雅使用svg圖標(biāo)指南,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03

最新評論