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