关于javascript:使用vite插件进行低代码平台自定义开发手机版自定义范例

48次阅读

共计 5663 个字符，预计需要花费 15 分钟才能阅读完成。

Youtube 上的前端网红「Theo」在 React 文档仓库发动了一个 Pull request，号召 React 文档不要再默认举荐 CRA(create react app)，而是应该将 Vite 作为构建利用的首选。
vite 的影响力曾经从 vue 蔓延到了 react，可见在前端工程化开发中，它曾经越来越风行，是时候该从 webpack 切换到 vite 了。

Vite 采纳了基于 ES Module 的开发服务器。进行本地开发时，应用 HMR，速度快了很多。相较于 webpack，有很多劣势：

更快的热更新机制
更快的打包效率
更简略的配置

在做 kintone 开发时，我也很想尝试应用 vite 进行开发，构建。所以也查问了一些相干文章。
然而只看到了一些介绍如何应用 vite（rollup）打包 kintone 自定义 js 的文章。然而却没有看到如何利用 vite 进行 kintone 开发的文章。所以我想到开发一个 vite 插件来解决这个问题。

npm 链接：https://www.npmjs.com/package/vite-plugin-kintone-dev

这个插件实现的性能：

反对应用 vite 创立 kintone 自定义 js，hmr 让你的开发快如闪电
反对 react，vue 等不同的前端框架
构建时反对打包并主动上传 kintone

这次咱们联合 vite 插件，以 kintone 手机版的自定义开发为范例，给大家做演示。
技术栈：vite4 + vue3 + vant4

首先通过 vite 脚手架工具。创立一个 vue 我的项目
npm create vue@latest

设置我的项目名：kintone-mobile-custom（这是我的预设）
抉择 vue，TypeScript。而后依据需要进行抉择。并进行初始化装置.
cd kintone-mobile-customnpm install

npm install -D vite-plugin-kintone-dev

第一次启动时，会主动查看你的 env 文件的设置模版。如果没有配置，会启动命令行交互，让你输出配置信息。同时自动更新你的 env 文件。
如果你的 env 文件设置有误，能够自行去批改。（serve 模式下为 ”.env.development” 文件, build 模式下为 ”.env.production” 文件）

插件的参数阐明

{  
  outputName: "mobile", // 最初打包的名字   
  upload: true
}

vite.config.ts

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import kintoneDev from "vite-plugin-kintone-dev";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    kintoneDev({
      outputName: "mobile",
      upload: true
    }),
  ],
});

接下来咱们再配置一个图片库。
十分罕用的一个插件图库插件 Unplugin Icons

npm install -D unplugin-icons unplugin-vue-components

它的具体设置，请参考它的官网。
增加所有 icon 资源，不必放心，真正打包时，它是按需加载的。
npm i -D @iconify/json

而后咱们应用 vant 这个库来做为手机开发的 ui 库。
https://vant-contrib.gitee.io/vant/#/zh-CN
npm install vant

tsconfig.app.json

...
"compilerOptions": {"types": ["unplugin-icons/types/vue"],
  ...
}
...

vite.config.ts

