upload code

2025-10-17 14:33:33 +08:00
commit 0d9423e6e4
29 changed files with 1526 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,189 @@
+
+# kintone-vue-ts-template
+
+使用 Vue 、ts 和 Vite 创建 kintone plugin 的初始化模板，先由 [create-plugin](https://cybozu.dev/ja/kintone/sdk/development-environment/create-plugin/) 生成之后再手动引入 Vue。
+
+> プラグイン開発手順：https://cybozu.dev/ja/kintone/tips/development/plugins/development-plugin/
+
+包括了以下 kintone 库：
+
+- [kintone-ui-component (v1.22.0)](https://cybozu.dev/ja/kintone/sdk/library/kintone-ui-component-v1/)（[文档](https://ui-component.kintone.dev/ja/)）
+- [@cybozu/eslint-config](https://cybozu.dev/ja/kintone/sdk/development-environment/eslint-config/)
+- [@kintone/rest-api-client](https://cybozu.dev/ja/kintone/sdk/rest-api-client/kintone-javascript-client/)（[文档](https://github.com/kintone/js-sdk/tree/main/packages/rest-api-client)）
+- [kintone/plugin-packer](https://cybozu.dev/ja/kintone/sdk/development-environment/plugin-packer/)
+- [@kintone/plugin-uploader](https://cybozu.dev/ja/kintone/sdk/development-environment/plugin-uploader/)
+- [@kintone/dts-gen](https://cybozu.dev/ja/kintone/sdk/library/dts-gen/)
+
+# 使用步骤
+
+首先进行安装
+
+```bash
+npm install # 或 yarn
+```
+
+随后需要修改项目信息：
+
+1. `package.json`
+```diff
+{
+  "name": "项目名",
+-  "name": "kintone-vue-template",
+  "private": true,
+  "version": "版本号",
+-  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "vite:build": "vite build",
+    "build": "vite build && npm run pkg",
+    "build-upload": "npm run build && npm run upload",
+    "pkg": "kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip dist/src",
+    "upload": "修改 kintone 域名、用户名和密码"
+-    "upload": "kintone-plugin-uploader --base-url https://alicorn.cybozu.com --username maxz --password 7ld7i8vd dist/plugin.zip "
+  },
+  ...
+```
+
+2. `src/manifest.json`
+
+```diff
+{
+  ...
+  "icon": "icon 路径",
+-  "icon": "image/icon.png",
+  "config": {
+    ...
+    "required_params": [ "/config 页面必填的参数" ]
+-    "required_params": [ "buttonName" ]
+  },
+  "name": "项目名",
+-  "name": {
+-    "en": "kintone Vue template",
+-    "ja": "kintone Vue テンプレート"
+-  },
+  "description": "项目描述",
+-  "description": {
+-    "en": "kintone Vue template for creating plugin",
+-    "ja": "kintoneプラグイン作成用 Vue テンプレート"
+-  },
+  "description": "项目网站",
+-  "homepage_url": {
+-    "en": "https://www.alicorns.co.jp/",
+-    "ja": "https://www.alicorns.co.jp/"
+-  },
+  ...
+}
+```
+
+# 编译流程
+
+- `build` 会生成 `dist` 文件夹，以及 `plugin.zip` 文件
+
+> 如果只需要 `dist` 文件夹，可以执行 `vite:build`
+
+```bash
+npm run build # 或 yarn build
+
+# 仅生成 `dist` 文件夹
+npm run vite:build # 或 yarn vite:build
+```
+
+- `upload` 会将 `plugin.zip` 上传到 Kintone plugin
+
+```bash
+npm run upload # 或 yarn upload
+```
+
+- `build-upload` 会顺序执行上面两步
+
+```bash
+npm run build-upload # 或 yarn build-upload
+```
+
+# 开发说明
+
+## 项目结构
+
+```
+├── src
+│   ├── components
+│   │   ├── basic
+│   │   │   ├── PluginInput.vue
+│   │   │   └── PluginLabel.vue
+│   │   └── Config.vue
+│   ├── css
+│   │   ├── 51-modern-default.css
+│   │   └── config.css
+│   ├── i18n
+│   │   ├── lang
+│   │   │   ├── en.ts
+│   │   │   └── ja.ts
+│   │   └── index.ts
+│   ├── js
+│   │   ├── desktop.ts
+│   │   └── mobile.ts
+│   ├── types
+│   │   ├── index.d.ts
+│   │   ├── model.d.ts
+│   │   └── my-kintone.d.ts
+│   ├── main.ts
+│   └── manifest.json
+├── README.md
+├── components.d.ts
+├── env.d.ts
+├── index.html
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+当前模板中已经有一个案例，可以参考并且修改。
+
+1. 对于 Config 页面，请修改 `components/Config.vue`
+2. 对于 PC 的 App 页面，请修改 `js/desktop.ts`
+3. 对于 Mobile 的 App 页面，请修改 `js/mobile.ts`
+
+这三个文件是强制指定的，请不要修改。
+
+### 关于 Config 页面
+
+只有 **Config 页面** 的开发可以使用 Vue Template，其他页面请使用 `js` 文件。
+
+基本上和 Vue 开发没有区别，但是有以下一些限制：
+1. CSS 样式只能使用 `css` 文件
+2. `kintone-ui-component` 库有一些限制
+
+
+### 关于 CSS
+
+1. 暂时不支持在 Vue Template 中创建，**只能在 `css` 文件夹下新建 css 文件**
+2. 目前在 `config` 页面引入了 `51-modern-default.css`，里面存放了 kintone 的一些样式
+   - 如果不需要使用就在 `manifest.json` 中删除
+   ```diff
+   "config": {
+      "html": "html/config.html",
+      "js": [
+         "js/config.js"
+      ],
+      "css": [
+   -      "css/51-modern-default.css",
+         "css/config.css"
+      ],
+      "required_params": [
+         "buttonName"
+      ]
+   },
+   ```
+
+
+
+### 
+
+
+**支持 Vue 页面**，
+不支持 Vue 页面，
+
+
+## 对于 `kintone-ui-component` 库的限制
+
+v-model 语法糖无法使用