Apicloud Vue3 Vant4 前端，利用 Rsbuild 打包项目，是一个采用 Vue 数据绑定特性和 Apicloud 手机操控能力相结合的 APP 开发框架，此框架并非采用 Vue 的 SPA 单页面应用方式，而是遵从 Apicloud 的多页面原生渲染效率方式，Vue Rsbuild 只是为了提供更佳的 ES2015 语法、模块分割、剪裁打包和数据绑定代码体验，弥补 Apicloud 本身无法应用在庞大工程协作的缺点。
使用 APICLOUD-VUE 可以极速开发出流畅的商用级别 APP，让你轻松应付各种开发需求
采用最新Rsbuild 构建，配合Yonbuilder实现极速开发、编译和维护，比上一代AVVW框架更快更轻量
- dist 编译代码，压缩后上传到 Apicloud 发布 App
- src 源代码，所有开发在此开始，除 pages 目录外，其他目录可随意增删
- components Vue 公用组件
- libs 公共库
- pages Apicloud 使用 openWin 和 openFrame 打开的页面，vue 组件化，支持多级目录
- public 静态资源，如图片、字体等，会自动打包到 dist 目录下
- apicloud
Rsbuild编译时的模板文件，不能随意修改，除非您知道自己在干什么- vue.global.js 未压缩
vue库，用于开发环境 - vue.runtime.global.prod.js 压缩
vue库，用于生产环境 - page.ejs 将
pages下 vue 文件编译为 Apicloud 可用的模板 - config.xml
Apicloud配置文件
- vue.global.js 未压缩
- .env APP 应用入口
- 其他省略
git clone 或者 直接下载 master 包到本地
在YonBuilder 移动开发平台下载并安装开发工具，运行工具后选择打开 git clone 下来的文件夹，在终端处 cd 进入项目目录下安装依赖
npm i # 初始化安装npm模块打开./apicloud/config.xml文件，对应修改你在YonBuilder 移动开发平台的应用设置，设置说明和注册应用请参考官方文档
<?xml version="1.0" encoding="UTF-8"?>
<widget id="[应用的Widget ID]" version="[版本号]">
...
<content src="http://192.168.3.107:3000/home.html"/> // 无需修改，Rsbuild会自动修改
...
</widget>打开.env文件，对应pages下应用启动首次打开的页面名称来修改，例如./src/pages/home.vue，则填写为home
APP_ENTRY=home
npm run dev # 开启本地测试服特别注意：如果你在开发时增加了./src/pages/里的页面，那么需要先关闭 dev，重新运行才会编译新页面，因为多入口热加载并不会检测新页面
待本地测试服开启后，可以使用开发工具全量同步dist到手机 Apploader 进行调试
注意：只需同步一次，Apploader 第一次同步完成后，修改
./src里的文件保存后手机自动同步和浏览器热加载一样！无需再手动同步一次！
特别注意：很多小伙伴发现开发时页面第一次加载比较慢，其实是因为手机从本地局域网电脑无线获取页面数据而导致的，但编译为发布包时，页面文件会一并打入 APP，所以开发时的页面加载速度可忽略！
npm run build # 编译编译后，使用开发工具将dist全量同步到 Apploader 进行预览
npm run zip # 打包打包后，项目根目录会生成widget.zip，将其上传 YonBuilder 的开发者平台的“代码”处即可进行发布，或者直接使用开发工具上传代码包
如无需高级配置，那么只需关注 src 目录下文件，这里说明一下pages文件：
支持 vue3 选项式和组合式语法，也支持 vue 的 TS 语法，例子使用的是组合式语法和 JS 语法
由于框架并非采用 Vue 的 SPA，所以无法在多页面间使用 vue-router、vuex 之类的单页面应用的数据共享技术，而只能采用 Apicloud API 提供的相关页面跳转传递、数据共享技术
Apicloud 引用打开多级目录页面时，以./src/pages作为根目录如下调用:
api.openFrameGroup({
name: "homeTabs",
frames: [
{
name: "tab1",
url: "./tabs-tab1.html", // 引用多级目录文件格式: ./[subdir]-[...]-[filename].html
},
{
name: "tab2",
url: "./tabs-tab2.html",
bounces: true,
},
{
name: "tab3",
url: "./tabs-tab3.html",
},
],
});框架默认 home.html 为 App 首页入口，你也可以修改其他页面为入口，只需修改./.env
APP_ENTRY=main # 修改home为main, eg.
默认不支持，推荐使用开发工具同步到 Apploader 进行预览
如果你希望可以在本地电脑预览某个页面，你可以手动修改./rsbuild.config.ts中的dev.writeToDisk为true
dev: {
lazyCompilation: false,
// writeToDisk: (file) => {
// return /config.xml$/.test(file);
// },
writeToDisk: true,
assetPrefix: "./",
},然后在开发工具中右击选择dist中某个 html 页面，选择实时预览进行调试，此模式下也支持同步到手机预览，但同步速度慢，而且不支持热加载调试，不推荐使用！
你可以在 vue 中直接使用 api.xxx
支持所有 ESNext 语法，但要注意的是如果你修改
apicloud下的page.ejs，请不要使用 ES6 语法，因为 Rsbuild 默认没有转义模板文件，EJS 只支持纯 HTML 语法
手机 CPU 和内存有限，而且 Apicloud 采用 Hybird 技术，在性能上尤其低端安卓上肯定大打折扣，所以使用按需加载、异步加载和懒加载会更好地让 App 保持流畅原生感
Rsbuild 已配置针对 Vant 组件的剪裁，具体请看官网，使用 Vant 组件时无需在
<script setup>处importUI 组件，rsbuild 会自动按需引入并打包，但如果你import了，就不会 TreeShaking 组件，会增大 APP 体积，请留意！
有小伙伴在开发时发现页面过多时，热加载编译会出现内存溢出问题，已修改 npm run dev 的脚本命令增加 node 的运行时内存上限，如仍出现内存溢出，请继续上调 max_old_space_size 的值
package.json:
"scripts" {
"dev": "NODE_OPTIONS=--max_old_space_size=8192 rsbuild dev"
}框架集成了有赞 vant 4.9.1 前端框架，适用大部分需求，当然你也可以更换其他 Vue 前端框架。
Copyright by Grape Studio
QQ 群 492968709