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

前言

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

为什么应用vite

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

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

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

vite-plugin-kintone-dev

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

这个插件实现的性能：

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

实际：kintone手机版自定义

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

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

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

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

2. 装置kintone开发的vite插件

npm install -D vite-plugin-kintone-dev

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

插件的参数阐明

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

配置vite

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
    }),
  ],
});

3. 装置其余的一些库

图片库

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

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

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

手机ui库

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

tsconfig.app.json配置

tsconfig.app.json

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

vite的最初配置

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)),
    },
  },
});

代码的开发

1. 批改main.ts

初始化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
})

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

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;
}

3. 增加tabbar

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>

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

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

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

5. 装置kintone js sdk

npm install @kintone/rest-api-client

6. 增加kintone的ts申明

装置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:使用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申明

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于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申明

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复