目錄
??一、vue環(huán)境搭建
1、創(chuàng)建App.vue
2、修改main.ts
3、修改vite.config.ts
二、插件配置
1、創(chuàng)建插件
2、開(kāi)發(fā)調(diào)試
3、打包配置
4、package.json文件配置
5、執(zhí)行打包命令 pnpm build
6、修改index.d.ts
目錄
??一、vue環(huán)境搭建
1、創(chuàng)建App.vue
2、修改main.ts
3、修改vite.config.ts
二、插件配置
1、創(chuàng)建插件
2、開(kāi)發(fā)調(diào)試
3、打包配置
4、package.json文件配置
上一篇文章講述使用vite《如何使用vite框架封裝一個(gè)js庫(kù)，并發(fā)布npm包》封裝js庫(kù)，本文將講述使用vite框架封裝vue3插件?；经h(huán)境的搭建，參見(jiàn)《如何使用vite框架封裝一個(gè)js庫(kù)，并發(fā)布npm包》。如下圖所示，
??一、vue環(huán)境搭建
基本環(huán)境搭建好以后，開(kāi)始安裝開(kāi)發(fā)環(huán)境。注意，我們的目的是開(kāi)發(fā)vue插件，不是開(kāi)發(fā)vue項(xiàng)目。因此，vue的依賴應(yīng)該安裝在開(kāi)發(fā)環(huán)境當(dāng)中，而不是生產(chǎn)環(huán)境。命令行如下：
pnpm add vue@latest vue-tsc @vitejs/plugin-vue @types/node -D1、創(chuàng)建App.vue
安裝完成后，在src目錄下創(chuàng)建App.vue文件：
<script setup lang="ts">
//import { ref, reactive } from 'vue';
import typescriptLogo from './typescript.svg';
</script>
<template>
<div>
<a target="_blank">
<img src="./vite.svg" class="logo" alt="Vite logo" />
</a>
<a target="_blank">
<img
:src="`${typescriptLogo}`"
class="logo vanilla"
alt="TypeScript logo"
/>
</a>
<h1>Vite + TypeScript</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite and TypeScript logos to learn more
</p>
</div>
</template>
2、修改main.ts
修改src目錄下的main.ts文件：
import './style.css';
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
3、修改vite.config.ts
?修改vite.config.ts配置文件：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: resolve(__dirname, 'lib/main.ts'),
name: 'Counter',
fileName: 'counter'
}
},
server: {
host: '0.0.0.0',
port: 3100,
open: true,
strictPort: true
}
});
至此vue開(kāi)發(fā)環(huán)境就已經(jīng)配置好了，使用啟動(dòng)命令：
pnpm dev
?看到一以上配置，有些同學(xué)可能好奇，干嘛 這么麻煩，直接使用vite創(chuàng)建一個(gè)vue項(xiàng)目不就行了？直接使用vite創(chuàng)建一個(gè)vite項(xiàng)目也可以開(kāi)發(fā)vue插件。這里只是提供了一個(gè)方法開(kāi)發(fā)vue插件的方法，我在開(kāi)發(fā)vue插件的時(shí)候也是做個(gè)比較后，選擇使用library庫(kù)進(jìn)行開(kāi)發(fā)，并且個(gè)人認(rèn)為這比在vue項(xiàng)目當(dāng)中開(kāi)發(fā)插件更好，更快，更簡(jiǎn)潔。至于說(shuō)大家怎么選擇，仁者見(jiàn)仁智者見(jiàn)智，根據(jù)個(gè)人喜好來(lái)吧。
如果在開(kāi)發(fā)的時(shí)候希望代碼規(guī)范漂亮，可以選擇給插件配置prettier和eslint，安裝依賴命令如下：
pnpm add eslint @typescript-eslint/parser eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue prettier -D?prettier和eslint文件配置參見(jiàn)Vue3+Vite+TS+Eslint搭建生產(chǎn)項(xiàng)目最終版配置?，這些都不是必須得，可以選擇不用。
二、插件配置
1、創(chuàng)建插件
在src目錄下建立components，創(chuàng)建一個(gè)JsonExportExcel.vue文件：
<script setup lang="ts">
import { toRaw } from 'vue';
import { json2Excel } from '@/assets/utils';
const props = defineProps({
title: {
type: String,
default: () => 'file name'
},
jsonData: {
type: Array,
default: () => []
},
fields: {
type: Object,
default: () => {}
}
});
const { jsonData, fields, title } = toRaw(props);
const handleClick = () => {
json2Excel(jsonData, fields, title);
};
</script>
<script lang="ts">
export default {
name: 'JsonExportExcel' // 插件名稱
};
</script>
<template>
<button class="muk-btn primary" @click="handleClick">download</button>
</template>
<style scoped>
.muk-btn {
appearance: none;
border: none;
outline: none;
background: #fff;
text-align: center;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.large {
width: 240px;
height: 50px;
font-size: 16px;
}
.moddle {
width: 180px;
height: 50px;
font-size: 16px;
}
.small {
width: 100px;
height: 32px;
}
.mini {
width: 60px;
height: 32px;
}
.default {
border-color: #e4e4e4;
color: #666;
}
.primary {
border-color: rgb(104, 72, 199);
background: rgb(120, 97, 183);
color: #fff;
}
.plain {
border-color: skyblue;
color: skyblue;
background: lighten(skyblue, 50%);
}
.gray {
border-color: #ccc;
background: #ccc;
color: #fff;
}
</style>
2、開(kāi)發(fā)調(diào)試
在lib文件目錄下引入JsonExportExcel.vue，然后開(kāi)發(fā)調(diào)試JsonExportExcel.vue組件，lib/main.ts文件：
import ExcelExportJson from '../src/components/ExcelExportJson.vue';
import JsonExportExcel from '../src/components/JsonExportExcel.vue';
// 按需引入
export { ExcelExportJson, JsonExportExcel };
const components = [ExcelExportJson, JsonExportExcel];
// 批量組件注冊(cè)
const install = {
install(App: any) {
components.forEach((item) => {
console.log('?? ~ components.forEach ~ item:', item);
App.component(item.name, item);
});
}
};
export default install;
3、打包配置
在vue.config.ts當(dāng)中配置文件打包：
?安裝vite-plugin-dts,此插件的作用：為打包的庫(kù)里加入聲明文件(即生成：.d.ts文件)?
pnpm add vite-plugin-dts -D
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import dts from 'vite-plugin-dts';
import viteCompression from 'vite-plugin-compression';
export default ({ mode, command }) => {
console.log('?? ~ command:', command);
console.log('?? ~ mode:', mode);
return defineConfig({
plugins: [
vue(),
dts(),
viteCompression({
verbose: true,
disable: false, // 不禁用壓縮
deleteOriginFile: false, // 壓縮后是否刪除原文件
threshold: 10240, // 壓縮前最小文件大小
algorithm: 'gzip', // 壓縮算法
ext: '.gz' // 文件類型
})
],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
},
build: {
minify: 'esbuild',
sourcemap: true,
lib: {
entry: resolve(__dirname, 'lib/main.ts'),
name: 'vue3ExcelJson',
fileName: (format) => `vue3-excel-json.${format}.js`
},
rollupOptions: {
external: ['vue', 'xlsx'],
output: {
globals: {
vue: 'Vue',
xlsx: 'Xlsx'
}
}
}
},
esbuild: {
drop: mode === 'production' ? ['console', 'debugger'] : []
},
server: {
host: '0.0.0.0',
port: 3100,
open: true,
strictPort: true
}
});
};
4、package.json文件配置
{
"name": "vue3-excel-json",
"version": "1.0.5",
"description": "Based on Vue3 plugin, quickly implement the function of uploading Excel to JSON, importing JSON, and exporting Excel",
"type": "module",
"files": [
"dist",
"index.d.ts"
],
"main": "./dist/vue3-excel-json.umd.js",
"module": "./dist/vue3-excel-json.es.js",
"style": "./dist/style.css",
"types": "./index.d.ts",
"exports": {
".": {
"types": "./index.d.ts",
"import": "./dist/vue3-excel-json.es.js",
"require": "./dist/vue3-excel-json.umd.js"
},
"./dist/style.css": {
"import": "./dist/style.css",
"require": "./dist/style.css"
}
},
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build"
},
"keywords": [
"excel",
"json",
"export",
"excel json"
],
"author": "patton",
"license": "ISC",
"repository": {
"type": "git",
"url": "https://github.com/renleiabc/vue3-excel-json.git"
},
"bugs": {
"url": "https://github.com/renleiabc/vue3-excel-json/issues"
},
"devDependencies": {
"@types/node": "^20.11.0",
"@typescript-eslint/parser": "^6.18.1",
"@vitejs/plugin-vue": "^5.0.3",
"eslint": "^8.56.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-vue": "^9.20.0",
"prettier": "^3.1.1",
"sass": "^1.69.7",
"typescript": "^5.3.3",
"vite": "^5.0.10",
"vue": "^3.4.10",
"vue-tsc": "^1.8.27"
},
"dependencies": {
"xlsx": "^0.18.5"
}
}
5、執(zhí)行打包命令 pnpm build
生成目錄如下：
?
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-798091.html
6、修改index.d.ts
import type { App } from 'vue';
export interface InstallOptions {
/** @default `ElIcon` */
prefix?: string;
}
// eslint-disable-next-line no-unused-vars
declare const _default: (app: App, { prefix }?: InstallOptions) => void;
export default _default;
export { default as ExcelExportJson } from './dist/src/components/ExcelExportJson.vue';
export { default as JsonExportExcel } from './dist/src/components/JsonExportExcel.vue';
配置號(hào)以后，就可以登錄npm發(fā)布，Github代碼倉(cāng)庫(kù)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-798091.html
到了這里，關(guān)于使用vite框架封裝vue3插件，發(fā)布到npm的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
