多框架导出指南
HTMLPAGE 支持将你创建的网页导出为多种主流前端框架格式，让你可以轻松集成到现有项目中。
支持的导出格式
1. 纯 HTML 导出
适用场景：
- 静态网站部署
- 快速原型展示
- 独立落地页
导出内容：
- 完整的 HTML 文件
- 内联或外部 CSS 样式
- 响应式布局代码
- SEO 元标签
操作步骤：
- 点击顶部工具栏的 "导出" 按钮
- 选择 "HTML" 格式
- 配置导出选项：
- CSS 内联/外部文件
- 是否包含注释
- 代码压缩选项
- 点击 "下载" 获取 ZIP 文件
2. Vue 3 组件导出
适用场景：
- Vue 3 项目集成
- Nuxt 应用开发
- 组件库构建
导出内容：
.vue单文件组件- TailwindCSS/Bootstrap 样式引用
- 响应式数据绑定准备
- 组件化结构
操作步骤：
- 选择 "导出" → "Vue 3"
- 设置组件名称（推荐使用 PascalCase）
- 选择 CSS 框架（TailwindCSS/Bootstrap）
- 导出并集成到项目：
# 复制到 Vue 项目
cp LandingPage.vue ~/my-vue-project/src/components/
# 在页面中使用
<template>
<LandingPage />
</template>
<script setup>
import LandingPage from '@/components/LandingPage.vue'
</script>
3. React 组件导出
适用场景：
- React 项目集成
- Next.js 应用开发
- TypeScript 项目
导出内容：
.jsx或.tsx组件文件- 函数式组件（Hooks 风格）
- CSS Modules/Styled Components 支持
- TypeScript 类型定义（可选）
操作步骤：
- 选择 "导出" → "React"
- 选择语言：JavaScript 或 TypeScript
- 选择样式方案：
- CSS Modules
- Styled Components
- TailwindCSS
- 导出组件：
// LandingPage.jsx
import React from 'react'
import './LandingPage.module.css'
export default function LandingPage() {
return (
<div className="landing-page">
{/* 生成的结构 */}
</div>
)
}
导出最佳实践
代码质量优化
1. 语义化 HTML
- 使用正确的标签（
<header>,<nav>,<section>） - 确保 Heading 层级正确（H1 → H2 → H3）
- 添加 ARIA 标签提升可访问性
2. CSS 优化
- 移除未使用的样式类
- 合并重复的样式规则
- 使用 CSS 变量管理主题色
3. 响应式检查
- 测试桌面/平板/手机三种尺寸
- 确认断点设置合理
- 检查图片自适应
集成到项目
静态部署（HTML）：
# 解压导出的 ZIP 文件
unzip landing-page.zip -d ./dist
# 部署到 Nginx/Apache
cp -r ./dist/* /var/www/html/
Vue 3 项目集成：
<!-- pages/landing.vue -->
<script setup>
import { useSeoMeta } from '@unhead/vue'
import LandingPage from '@/components/LandingPage.vue'
useSeoMeta({
title: '产品落地页',
description: '我们的产品介绍'
})
</script>
<template>
<LandingPage />
</template>
React/Next.js 集成：
// app/landing/page.jsx
import LandingPage from '@/components/LandingPage'
export const metadata = {
title: '产品落地页',
description: '我们的产品介绍'
}
export default function LandingRoute() {
return <LandingPage />
}
高级功能
批量导出
如果你有多个页面需要导出：
- 在 "页面" 面板查看所有页面
- 点击 "批量导出" 按钮
- 选择需要导出的页面（支持多选）
- 选择统一的导出格式
- 下载包含所有页面的 ZIP 包
导出配置保存
将常用的导出配置保存为预设：
- 配置好导出选项后点击 "保存预设"
- 命名你的配置（如 "Vue3-TailwindCSS"）
- 下次导出时直接选择预设即可
代码片段导出
只需要导出某个组件或区块：
- 在画布中选中目标元素
- 右键菜单选择 "导出选中元素"
- 获取该部分的独立代码
常见问题
Q: 导出的代码能直接使用吗？
A: 大部分情况下可以直接使用。建议：
- 检查依赖项是否已安装（TailwindCSS、图标库等）
- 替换占位图片为实际资源
- 调整颜色变量适配品牌
Q: 如何处理动态数据？
A: 导出的代码是静态结构，你需要：
- 将硬编码文本替换为数据绑定
- 添加
v-for（Vue）或.map()（React）实现列表渲染 - 集成 API 调用获取动态内容
Q: 导出的性能如何？
A: HTMLPAGE 生成的代码经过优化：
- 使用现代 CSS（Flexbox/Grid）
- 避免过度嵌套
- 图片懒加载（可选）
- 建议生产环境开启代码压缩
相关资源
提示：导出前建议先使用 "预览" 功能在不同设备上测试效果，确保一切正常后再导出。