用 Vue 构建完整应用

目标：当 UI 复杂到字符串拼 HTML 难以维护时，升级到 Vue 3 + TypeScript 源码工程。创建项目时选择「Vue 3 + TypeScript」模板即可获得完整骨架。

main.ts — Vue 工程入口

// ==UserScript==
// @name Product Helper
// @description Vue 3 + TypeScript 应用示例
// @match https://example.com/*
// @require dom
// @require store
// @require http
// ==/UserScript==

import { createApp } from "vue";
import App from "./App.vue";
import "./styles/theme.css";

LFDOM.ready(() => {
  const host = LFDOM.createFloatingRoot({ id: "product-helper" });
  createApp(App).mount(host);
});

工程结构

• main.ts — 入口文件，顶部仍然是同一套元信息头；所有指令（包括 @require）只在入口文件中生效，组件里用到的内置库也要在这里声明
• App.vue / 其它 .vue 组件 — 用标准 ESM import 互相引用；.vue 文件不能作入口
• styles/*.css — 样式文件，import 后编译进产物，应用启动时自动注入页面
• npm 依赖 — 直接 import，编译器会从 CDN 拉取并缓存到 IndexedDB；版本按工作区根目录 package.json 的声明解析

编译如何工作

点击 IDE 顶部「编译」（有未保存改动时会自动先保存）时，浏览器内的编译器把 .vue / .ts / ESM 工程打包成单文件产物，再注册到 chrome.userScripts。只按 Ctrl+S 保存不会编译。首次编译某个 npm 依赖会稍慢（需要下载），之后走缓存。

开发时可在终端执行 liveDebug on：每次编辑（无需保存）都会在停止输入片刻后重新编译并热重载调试页，但不会更新已注册的产物，调好后仍需点「编译」。

限制

编译在浏览器内进行，Node 内置模块只部分可用：path / buffer / events / process 等有浏览器实现；crypto 只支持部分 API；fs 在应用源码中不可用；http / net / os 等调用时报错；child_process / vm / worker_threads 等直接编译失败（完整分级见「限制与常见问题」）。依赖需要提供浏览器可用的构建产物。