新插件添加及构建注意事项

新插件目录:components/SearchPro 1.添加测试案例 在目录testPlugins/,参考已有插件测试案例 2.添加新插件在entries目下的入口文件 3.添加新插件在rollup.config.js构建的配置 4.添加新插件README.md 使用说明文档 5.添加新插件src/index.js的导出暴露插件 6.添加新插件在package.json的默认导出配置

Vue3 插件模板

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

快速开始

npm install @cimom/ci-web-plugins-commom

打包与发布

打包

npm run build

发布到 NPM

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

   npm publish

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

插件使用说明

1. NPM 安装方式

npm install @cimom/ci-web-plugins-commom

在 Vue3 项目中使用

全局注册：

// main.ts 或 main.js
import { createApp } from 'vue'
import App from './App.vue'
import { HelloPlugin, HelloWorld, VxeTablePro } from '@cimom/ci-web-plugins-commom'
import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'

const app = createApp(App)
app.component('HelloPlugin', HelloPlugin)
app.component('HelloWorld', HelloWorld)
app.component('VxeTablePro', VxeTablePro)
app.mount('#app')

局部注册：

<script setup>
import { HelloPlugin, HelloWorld, VxeTablePro } from '@cimom/ci-web-plugins-commom'
import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
</script>

<template>
  <HelloPlugin msg1="Vite + Vue" />
  <HelloWorld msg="Vite222 + Vue" />
  <VxeTablePro />
</template>

UMD 方式（适合 script 标签直接引入）

<script src="./dist/CI.Web.Plugins.Commom.umd.js"></script>
<link rel="stylesheet" href="./dist/CI.Web.Plugins.Commom.css" />
<script>
  const { HelloPlugin, HelloWorld, VxeTablePro } = window.CIWebPluginsCommom;
  // 通过 window.CIWebPluginsCommom 访问导出组件
</script>

注意：

• 组件名称和导出对象以实际 dist 产物为准。
• 样式文件需手动引入。

3. 单独引入组件（推荐）

自 v1.0.4+ 起，支持通过 exports 字段单独引入组件：

import HelloPlugin from '@cimom/ci-web-plugins-commom/HelloPlugin'
import VxeTablePro from '@cimom/ci-web-plugins-commom/VxeTablePro'
import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'

• 只会打包用到的组件，减少体积。
• 也可用于局部注册：

<script setup>
import HelloWorld from '@cimom/ci-web-plugins-commom/HelloWorld'
</script>
<template>
  <HelloWorld msg="单独引入" />
</template>

依赖 package.json 的 exports 字段，需升级到支持该特性的 npm/yarn 版本。

NPM 用户使用方式

npm install @cimom/ci-web-plugins-commom

在项目入口引入：

import {HelloPlugin,HelloWorld} from '@cimom/ci-web-plugins-commom'
import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'

开发使用案例:

<script setup>
 import HelloPlugin from './components/HelloPlugin.vue'
 import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloPlugin msg1="Vite + Vue" />
  <HelloWorld msg="Vite222 + Vue" />
</template>

<style scoped>

</style>

注意事项

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

主要特性

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

目录结构

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

参考

• Vite
• Vue3
• TailwindCSS