npm install -D @vureact/compiler-core

import { defineConfig } from '@vureact/compiler-core';

export default defineConfig({
  input: 'src', // 待遷移的 Vue 源碼目錄
  exclude: ['src/main.ts'], // 排除 Vue 入口文件
  output: {
    outDir: 'react-app', // React 代碼輸出目錄
  },
});

# 完整編譯（生產(chǎn)環(huán)境）
npx vureact build
# 實(shí)時編譯（開發(fā)調(diào)試）
npx vureact watch

<!-- Vue 原代碼 -->
<script setup lang="ts">
// @vr-name: Demo
import { ref, computed, watch } from 'vue';
const price = ref(100);
const quantity = ref(2);
const total = computed(() => price.value * quantity.value);
watch(quantity, (newVal) => console.log('數(shù)量變化:', newVal));
</script>

// VuReact 自動轉(zhuǎn)換后的 React 代碼：Demo.tsx
import { useVRef, useComputed, useWatch } from '@vureact/runtime-core';

const Demo =  memo(() => {
  const price = useVRef(100);
  const quantity = useVRef(2);
  const total = useComputed(() => price.value * quantity.value);
  useWatch(quantity, (newVal) => console.log('數(shù)量變化:', newVal));
});

export default Demo;

<!-- Vue 原代碼 -->
<template>
  <div class="container"><h1>標(biāo)題</h1></div>
</template>
<style scoped>
.container { padding: 20px; background: #f5f5f5; }
h1 { color: #333; }
</style>

// 自動生成的 React 代碼
import $style from './Component-abc123.module.css';
const Component = () => {
  return (
    <div className={$style.container} data-css-abc123>
      <h1 data-css-abc123>標(biāo)題</h1>
    </div>
  );
};

/* 自動生成的 CSS Module 文件 */
.container[data-css-abc123] {
  padding: 20px;
  background: #f5f5f5;
}
h1[data-css-abc123] {
  color: #333;
}

# 僅遷移組件目錄
npx vureact build --input src/components
# 排除遺留代碼目錄
npx vureact build --exclude "src/legacy/**/*"

export default defineConfig({
  input: 'src',
  exclude: [
    'src/legacy', // 保留未遷移的 Vue 代碼
    'src/main.ts', // 保留 Vue 入口
  ],
  output: { outDir: 'react-app' },
});

{
  "name": "react-app",
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "@vureact/runtime-core": "^1.0.0",
    "@vureact/router": "^2.0.1"
  },
  "devDependencies": {
    "typescript": "~5.8.3",
    "@eslint/js": "^9.25.0",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^6.0.1",
    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "typescript-eslint": "^8.30.1",
    "vite": "^8.0.0"
  }
}

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
})

# 1. 安裝 VuReact
npm install -D @vureact/compiler-core
# 2. 快速創(chuàng)建配置文件
echo "import { defineConfig } from '@vureact/compiler-core';
export default defineConfig({
  input: 'src',
  exclude: ['src/main.ts'],
  output: { outDir: 'react-app' },
});" > vureact.config.js
# 3. 執(zhí)行遷移編譯
npx vureact build