VuReact

**写 Vue，生成可维护的 React** 一个 **Vue 转 React** 编译工具，将 Vue 3 的 SFC、脚本和样式文件**完整编译为纯 React 18+ 组件与代码**（非运行时桥接），覆盖 ` ``` ### Step 3：配置编译器 `vureact.config.ts` ```ts import { defineConfig } from '@vureact/compiler-core'; export default defineConfig({ // 输入路径，包含要编译的 Vue 文件；允许输入单文件 'xxx.vue' input: './src', // 排除 Vue 入口文件，避免语义冲突 exclude: ['src/main.ts'], output: { // 工作区目录，存放编译产物和缓存 workspace: '.vureact', // 输出目录名 outDir: 'react-app', // 自动初始化 Vite React 环境 bootstrapVite: true, }, }); ``` 实际上，除了 `exclude` 需要手动指定外，其他选项均采用示例配置中的默认值，无需额外配置。 ### Step 4：执行编译 #### 方式一：使用 npx 命令在根目录下运行： ```bash npx vureact build ``` #### 方式二：使用 npm scripts 在 `package.json` 里添加脚本命令： ```json "scripts": { "watch": "vureact watch", "build": "vureact build" } ``` ```bash npm run build ``` ### Step 5：查看输出目录树编译后目录（示意）： ```txt my-project/ ├── .vureact/ # 工作区（编译生成） │ ├── cache/ # 编译缓存 │ ├── react-app/ # 生成的 React 代码 │ │ ├── src/ │ │ │ ├── components/ │ │ │ │ ├── Counter.tsx │ │ │ │ └── Counter-[hash].css │ │ │ └── App.tsx │ │ │ └── index.css │ │ │ └── main.tsx │ │ └── package.json │ │ └── tsconfig.json │ │ └── vite.config.ts │ │ └── ... │ │ ├── src/ # 原始 Vue 代码 │ ├── components/ │ │ └── Counter.vue │ └── main.ts # Vue 入口文件 ├── ... └── vureact.config.ts # VuReact 配置文件 ``` ### Step 6：对照生成结果下面是一个格式化后的典型输出（为说明做了轻微简化，实际哈希与属性名以本地产物为准）： ```tsx import { memo, useCallback, useMemo } from 'react'; import { useComputed, useVRef } from '@vureact/runtime-core'; import './Counter-a1b2c3.css'; // 根据 defineProps 和 defineEmits 推导 type ICounterType = { title?: string; onChange: () => void; onUpdate: (value: number) => number; }; // memo 包裹组件 const Counter = memo((props: ICounterType) => { // ref/computed 转换成了对等的适配 API const step = useVRef(1); const count = useVRef(0); const title = useComputed(() => `Counter x${step.value}`); // 自动分析顶层箭头函数依赖，并追加 useCallback 优化 const increment = useCallback(() => { count.value += step.value; props.onUpdate?.(count.value); // emits 转换 }, [count.value, step.value, props.onUpdate]); // 自动分析顶层对象中的依赖，并追加 useMemo 优化 const methods = useMemo( () => ({ decrease() { count.value -= step.value; }, }), [count.value, step.value], ); return ( <>

{props.title || title.value}

Count: {count.value}

); }); export default Counter; ``` CSS 文件内容： ```css .counter-card[data-css-a1b2c3] { border: 1px solid #ddd; border-radius: 8px; padding: 12px; } ``` ### 关键观察点 1. `// @vr-name: Counter` 这段特殊注释定义了组件名 2. `defineProps` 和 `defineEmits` 被转换成了 TS 组件类型 3. 非纯 UI 展示组件，默认会走 `memo` 包装 4. `ref` / `computed` 被转换为 runtime 适配 API（`useVRef` / `useComputed`） 5. 模板事件回调会生成符合 React 语义的 `onClick` 6. 顶层箭头函数自动分析依赖，尝试注入 `useCallback` 7. 顶层变量声明自动分析依赖，尝试注入 `useMemo` 8. 对 JSX 中的原 `ref` 状态值补上 `.value` 9. `less` 样式被编译为 css 代码 10. `scoped` 样式会生成带哈希的 css 文件，并在元素上标注作用域属性 ## 📋 编译约定（必读）移步 [VuReact 编译约定](https://vureact.top/guide/specification.html) 查看具体内容！ ## 🛠️ CLI 命令 ```bash # 编译项目 npx vureact build # 监听模式编译 npx vureact watch # 查看帮助 npx vureact --help ``` ## 常见问题请移步 [VuReact 常见问题](https://vureact.top/guide/faq.html)！ ## 🔗 生态系统 - **[运行时适配包](https://runtime.vureact.top)**：提供 React 版的 Vue 核心 API - **[路由适配包](https://router.vureact.top)**：支持 Vue Router → React Router 转换 - **[完整文档](https://vureact.top)**：详细的使用指南和 API 文档 ## 🎯 适用场景 ### ✅ 推荐使用 - **新项目开发**：直接按照 VuReact 约定编写 Vue 风格的组件 - **渐进式迁移**：支持按目录、模块逐步迁移 - **混合开发**：允许 Vue 和 React 组件在项目中并存 ### ⚠️ 注意事项 - **优先可控**：当前版本优先服务于可控工程场景 - **约定驱动**：需要遵守明确的编译约定 - **现代语法**：专注于 Vue 3 Composition API 与 `