kintone-vue-ts-template

使用 Vue 、ts 和 Vite 创建 kintone plugin 的初始化模板，先由 create-plugin 生成之后再手动引入 Vue。

プラグイン開発手順：https://cybozu.dev/ja/kintone/tips/development/plugins/development-plugin/

包括了以下 kintone 库：

• kintone-ui-component (v1.22.0)（文档）
• @cybozu/eslint-config
• @kintone/rest-api-client（文档）
• kintone/plugin-packer
• @kintone/plugin-uploader
• @kintone/dts-gen

使用步骤

首先进行安装

npm install # 或 yarn

随后需要修改项目信息：

1. package.json

{
+  "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

{
  ...
+  "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

npm run build # 或 yarn build

# 仅生成 `dist` 文件夹
npm run vite:build # 或 yarn vite:build

• upload 会将 plugin.zip 上传到 Kintone plugin

npm run upload # 或 yarn upload

• build-upload 会顺序执行上面两步

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 中删除

   "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 语法糖无法使用