import {fileURLToPath, URL} from "node:url";
import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import Components from "unplugin-vue-components/vite";
import {FileSystemIconLoader} from "unplugin-icons/loaders";
import kintoneDev from "vite-plugin-kintone-dev";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [kintoneDev({ outputName: 'mobile', upload: true}),
    vue(),
    Components({resolvers: [IconsResolver()],
    }),
    Icons({
      compiler: "vue3",
      customCollections: {"my-icons": FileSystemIconLoader("./src/assets/icons"),
      },
    }),
  ],
  resolve: {
    alias: {"@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

初始化 vue，并将它的根节点挂载在手机的门户上方的空白局部的元素
src/main.ts

import 'vant/lib/index.css'
import './assets/main.css'
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import {Tabbar, TabbarItem} from 'vant'
kintone.events.on('mobile.portal.show', (event) => {const app = createApp(App)
  app.use(router)
  app.use(Tabbar)
  app.use(TabbarItem)
  app.mount(kintone.mobile.portal.getContentSpaceElement()!)
  return event
})

src/assets/main.css

/* @import './base.css'; */
.gaia-mobile-v2-portal-announcement-container,
.gaia-mobile-v2-portal-appwidget-container,
.gaia-mobile-v2-portal-spacewidget-container {display: none;}
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {border-width: 0;}
.gaia-mobile-v2-viewpanel-header {background-color: #4b4b4b;}
.gaia-mobile-v2-viewpanel-contents {border-radius: 0;}
.van-tabbar {width: 100vw;}
.van-tabbar--fixed {left: unset;}
.gaia-mobile-v2-portal-header-container .gaia-mobile-v2-portal-header::after {background: none;}
.group-module-background {background-color: rgba(255, 255, 255);
border-radius: 10px;
box-shadow: 0 0 5px 0 #ced3d4;
}

src/App.vue

<script setup>
import {ref} from "vue"
import type {Ref} from 'vue'
const active: Ref<number> = ref(0)
</script>
<template>
  <router-view v-slot="{Component}">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <van-tabbar route v-model="active" active-color="#febf00" inactive-color="#b8b8b5">
    <van-tabbar-item replace to="/">
      <span>Home</span>
      <template #icon="props">
        <i-mdi-home />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/contacts">
      <span>Contacts</span>
      <template #icon="props">
        <i-mdi-contacts />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/space">
      <span>Space</span>
      <template #icon="props">
        <i-mdi-shape-circle-plus />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/star">
      <span>Star</span>
      <template #icon="props">
        <i-mdi-star />
      </template></van-tabbar-item>
    <van-tabbar-item replace to="/todo">
      <span>Todo</span>
      <template #icon="props">
        <i-mdi-tooltip-edit />
      </template></van-tabbar-item>
  </van-tabbar>
</template>
<style scoped>
.tabbar-icon {font-size: 1em;}
</style>

咱们在 kintone 上创立一个利用。并筹备以下字段。

接着请自行添加一些数据。并且设置【API token】

npm install @kintone/rest-api-client

装置 kintone 的 ts 生成工具
npm install -D @kintone/dts-gen
依据利用生成 ts 申明，请依据本人的环境输出

npx @kintone/dts-gen –base-url https://xxxx.cybozu.com -u xxxx -p xxxx –app-id xx

tsconfig.app.json

{
...
"files": ["./node_modules/@kintone/dts-gen/kintone.d.ts"],
...
}

增加 restapi 返回数据的 ts 类型

types/restApiRecords.ts

import {KintoneRecordField} from '@kintone/rest-api-client'
export type GoodListAppRecord = {
  $id: KintoneRecordField.ID
  $revision: KintoneRecordField.Revision
  thumb: KintoneRecordField.SingleLineText
  num: KintoneRecordField.Number
  title: KintoneRecordField.SingleLineText
  price: KintoneRecordField.Number
  desc: KintoneRecordField.SingleLineText
  更新人: KintoneRecordField.Modifier
  创建人: KintoneRecordField.Creator
  更新工夫: KintoneRecordField.UpdatedTime
  记录编号: KintoneRecordField.RecordNumber
  创立工夫: KintoneRecordField.CreatedTime
}

kintone sdk：@kintone/rest-api-client@4.1.0 的 ts 的 bug 应答

@kintone/rest-api-client 的 4.1.0 有 bug，在 vite 新版中，模块解析局部应用了 typescript5 中的新的配置 bundler。所以咱们把它改为 node 解析
node_modules/@vue/tsconfig/tsconfig.json

// modify "moduleResolution": "bundler" => "node"
"moduleResolution": "node"

接着还有 封装 api 申请 、env 文件增加一些 kintone 的配置、 创立页面 和设置路由，最终启动我的项目的步骤，不在这里展示，有趣味的请点击原文：应用 vite 插件进行 kintone 自定义开发

正文完

javascript

发表至： javascript

2023-09-27

0

精读《React16 新特性》

关于javascript:KPL选手数据王者荣耀API数据接口

10分钟让你成为全栈工程师-koa快速入门

关于javascript:考研刷题小程序云开发实战搭建答题页结果页答题记录页

关于前端:ThingsBoard-前端项目背景图片部件开发

关于javascript:使用vite插件进行低代码平台自定义开发手机版自定义范例

前言

为什么应用 vite

vite-plugin-kintone-dev

实际：kintone 手机版自定义

1. 应用 vite 脚手架初始化 vue 我的项目

2. 装置 kintone 开发的 vite 插件

配置 vite

3. 装置其余的一些库

图片库

手机 ui 库

tsconfig.app.json 配置

vite 的最初配置

代码的开发

1. 批改 main.ts

2. 暗藏掉原先的手机画面

3. 增加 tabbar

4. 模仿一个订单列表利用

5. 装置 kintone js sdk

6. 增加 kintone 的 ts 申明

Just My Socks（注册教程内含优惠码）

关于javascript:使用vite插件进行低代码平台自定义开发手机版自定义范例

前言

为什么应用 vite

vite-plugin-kintone-dev

实际：kintone 手机版自定义

1. 应用 vite 脚手架初始化 vue 我的项目

2. 装置 kintone 开发的 vite 插件

配置 vite

3. 装置其余的一些库

图片库

手机 ui 库

tsconfig.app.json 配置

vite 的最初配置

代码的开发

1. 批改 main.ts

2. 暗藏掉原先的手机画面

3. 增加 tabbar

4. 模仿一个订单列表利用

5. 装置 kintone js sdk

6. 增加 kintone 的 ts 申明

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）