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

新插件目录: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。

快速开始

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

打包与发布

打包

1npm run build

发布到 NPM

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

   1npm publish

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

插件使用说明

1. NPM 安装方式

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

在 Vue3 项目中使用

全局注册：

1// main.ts 或 main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import { HelloPlugin, HelloWorld, VxeTablePro } from '@cimom/ci-web-plugins-commom'
5import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
6
7const app = createApp(App)
8app.component('HelloPlugin', HelloPlugin)
9app.component('HelloWorld', HelloWorld)
10app.component('VxeTablePro', VxeTablePro)
11app.mount('#app')

局部注册：

1<script setup>
2import { HelloPlugin, HelloWorld, VxeTablePro } from '@cimom/ci-web-plugins-commom'
3import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
4</script>
5
6<template>
7  <HelloPlugin msg1="Vite + Vue" />
8  <HelloWorld msg="Vite222 + Vue" />
9  <VxeTablePro />
10</template>

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

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

注意：

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

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

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

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

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

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

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

NPM 用户使用方式

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

在项目入口引入：

1import {HelloPlugin,HelloWorld} from '@cimom/ci-web-plugins-commom'
2import '@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