快速开始
欢迎使用 Vue Lynx!让我们创建一个 Vue Lynx 项目并开始开发。
系统要求
- Node.js 18 或更高版本。
- 使用 TypeScript 作为配置时需要 Node.js 18.19。
开始开发
开始使用 Vue Lynx 最快的方式是只搭建前端项目,然后用 Lynx Explorer(原生预览)或 Lynx for Web(浏览器预览)来查看效果。
创建新的 Vue Lynx 项目
我们使用 create-vue-lynx 来搭建新项目:
完成提示后,create-vue-lynx 会创建一个以你的项目名称命名的文件夹,其中包含一个入门应用。
运行开发服务器
- 进入创建的项目目录:
- 安装依赖:
- 启动开发服务器:
你应该会看到类似这样的输出:
开发服务器会生成三个 URL:
- Web Preview — 在浏览器中打开此链接可快速预览你的应用。
- Lynx — 用于通过 Lynx Explorer 进行原生渲染的 bundle URL(见下一步)。
- Web — 原始 Web bundle(适用于集成到 Web 容器中)。
在 Web 上预览
在浏览器中打开 Web Preview URL。你将看到应用在 Web 上渲染的实时预览,编辑代码时会自动更新。
在原生设备上预览
要查看应用的原生渲染效果,请使用 Lynx Explorer。扫描终端中显示的二维码,或复制 Lynx bundle URL 并粘贴到 Lynx Explorer 的"Enter Card URL"中。
iOS 模拟器
-
从 Mac App Store 安装 Xcode。
-
下载 LynxExplorer
对于 Apple Silicon (M1/M2/M3),下载
LynxExplorer-arm64.app.tar.gz,然后解压:对于 Intel Mac,下载
LynxExplorer-x86_64.app.tar.gz,然后解压: -
安装到模拟器 — 打开 Xcode,选择 Open Developer Tool > Simulator,然后将
.app文件夹拖入其中。
Android
从 GitHub Releases 下载预构建的 APK 并安装到你的设备上。
Lynx Explorer 也可在 App Store 和 Play Store 上获取,由社区贡献者发布。这些版本不由 Lynx 团队维护。
从源码构建
如果预构建的二进制文件不适用于你的环境,你可以从源码构建 Lynx Explorer:
调试
下载 Lynx DevTool 桌面应用。通过 USB 连接你的设备并开始调试。查看 Lynx 调试指南 了解更多信息。
部署到生产环境
你创建的 Vue Lynx 项目是一个前端项目 — 它生成 JavaScript bundle,由支持 Lynx 的原生应用加载和渲染。Lynx Explorer 是一个用于开发的预构建原生应用,但在生产环境中你需要自己的原生应用。
使用 Sparkling(实验性)
Sparkling 是 TikTok 开源的 Lynx 应用构建基础设施。提供 CLI 工具,可在数分钟内搭建带有 scheme 驱动导航的原生应用项目。目前为实验性,仅支持 iOS 和 Android。
集成到现有应用
如果需要最大的灵活性,可以将 Lynx 直接集成到你的现有应用中。支持 iOS、Android、Harmony、桌面端和 Web,让你完全控制 Lynx 在应用中的嵌入方式。
按照 Lynx 集成指南 开始集成。
下一步
- 什么是 Vue Lynx? — 了解架构和与 Vue for Web 的关键区别
- 教程:商品画廊 — 构建一个带有交互功能的瀑布流画廊
- 教程:商品详情 — 构建一个支持触摸滑动的图片轮播