本指南将引导你使用 VTJ 低代码平台创建移动端友好的 H5 应用程序。H5 应用程序针对移动浏览器进行了优化，具备触摸交互、响应式布局以及 Vant 等移动端专用组件库。

VTJ 中的 H5 平台专为移动 Web 应用程序设计，它提供了将 Vue 、TypeScript、Vite 和 Vant UI 组件与 VTJ 低代码引擎相结合的基础。该架构将设计时和运行时的关注点分离，确保了生成的代码清晰且易于维护。

flowchart TD A --> B B --> C C --> D C --> E C --> F D --> G G --> H G --> I I --> J J --> K D --> L E --> M 快速开始：创建你的第一个 H5 项目 分步创建项目

flowchart TD A --> B B --> C{"Yi选择模板？"} C -- 是 --> D C -- 否 --> E E --> F F --> D D --> G{"目录Yi存在？"} G -- 否 --> H G -- 是 --> I I -- 是 --> H I -- 否 --> J H --> K K --> L L --> M

创建过程始于 create-vtj CLI 工具，它为项目脚手架提供了交互式界面。你Ke以直接指定 H5 模板，也Ke以使用交互式菜单从可用模板中进行选择。

执行以下任一命令以创建新的 H5 项目：

交互模式：

npm create vtj@latest

直接选择模板：

npm create vtj@latest -t h5

CLI 会提示你输入项目名称。默认名称是 vtj-project，但你应该为你的应用程序提供一个有意义的名称。然后该工具将生成包含所有必要依赖的完整项目结构。

项目创建完成后导航到你的项目目录并启动开发服务器：

cd your-project-name npm install npm run dev

对于生产环境构建：

npm run build:prod

开发服务器启动时带有热模块替换和用于 API 请求的代理配置。生产环境构建通过代码分割和资源优化进行了性Neng优化。

生成的 H5 项目遵循标准的 Vue 应用程序结构，并包含 VTJ 特定的配置：

h5-project/ ├── .vtj/ ├── public/ │ └── favicon.ico ├── src/ │ ├── App.vue │ ├── main.ts │ ├── router/ │ │ └── index.ts │ ├── views/ │ │ ├── page.vue │ │ └── not-found.vue │ ├── style/ │ │ └── index.scss │ └── components/ │ └── HelloWorld.vue ├── env.json ├── index.html ├── vite.config.ts ├── proxy.config.ts ├── package.json └── tsconfig.json H5 平台架构 核心依赖

H5 平台使用了一套针对移动开发优化的特定包：

H5 和 Web模板之间的主要区别在于使用 @vtj/h5 而不是 @vtj/web，它提供了使用 Vant UI 组件的加载状态、通知和对话框的移动端专用适配器。

main.ts 文件使用 VTJ 的 provider 系统来设置应用程序：

const adapter = createAdapter; const service = new LocalService); const { provider, onReady } = createProvider({ nodeEnv: process.env.NODE_ENV as NodeEnv, mode: ContextMode.Raw, modules: createModules, adapter, service, router, dependencies: { Vue: => import, VueRouter: => import, Pinia: => import, VueI18n: => import, }, project: { id: name }, enableStaticRoute: true, });

适配器模式为以下内容提供了移动端专用实现：

App.vue 组件使用 Vant 的 ConfigProvider 将应用程序包装在一致的主题和配置中：

<template> <ConfigProvider> <Suspense> <RouterView :key="route.fullPath"></RouterView> </Suspense> </ConfigProvider></template>

哈，说实话，这个配置相当关键。 因为它确保了我们的应用在不同设备上douNeng有一致的体验。

咱就是说你得确保用户无论是在什么设备上访问，douNeng获得良好的体验，对吧？

不对，不对，应该是先kankan index.html 文件。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/><meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="" />

害，这些 meta 标签相当重要。 它们确保我们的应用在移动设备上Neng够正确地渲染和缓存。

你kan，这里设置了 viewport 的宽度和缩放比例，还禁用了缓存。 这样Ke以确保我们的应用在不同设备上dou有良好的用户体验。

然后是路由器的配置，使用基于哈希的路由： const router = createRouter({ history: createWebHashHistory, routes: , });

这个配置相当关键，因为它确保了我们的应用Neng够在不同的环境中正常工作。

比如说在嵌入式 Web 视图中，哈希路由就显得尤为重要。

接下来是模块系统的配置： export function createModules { if { return import.meta.glob(); } else { return import.meta.glob; } }

这个函数根据不同的模式加载不同的模块。 只会加载生成的 Vue 组件。

这样Zuo的好处是Ke以减少生产环境的包大小，提高性Neng。

Zui后是 Vite 的配置，使用 @vtj/cli 的 createViteConfig 进行标准化构建设置： import { createViteConfig } from "@vtj/cli"; import { createDevTools } from "@vtj/pro/vite"; import proxy from "./proxy.config";