@cimom/ci-web-plugins-commom 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en.md +2 -2
- package/README.md +82 -0
- package/package.json +1 -1
package/README.en.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
# Vue3 插件模板
|
|
3
3
|
|
|
4
|
-
本项目为基于 Vite + Vue3 +
|
|
4
|
+
本项目为基于 Vite + Vue3 + JavaScript + TailwindCSS 的插件开发模板，适用于发布到 NPM。
|
|
5
5
|
|
|
6
6
|
## 快速开始
|
|
7
7
|
|
|
@@ -69,7 +69,7 @@ import { HelloPlugin,HelloWorld } from './testPlugins/vxetable/CI.Web.Plugins.Co
|
|
|
69
69
|
|
|
70
70
|
## 主要特性
|
|
71
71
|
- Vue3 组件开发
|
|
72
|
-
-
|
|
72
|
+
- JavaScript 支持
|
|
73
73
|
- TailwindCSS 集成
|
|
74
74
|
- 可直接作为插件发布
|
|
75
75
|
|
package/README.md
CHANGED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
|
|
2
|
+
# Vue3 插件模板
|
|
3
|
+
|
|
4
|
+
本项目为基于 Vite + Vue3 + JavaScript + TailwindCSS 的插件开发模板，适用于发布到 NPM。
|
|
5
|
+
|
|
6
|
+
## 快速开始
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
cnpm install
|
|
10
|
+
cnpm run dev
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 打包与发布
|
|
14
|
+
|
|
15
|
+
### 打包
|
|
16
|
+
```bash
|
|
17
|
+
npm run build
|
|
18
|
+
```
|
|
19
|
+
打包产物会输出到 `dist/` 目录，包括：
|
|
20
|
+
- `CI.Web.Plugins.Commom.umd.js` (UMD 格式，适合直接 script 标签引用)
|
|
21
|
+
- `CI.Web.Plugins.Commom.es.js` (ESM 格式，适合现代打包工具)
|
|
22
|
+
- `CI.Web.Plugins.Commom.css` (包含所有 TailwindCSS 原子类和自定义样式)
|
|
23
|
+
|
|
24
|
+
### 发布到 NPM
|
|
25
|
+
1. 修改 `package.json` 中的 `name`、`version`、`description` 等信息。
|
|
26
|
+
2. 确认 `main`、`module`、`types` 字段已指向 `dist/` 下的对应文件。
|
|
27
|
+
3. 执行：
|
|
28
|
+
```bash
|
|
29
|
+
npm publish --access public
|
|
30
|
+
```
|
|
31
|
+
> 建议发布前切换为 npm 官方源：`npm config set registry https://registry.npmjs.org/`
|
|
32
|
+
|
|
33
|
+
### NPM 用户使用方式
|
|
34
|
+
```bash
|
|
35
|
+
npm install @cimom/ci-web-plugins-commom
|
|
36
|
+
```
|
|
37
|
+
在项目入口引入：
|
|
38
|
+
```js
|
|
39
|
+
import YourPlugin from '@cimom/ci-web-plugins-commom'
|
|
40
|
+
import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
|
|
41
|
+
//app.use(YourPlugin)
|
|
42
|
+
```
|
|
43
|
+
## 实际使用案例:
|
|
44
|
+
import { HelloPlugin,HelloWorld } from './testPlugins/vxetable/CI.Web.Plugins.Commom.es.js'
|
|
45
|
+
```
|
|
46
|
+
<script setup>
|
|
47
|
+
// import HelloPlugin from './components/HelloPlugin.vue'
|
|
48
|
+
// import HelloWorld from './components/HelloWorld.vue'
|
|
49
|
+
import { HelloPlugin,HelloWorld,VxeTablePro } from './testPlugins/vxetable/CI.Web.Plugins.Commom.es.js'
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<template>
|
|
53
|
+
<HelloPlugin msg1="Vite + Vue" />
|
|
54
|
+
<HelloWorld msg="Vite222 + Vue" />
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<style scoped>
|
|
58
|
+
|
|
59
|
+
</style>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## 注意事项
|
|
63
|
+
- `main`、`module`、`types` 字段必须指向 `dist/` 下的构建产物，不能指向 `src/`。
|
|
64
|
+
- 发布前请确保已执行 `npm run build`，并包含 `dist/` 目录。
|
|
65
|
+
- TailwindCSS 原子类会自动按组件使用情况生成，无需手动引入。
|
|
66
|
+
- 如需自定义样式，请在 `src/index.css` 中添加。
|
|
67
|
+
- 推荐在 `peerDependencies` 中声明 `vue` 版本要求。
|
|
68
|
+
|
|
69
|
+
## 主要特性
|
|
70
|
+
- Vue3 组件开发
|
|
71
|
+
- JavaScript 支持
|
|
72
|
+
- TailwindCSS 集成
|
|
73
|
+
- 可直接作为插件发布
|
|
74
|
+
|
|
75
|
+
## 目录结构
|
|
76
|
+
- `src/index.ts` 插件入口
|
|
77
|
+
- `src/index.css` 插件样式入口
|
|
78
|
+
|
|
79
|
+
## 参考
|
|
80
|
+
- [Vite](https://vitejs.dev/)
|
|
81
|
+
- [Vue3](https://vuejs.org/)
|
|
82
|
+
- [TailwindCSS](https://tailwindcss.com/)
|