首页 > 其他分享 >使用vite插件进行低代码平台自定义开发(手机版自定义范例)

使用vite插件进行低代码平台自定义开发(手机版自定义范例)

时间:2023-09-26 15:35:08浏览次数:40  
标签:插件 vue 自定义 mobile KintoneRecordField import kintone vite

前言

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

为什么使用vite

Vite 采用了基于ES Module的开发服务器。进行本地开发时,使用HMR,速度快了很多。相较于webpack,有很多优势:

  1. 更快的热更新机制
  2. 更快的打包效率
  3. 更简单的配置

在做kintone开发时,我也很想尝试使用vite进行开发,构建。所以也查询了一些相关文章。 但是只看到了一些介绍如何使用vite(rollup)打包kintone自定义js的文章。但是却没有看到如何利用vite进行kintone开发的文章。所以我想到开发一个vite插件来解决这个问题。

vite-plugin-kintone-dev

www.npmjs.com/package/vit…

这个插件实现的功能:

  1. 支持使用vite创建kintone自定义js,hmr让你的开发快如闪电
  2. 支持react,vue等不同的前端框架
  3. 构建时支持打包并自动上传kintone

实践:kintone手机版自定义

这次我们结合vite插件,以kintone手机版的自定义开发为范例,给大家做演示。 文章有点长,大家可以提前先看下成果图:最后的成果图 技术栈:vite4 + vue3 + vant4

1. 使用vite脚手架初始化vue项目

首先通过vite脚手架工具。创建一个vue项目

npm create vue@latest

设置项目名: kintone-mobile-custom(这是我的预设) 选择vue,TypeScript。然后根据需求进行选择。并进行初始化安装.

cd kintone-mobile-custom
npm 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 github.com/unplugin/un…

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上创建一个应用。并准备以下字段。

使用vite插件进行低代码平台自定义开发(手机版自定义范例)_json

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

5. 安装kintone js sdk

npm install @kintone/rest-api-client

6. 添加kintone的ts声明

  1. 安装kintone的ts生成工具
npm install -D @kintone/dts-gen
  1. 根据应用生成ts声明,请根据自己的环境输入
npx @kintone/dts-gen --base-url https://xxxx.cybozu.com -u  xxxx -p xxxx --app-id xx
  1. tsconfig.app.json
{
...
"files": ["./node_modules/@kintone/dts-gen/kintone.d.ts"],
...
}

4. 添加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
}

5. kintone sdk:@kintone/[email protected]的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自定义开发


标签:插件,vue,自定义,mobile,KintoneRecordField,import,kintone,vite
From: https://blog.51cto.com/u_14091703/7609156

相关文章

  • 使用vite插件进行低代码平台自定义开发(手机版自定义范例)
    前言Youtube上的前端网红「Theo」在React文档仓库发起了一个Pullrequest,号召React文档不要再默认推荐CRA(createreactapp),而是应该将Vite作为构建应用的首选。vite的影响力已经从vue蔓延到了react,可见在前端工程化开发中,它已经越来越流行,是时候该从webpack切换到vite了。为......
  • 关于vite/cli构建项目的区别&环境变量配置&关于接口地址
    ####区别**Vite:**1.**开发服务器启动速度:**Vite通过利用ES模块的特性,实现了快速的冷启动和热模块替换。这意味着在开发环境中,启动开发服务器和应用程序的重新加载速度更快。1.**即时的按需编译:**Vite在开发过程中只会编译和打包当前正在编辑的文件,而不会重新构建整个......
  • 185_技巧_Power Query(M)语言快捷输入之搜狗输入法设置自定义短语
    185_技巧_PowerQuery(M)语言快捷输入之搜狗输入法设置自定义短语此前,我们发布过如何通过QQ拼音输入法来实现快速的输入PowerQuery(M)语言。参考:https://jiaopengzi.com/730.html今天我们来更新PowerQuery(M)语言在搜狗输入法中设置自定义短语的快捷输入。快捷输入效......
  • 【遥遥领先】Eolink IDEA 插件:零代码入侵,自动生成接口
    省流版:Eolink有IDEA插件吗?有,而且遥遥领先!我们在一年半之前就发布了,而且功能更丰富!IDEA插件市场搜索“EolinkApikit”即可安装使用。......
  • 【快应用】如何在快应用中使用自定义指令
    ​ 【关键词】操作DOM、自定义指令 【问题背景】在快应用中,有些情况下我们需要对 DOM 元素进行访问,或者在元素创建、更新、销毁过程中处理相应的业务逻辑,通过快应用文档中现有的方法实现不了,我们需要使用自定义指令去完成我们想要的操作,这里就介绍下快应用中如何去使用自......
  • Vue3-vite 按需引入Element-plus
    1.下载unplugin-vue-components,unplugin-auto-import包npmi-Dunplugin-vue-componentsunplugin-auto-import2.vite.config.js文件中配置1importAutoImportfrom'unplugin-auto-import/vite'2importComponentsfrom'unplugin-vue-components/vite�......
  • OpenHarmony自定义构建函数:@Builder装饰器
     前面章节介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定,仅与使用方进行数据传递。ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。为了简化语言,我......
  • 前端组件通信工具-自定义Bus
    前端组件通信工具-自定义Bus在utils添加Bus//先定义一个类型,emit作为发布(传递),on作为订阅(接收)//name是事件名称,callback是一个回调函数typeBusClass={emit:(name:string)=>voidon:(name:string,callback:Function)=>voidoff:(name:string)=>voi......
  • VSCode 安装插件 Unity 后,一直弹 The .NET Core SDK cannot be located
    如题。明明已经安装了.Net7.0。并且添加到了PATH中。(也就是在终端/CMD可以通过dotnet命令访问到。)但Vscode还是一直弹The.NETCoreSDKcannotbelocated。然后开始下载.Net7.0。解决方案写在了.NETRuntimeInstallTool的细节描述里。按照描述去为对应的......
  • Chrome插件manifest.json文件详解
    {//扩展名称"name":"MyExtension",//版本。由1到4个整数构成。多个整数间用"."隔开"version":"1.0",//manifest文件版本号。Chrome18开始必须为2"manifest_version":2,//描述。132个字符以内"......