Vue Lynx
  • 简体中文

      • HackerNews

      为了更好地测试所有生态系统组件能否协同工作，我们 Fork 了 Evan You 的经典 Vue HackerNews 2.0 作为 Vue Lynx 的「真实世界」验证基准。由于 Vue Lynx 基于 Vue 3，我们同时使用了社区的 Vue HackerNews 3.0 移植版作为参考。这个移植验证了四个主流生态库的协同工作：Vue Router、Pinia、TanStack Vue Query 和 Tailwind CSS。

      Tailwind CSS 版本

      在第一轮迭代中，我们让 AI 用 Tailwind CSS (@lynx-js/tailwind-preset) 重写了样式。

      hackernews-tailwindsrc/App.vue

      CSS 版本

      在这一版中，我们让 AI 尽可能复用参考实现原有的 SCSS 文件。有趣的是，CSS 版本保留了桌面端的 max-width 居中布局。你可以点击下方的「全屏」按钮来体验这个效果。

      hackernews-csssrc/App.vue

      改动概览

      大部分代码可以直接迁移 —— 组件逻辑、Vue Router、Composition API，甚至 <Transition>/<TransitionGroup> 都完全一致。Vue HackerNews 3.0 参考实现是一个基于 Webpack 的 SSR 应用，使用 Vue 3 + Vuex 4 + axios。移植到 Lynx 时的改动如下：

      方面Vue 3 参考Vue Lynx
      模板元素<div>、<span>、<img>、<a><view>、<text>、<image>、tap 事件
      事件处理@click@tap
      路由历史createWebHistory()createMemoryHistory()
      滚动浏览器原生滚动<scroll-view> 组件
      状态管理Vuex 4Pinia
      数据获取axiosTanStack Vue Query
      构建工具Webpack 5 + ExpressRspeedy
      SSR完整 SSR + 注水无（Lynx 不使用 SSR）

      值得注意的适配：

      • 没有 v-html：Lynx 没有 HTML 解析器，所以我们用 stripHtml() 工具函数将 HTML 评论转换为纯文本
      • <router-link>：用 Vue Router 的 custom slot API 包装，因为 Lynx 没有 <a> 标签