快速开始

欢迎使用 Vue Lynx!让我们创建一个 Vue Lynx 项目并开始开发。

系统要求

  • Node.js 18 或更高版本。
    • 使用 TypeScript 作为配置时需要 Node.js 18.19。

开始开发

开始使用 Vue Lynx 最快的方式是只搭建前端项目,然后用 Lynx Explorer(原生预览)或 Lynx for Web(浏览器预览)来查看效果。

创建新的 Vue Lynx 项目

我们使用 create-vue-lynx 来搭建新项目:

npm
yarn
pnpm
bun
deno
npm create vue-lynx@latest

完成提示后,create-vue-lynx 会创建一个以你的项目名称命名的文件夹,其中包含一个入门应用。

运行开发服务器

  1. 进入创建的项目目录:
cd <project-name>
  1. 安装依赖:
npm
yarn
pnpm
bun
deno
npm install
  1. 启动开发服务器:
npm
yarn
pnpm
bun
deno
npm run dev

你应该会看到类似这样的输出:

Rspeedy v0.13.5

➜  Web         http://localhost:3000/main.web.bundle
➜  Web Preview http://localhost:3000/__web_preview?casename=main.web.bundle
➜  Lynx        http://localhost:3000/main.lynx.bundle

开发服务器会生成三个 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 模拟器

  1. Mac App Store 安装 Xcode

  2. 下载 LynxExplorer

    对于 Apple Silicon (M1/M2/M3),下载 LynxExplorer-arm64.app.tar.gz,然后解压:

    mkdir -p LynxExplorer-arm64.app/
    tar -zxf LynxExplorer-arm64.app.tar.gz -C LynxExplorer-arm64.app/

    对于 Intel Mac,下载 LynxExplorer-x86_64.app.tar.gz,然后解压:

    mkdir -p LynxExplorer-x86_64.app/
    tar -zxf LynxExplorer-x86_64.app.tar.gz -C LynxExplorer-x86_64.app/
  3. 安装到模拟器 — 打开 Xcode,选择 Open Developer Tool > Simulator,然后将 .app 文件夹拖入其中。

Android

GitHub Releases 下载预构建的 APK 并安装到你的设备上。

社区下载

Lynx Explorer 也可在 App StorePlay 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 集成指南 开始集成。

下一步