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

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

 更新時(shí)間:2023年01月13日 15:36:38   作者:一塵不染的白  
這篇文章主要介紹了vue組件打包并發(fā)布到npm的全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(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';
 
// 存儲(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)文章

  • Vue組件懶加載的操作代碼

    Vue組件懶加載的操作代碼

    在本文中,我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見時(shí)對(duì)其進(jìn)行懶加載,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友一起看看吧
    2023-09-09
  • VSCode搭建Vue項(xiàng)目的方法

    VSCode搭建Vue項(xiàng)目的方法

    這篇文章主要介紹了VSCode搭建Vue項(xiàng)目的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • 詳解vue3中虛擬列表組件的實(shí)現(xiàn)

    詳解vue3中虛擬列表組件的實(shí)現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了vue3中實(shí)現(xiàn)虛擬列表組件的相關(guān)知識(shí),包含加載更多以及l(fā)oading狀態(tài),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
    2023-10-10
  • 如何利用vue3實(shí)現(xiàn)一個(gè)俄羅斯方塊

    如何利用vue3實(shí)現(xiàn)一個(gè)俄羅斯方塊

    俄羅斯方塊這個(gè)游戲相信大家都玩過,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)一個(gè)俄羅斯方塊的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-01-01
  • 詳解vue-resource promise兼容性問題

    詳解vue-resource promise兼容性問題

    這篇文章主要介紹了詳解vue-resource promise兼容性問題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • Vue3+Elementplus實(shí)現(xiàn)面包屑功能

    Vue3+Elementplus實(shí)現(xiàn)面包屑功能

    這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下
    2023-11-11
  • vue實(shí)現(xiàn)橫向時(shí)間軸

    vue實(shí)現(xiàn)橫向時(shí)間軸

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)橫向時(shí)間軸,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • Vue中addEventListener()?監(jiān)聽事件案例講解

    Vue中addEventListener()?監(jiān)聽事件案例講解

    這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽事件案例講解,包括語法講解和事件冒泡或事件捕獲的相關(guān)知識(shí),本文結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • vue3簡(jiǎn)單封裝input組件和統(tǒng)一表單數(shù)據(jù)詳解

    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
  • vue+echart實(shí)現(xiàn)圓滑折線圖

    vue+echart實(shí)現(xiàn)圓滑折線圖

    這篇文章主要為大家詳細(xì)介紹了vue+echart實(shí)現(xiàn)圓滑折線圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04

最新評(píng)論