使用vite框架封装vue3插件,发布到npm

目录

  一、vue环境搭建

1、创建App.vue

2、修改main.ts

3、修改vite.config.ts

二、插件配置

1、创建插件

2、开发调试

3、打包配置

4、package.json文件配置

5、执行打包命令 pnpm build

6、修改index.d.ts


目录

  一、vue环境搭建

1、创建App.vue

2、修改main.ts

3、修改vite.config.ts

二、插件配置

1、创建插件

2、开发调试

3、打包配置

4、package.json文件配置


上一篇文章讲述使用vite《如何使用vite框架封装一个js库,并发布npm包》封装js库,本文将讲述使用vite框架封装vue3插件。基本环境的搭建,参见《如何使用vite框架封装一个js库,并发布npm包》。如下图所示,

  一、vue环境搭建

基本环境搭建好以后,开始安装开发环境。注意,我们的目的是开发vue插件,不是开发vue项目。因此,vue的依赖应该安装在开发环境当中,而不是生产环境。命令行如下:

pnpm add vue@latest vue-tsc @vitejs/plugin-vue  @types/node -D

1、创建App.vue

安装完成后,在src目录下创建App.vue文件:

<script setup lang="ts">
//import { ref, reactive } from 'vue';
import typescriptLogo from './typescript.svg';
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="./vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" 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开发环境就已经配置好了,使用启动命令:

pnpm dev

 看到一以上配置,有些同学可能好奇,干嘛 这么麻烦,直接使用vite创建一个vue项目不就行了?直接使用vite创建一个vite项目也可以开发vue插件。这里只是提供了一个方法开发vue插件的方法,我在开发vue插件的时候也是做个比较后,选择使用library库进行开发,并且个人认为这比在vue项目当中开发插件更好,更快,更简洁。至于说大家怎么选择,仁者见仁智者见智,根据个人喜好来吧。

如果在开发的时候希望代码规范漂亮,可以选择给插件配置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文件配置参见Vue3+Vite+TS+Eslint搭建生产项目最终版配置 ,这些都不是必须得,可以选择不用。

二、插件配置

1、创建插件

在src目录下建立components,创建一个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、开发调试

在lib文件目录下引入JsonExportExcel.vue,然后开发调试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];

// 批量组件注册
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当中配置文件打包:

 安装vite-plugin-dts,此插件的作用:为打包的库里加入声明文件(即生成:.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、执行打包命令 pnpm build

生成目录如下:

 

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';

配置号以后,就可以登录npm发布,Github代码仓库

  • 24
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3中封装vite-plugin-svg-icons插件封装SvgIcon组件的步骤如下: 1. 首先安装vite-plugin-svg-icons插件和fast-glob依赖,可以使用以下命令进行安装: ``` npm i vite-plugin-svg-icons npm i fast-glob ``` 2. 在项目的配置文件中进行插件的配置。具体配置方式可以参考vite-plugin-svg-icons的官方文档。 3. 将SVG图标文件放置在对应的路径下,并与iconDirs设置保持一致。 4. 在Vue组件使用SvgIcon组件,并传递相应的props。例如,在index.vue文件中可以这样使用SvgIcon组件: ```html <template> <svg-icon :name="nameVal" color="blue" class-name="menu-svg-icon" :icon-title="iconTitle"></svg-icon> </template> <script setup> import { ref } from 'vue'; import SvgIcon from "@/components/SvgIcon.vue"; let iconTitle = ref('svg图片'); let nameVal = ref('layer'); </script> <style scoped> .menu-svg-icon { width: 180px; height: 180px; color: red !important; } </style> ``` 5. 最后,在需要全局引入SvgIcon组件的地方进行引入和使用。 请注意,这只是一个大致的步骤,具体的实现可能会根据项目的需求和配置方式有所差异。你可以根据自己的实际情况进行相应的调整和配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue2+vite中,通过插件vite-plugin-svg-icons和fast-glob封装组件使用svg图片](https://blog.csdn.net/weixin_44867717/article/details/126603027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [【vue3】使用vite-plugin-svg-icons插件显示本地svg图标](https://blog.csdn.net/qq_36977923/article/details/127302147)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

任磊abc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值