Vue3 插件模板

本项目为基于 Vite + Vue3 + TypeScript + TailwindCSS 的插件开发模板，适用于发布到 NPM。

快速开始

cnpm install
cnpm run dev

打包与发布

打包

npm run build

打包产物会输出到 dist/ 目录，包括：

• vue3-plugin-demo2.umd.js (UMD 格式，适合直接 script 标签引用)
• vue3-plugin-demo2.es.js (ESM 格式，适合现代打包工具)
• vue3-plugin-demo2.css (包含所有 TailwindCSS 原子类和自定义样式)

发布到 NPM

1. 修改 package.json 中的 name、version、description 等信息。
2. 确认 main、module、types 字段已指向 dist/ 下的对应文件。
3. 执行：

   npm publish --access public

   建议发布前切换为 npm 官方源：npm config set registry https://registry.npmjs.org/

NPM 用户使用方式

npm install <your-plugin-name>

在项目入口引入：

import YourPlugin from '<your-plugin-name>'
import '<your-plugin-name>/dist/vue3-plugin-demo2.css'
app.use(YourPlugin)

注意事项

• main、module、types 字段必须指向 dist/ 下的构建产物，不能指向 src/。
• 发布前请确保已执行 npm run build，并包含 dist/ 目录。
• TailwindCSS 原子类会自动按组件使用情况生成，无需手动引入。
• 如需自定义样式，请在 src/index.css 中添加。
• 推荐在 peerDependencies 中声明 vue 版本要求。

主要特性

• Vue3 组件开发
• TypeScript 支持
• TailwindCSS 集成
• 可直接作为插件发布

目录结构

• src/index.ts 插件入口
• src/index.css 插件样式入口

参考

• Vite
• Vue3
• TailwindCSS