@vureact/compiler-core 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/{chunk-FCLIDEIZ.js → chunk-7LBUUA24.js} +986 -861
- package/lib/{chunk-UJZGDNNB.esm.js → chunk-CUCUXW56.esm.js} +887 -762
- package/lib/cli.d.cts +1 -2
- package/lib/cli.d.ts +1 -2
- package/lib/cli.esm.js +47 -2
- package/lib/cli.js +54 -9
- package/lib/compiler-core.d.cts +9 -0
- package/lib/compiler-core.d.ts +9 -0
- package/lib/compiler-core.esm.js +2 -2
- package/lib/compiler-core.js +3 -3
- package/package.json +13 -5
- package/templates/route-setup-notes.md +192 -0
- package/templates/route-setup-notes.zh.md +192 -0
package/lib/cli.d.cts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { }
|
|
1
|
+
#!/usr/bin/env node
|
package/lib/cli.d.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { }
|
|
1
|
+
#!/usr/bin/env node
|
package/lib/cli.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
/**
|
|
3
|
-
* @vureact/compiler-core v1.
|
|
3
|
+
* @vureact/compiler-core v1.3.0
|
|
4
4
|
* (c) 2025-present Ruihong Zhong (Ryan John)
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
@@ -10,9 +10,10 @@ import {
|
|
|
10
10
|
VuReact,
|
|
11
11
|
bin,
|
|
12
12
|
calcElapsedTime,
|
|
13
|
+
getDirname,
|
|
13
14
|
normalizePath,
|
|
14
15
|
version
|
|
15
|
-
} from "./chunk-
|
|
16
|
+
} from "./chunk-CUCUXW56.esm.js";
|
|
16
17
|
|
|
17
18
|
// src/cli/index.ts
|
|
18
19
|
import { cac } from "cac";
|
|
@@ -172,9 +173,53 @@ function resolveOptions(command) {
|
|
|
172
173
|
return command.option("-i, --input <dir>", "Input directory (relative to root)").option("-o, --outDir <dir>", "Output directory name").option("--workspace <dir>", "The workspace directory for cache and output").option("--bootstrapVite", "Enable Vite to initialize a standard React project environment.").option("--exclude <pattern>", "Exclude files/directories (glob pattern)").option("--no-recursive", "Disable recursive search in subdirectories").option("--no-cache", "Disable cache", { default: void 0 }).option("--format", "Enable code formatting", { default: void 0 }).option("--formatter <type>", 'Choose formatter: "prettier" or "builtin"');
|
|
173
174
|
}
|
|
174
175
|
|
|
176
|
+
// src/cli/update-check.ts
|
|
177
|
+
import { existsSync as existsSync2, readFileSync } from "fs";
|
|
178
|
+
import { join } from "path";
|
|
179
|
+
import updateNotifier from "update-notifier";
|
|
180
|
+
var __dirname = getDirname(import.meta.url);
|
|
181
|
+
function checkForUpdates() {
|
|
182
|
+
try {
|
|
183
|
+
const possiblePaths = [
|
|
184
|
+
"./package.json",
|
|
185
|
+
// 当前目录
|
|
186
|
+
"package.json",
|
|
187
|
+
// 当前目录(另一种写法)
|
|
188
|
+
"../package.json",
|
|
189
|
+
// 上一级目录(构建环境)
|
|
190
|
+
"../../package.json"
|
|
191
|
+
// 上两级目录(开发环境)
|
|
192
|
+
];
|
|
193
|
+
let pkgPath = "";
|
|
194
|
+
for (const relPath of possiblePaths) {
|
|
195
|
+
const testPath = join(__dirname, relPath);
|
|
196
|
+
if (existsSync2(testPath)) {
|
|
197
|
+
pkgPath = testPath;
|
|
198
|
+
break;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
if (!pkgPath) {
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
|
|
205
|
+
const notifier = updateNotifier({
|
|
206
|
+
pkg,
|
|
207
|
+
updateCheckInterval: 1e3 * 60 * 60 * 24,
|
|
208
|
+
// 每天检查一次 (24小时)
|
|
209
|
+
shouldNotifyInNpmScript: true
|
|
210
|
+
});
|
|
211
|
+
notifier.notify();
|
|
212
|
+
} catch (error) {
|
|
213
|
+
if (process.env.NODE_ENV === "development") {
|
|
214
|
+
console.debug("Update check failed:", error);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
175
219
|
// src/cli/index.ts
|
|
176
220
|
var [programName] = Object.keys(bin);
|
|
177
221
|
var cli = cac(programName);
|
|
222
|
+
checkForUpdates();
|
|
178
223
|
var buildCommand = cli.command("build [root]", "Compile Vue3 to React (one-time)");
|
|
179
224
|
resolveOptions(buildCommand).action((root, options) => {
|
|
180
225
|
resolveAction(root, { ...options, watch: false });
|
package/lib/cli.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
"use strict"; function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }/**
|
|
3
|
-
* @vureact/compiler-core v1.
|
|
3
|
+
* @vureact/compiler-core v1.3.0
|
|
4
4
|
* (c) 2025-present Ruihong Zhong (Ryan John)
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
|
|
16
|
+
var _chunk7LBUUA24js = require('./chunk-7LBUUA24.js');
|
|
16
17
|
|
|
17
18
|
// src/cli/index.ts
|
|
18
19
|
var _cac = require('cac');
|
|
@@ -28,7 +29,7 @@ async function resolveAction(root, options) {
|
|
|
28
29
|
const projectRoot = root ? _path2.default.resolve(process.cwd(), root) : process.cwd();
|
|
29
30
|
const userConfig = await loadUserConfig(projectRoot);
|
|
30
31
|
const finalConfig = mergeConfig(projectRoot, options, userConfig);
|
|
31
|
-
const compiler = new (0,
|
|
32
|
+
const compiler = new (0, _chunk7LBUUA24js.VuReact)(finalConfig);
|
|
32
33
|
await compiler.execute();
|
|
33
34
|
if (finalConfig.watch) {
|
|
34
35
|
setupWatcher(compiler, finalConfig);
|
|
@@ -82,7 +83,7 @@ function mergeConfig(projectRoot, options, userConfig) {
|
|
|
82
83
|
}
|
|
83
84
|
function setupWatcher(compiler, config) {
|
|
84
85
|
const spinner = _ora2.default.call(void 0, );
|
|
85
|
-
const cmpHelper = new (0,
|
|
86
|
+
const cmpHelper = new (0, _chunk7LBUUA24js.Helper)(config);
|
|
86
87
|
const watcher = _chokidar2.default.watch(cmpHelper.getInputPath(), {
|
|
87
88
|
ignored: cmpHelper.getExcludes(),
|
|
88
89
|
persistent: true,
|
|
@@ -117,7 +118,7 @@ function setupWatcher(compiler, config) {
|
|
|
117
118
|
const fn = processors[ext];
|
|
118
119
|
const unit = await fn(filePath);
|
|
119
120
|
cmpHelper.printCoreLogs();
|
|
120
|
-
cmpHelper.printCompileInfo(filePath,
|
|
121
|
+
cmpHelper.printCompileInfo(filePath, _chunk7LBUUA24js.calcElapsedTime.call(void 0, startTime));
|
|
121
122
|
if (unit) {
|
|
122
123
|
await _optionalChain([config, 'access', _11 => _11.onChange, 'optionalCall', _12 => _12(event, unit)]);
|
|
123
124
|
}
|
|
@@ -126,7 +127,7 @@ function setupWatcher(compiler, config) {
|
|
|
126
127
|
await compiler.processAsset(filePath);
|
|
127
128
|
cmpHelper.print(
|
|
128
129
|
_kleur2.default.blue("Copied Asset"),
|
|
129
|
-
_kleur2.default.dim(
|
|
130
|
+
_kleur2.default.dim(_chunk7LBUUA24js.normalizePath.call(void 0, cmpHelper.relativePath(filePath)))
|
|
130
131
|
);
|
|
131
132
|
}
|
|
132
133
|
spinner.stop();
|
|
@@ -139,7 +140,7 @@ function setupWatcher(compiler, config) {
|
|
|
139
140
|
await compiler.removeOutputPath(filePath, type2);
|
|
140
141
|
cmpHelper.print(
|
|
141
142
|
_kleur2.default.yellow("Removed"),
|
|
142
|
-
_kleur2.default.dim(
|
|
143
|
+
_kleur2.default.dim(_chunk7LBUUA24js.normalizePath.call(void 0, cmpHelper.relativePath(filePath)))
|
|
143
144
|
);
|
|
144
145
|
};
|
|
145
146
|
if (type === "unlink") {
|
|
@@ -172,9 +173,53 @@ function resolveOptions(command) {
|
|
|
172
173
|
return command.option("-i, --input <dir>", "Input directory (relative to root)").option("-o, --outDir <dir>", "Output directory name").option("--workspace <dir>", "The workspace directory for cache and output").option("--bootstrapVite", "Enable Vite to initialize a standard React project environment.").option("--exclude <pattern>", "Exclude files/directories (glob pattern)").option("--no-recursive", "Disable recursive search in subdirectories").option("--no-cache", "Disable cache", { default: void 0 }).option("--format", "Enable code formatting", { default: void 0 }).option("--formatter <type>", 'Choose formatter: "prettier" or "builtin"');
|
|
173
174
|
}
|
|
174
175
|
|
|
176
|
+
// src/cli/update-check.ts
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
var _updatenotifier = require('update-notifier'); var _updatenotifier2 = _interopRequireDefault(_updatenotifier);
|
|
180
|
+
var __dirname = _chunk7LBUUA24js.getDirname.call(void 0, import.meta.url);
|
|
181
|
+
function checkForUpdates() {
|
|
182
|
+
try {
|
|
183
|
+
const possiblePaths = [
|
|
184
|
+
"./package.json",
|
|
185
|
+
// 当前目录
|
|
186
|
+
"package.json",
|
|
187
|
+
// 当前目录(另一种写法)
|
|
188
|
+
"../package.json",
|
|
189
|
+
// 上一级目录(构建环境)
|
|
190
|
+
"../../package.json"
|
|
191
|
+
// 上两级目录(开发环境)
|
|
192
|
+
];
|
|
193
|
+
let pkgPath = "";
|
|
194
|
+
for (const relPath of possiblePaths) {
|
|
195
|
+
const testPath = _path.join.call(void 0, __dirname, relPath);
|
|
196
|
+
if (_fs.existsSync.call(void 0, testPath)) {
|
|
197
|
+
pkgPath = testPath;
|
|
198
|
+
break;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
if (!pkgPath) {
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
const pkg = JSON.parse(_fs.readFileSync.call(void 0, pkgPath, "utf-8"));
|
|
205
|
+
const notifier = _updatenotifier2.default.call(void 0, {
|
|
206
|
+
pkg,
|
|
207
|
+
updateCheckInterval: 1e3 * 60 * 60 * 24,
|
|
208
|
+
// 每天检查一次 (24小时)
|
|
209
|
+
shouldNotifyInNpmScript: true
|
|
210
|
+
});
|
|
211
|
+
notifier.notify();
|
|
212
|
+
} catch (error) {
|
|
213
|
+
if (process.env.NODE_ENV === "development") {
|
|
214
|
+
console.debug("Update check failed:", error);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
175
219
|
// src/cli/index.ts
|
|
176
|
-
var [programName] = Object.keys(
|
|
220
|
+
var [programName] = Object.keys(_chunk7LBUUA24js.bin);
|
|
177
221
|
var cli = _cac.cac.call(void 0, programName);
|
|
222
|
+
checkForUpdates();
|
|
178
223
|
var buildCommand = cli.command("build [root]", "Compile Vue3 to React (one-time)");
|
|
179
224
|
resolveOptions(buildCommand).action((root, options) => {
|
|
180
225
|
resolveAction(root, { ...options, watch: false });
|
|
@@ -183,4 +228,4 @@ var watchCommand = cli.command("watch [root]", "Compile Vue3 to React and watch
|
|
|
183
228
|
resolveOptions(watchCommand).action((root, options) => {
|
|
184
229
|
resolveAction(root, { ...options, watch: true });
|
|
185
230
|
});
|
|
186
|
-
cli.help().version(
|
|
231
|
+
cli.help().version(_chunk7LBUUA24js.version).parse();
|
package/lib/compiler-core.d.cts
CHANGED
|
@@ -1269,6 +1269,15 @@ declare class FileCompiler extends BaseCompiler {
|
|
|
1269
1269
|
* @returns {Promise<void>}
|
|
1270
1270
|
*/
|
|
1271
1271
|
execute(): Promise<void>;
|
|
1272
|
+
/**
|
|
1273
|
+
* 运行管线并显示加载动画
|
|
1274
|
+
*
|
|
1275
|
+
* @private
|
|
1276
|
+
* @param text - 加载动画显示的文本
|
|
1277
|
+
* @param pipelineFn - 要执行的管线函数
|
|
1278
|
+
* @returns 返回的处理的文件数
|
|
1279
|
+
*/
|
|
1280
|
+
private runPipelineWithSpinner;
|
|
1272
1281
|
/**
|
|
1273
1282
|
* 处理单个 Vue 单文件组件(SFC)
|
|
1274
1283
|
*
|
package/lib/compiler-core.d.ts
CHANGED
|
@@ -1269,6 +1269,15 @@ declare class FileCompiler extends BaseCompiler {
|
|
|
1269
1269
|
* @returns {Promise<void>}
|
|
1270
1270
|
*/
|
|
1271
1271
|
execute(): Promise<void>;
|
|
1272
|
+
/**
|
|
1273
|
+
* 运行管线并显示加载动画
|
|
1274
|
+
*
|
|
1275
|
+
* @private
|
|
1276
|
+
* @param text - 加载动画显示的文本
|
|
1277
|
+
* @param pipelineFn - 要执行的管线函数
|
|
1278
|
+
* @returns 返回的处理的文件数
|
|
1279
|
+
*/
|
|
1280
|
+
private runPipelineWithSpinner;
|
|
1272
1281
|
/**
|
|
1273
1282
|
* 处理单个 Vue 单文件组件(SFC)
|
|
1274
1283
|
*
|
package/lib/compiler-core.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @vureact/compiler-core v1.
|
|
2
|
+
* @vureact/compiler-core v1.3.0
|
|
3
3
|
* (c) 2025-present Ruihong Zhong (Ryan John)
|
|
4
4
|
* @license MIT
|
|
5
5
|
*/
|
|
@@ -18,7 +18,7 @@ import {
|
|
|
18
18
|
parseOnlyScript,
|
|
19
19
|
parseSFC,
|
|
20
20
|
transform
|
|
21
|
-
} from "./chunk-
|
|
21
|
+
} from "./chunk-CUCUXW56.esm.js";
|
|
22
22
|
export {
|
|
23
23
|
BaseCompiler,
|
|
24
24
|
CacheKey,
|
package/lib/compiler-core.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});/**
|
|
2
|
-
* @vureact/compiler-core v1.
|
|
2
|
+
* @vureact/compiler-core v1.3.0
|
|
3
3
|
* (c) 2025-present Ruihong Zhong (Ryan John)
|
|
4
4
|
* @license MIT
|
|
5
5
|
*/
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
var
|
|
21
|
+
var _chunk7LBUUA24js = require('./chunk-7LBUUA24.js');
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
@@ -33,4 +33,4 @@ var _chunkFCLIDEIZjs = require('./chunk-FCLIDEIZ.js');
|
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
|
|
36
|
-
exports.BaseCompiler =
|
|
36
|
+
exports.BaseCompiler = _chunk7LBUUA24js.BaseCompiler; exports.CacheKey = _chunk7LBUUA24js.CacheKey; exports.FileCompiler = _chunk7LBUUA24js.FileCompiler; exports.Helper = _chunk7LBUUA24js.Helper; exports.VuReact = _chunk7LBUUA24js.VuReact; exports.defineConfig = _chunk7LBUUA24js.defineConfig; exports.generate = _chunk7LBUUA24js.generate; exports.generateComponent = _chunk7LBUUA24js.generateComponent; exports.generateOnlyScript = _chunk7LBUUA24js.generateOnlyScript; exports.parse = _chunk7LBUUA24js.parse; exports.parseOnlyScript = _chunk7LBUUA24js.parseOnlyScript; exports.parseSFC = _chunk7LBUUA24js.parseSFC; exports.transform = _chunk7LBUUA24js.transform;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vureact/compiler-core",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "🌀 Next Vue
|
|
3
|
+
"version": "1.3.0",
|
|
4
|
+
"description": "🌀 Next Vue 3 to React 18+ intelligent compilation toolchain",
|
|
5
5
|
"author": "Ruihong Zhong (Ryan John)",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"type": "module",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
},
|
|
18
18
|
"files": [
|
|
19
19
|
"bin",
|
|
20
|
-
"lib"
|
|
20
|
+
"lib",
|
|
21
|
+
"templates"
|
|
21
22
|
],
|
|
22
23
|
"keywords": [
|
|
23
24
|
"vue",
|
|
@@ -30,10 +31,16 @@
|
|
|
30
31
|
"vue3",
|
|
31
32
|
"react18",
|
|
32
33
|
"migration",
|
|
33
|
-
"
|
|
34
|
+
"svelte",
|
|
34
35
|
"typescript",
|
|
35
36
|
"jsx",
|
|
36
|
-
"sfc"
|
|
37
|
+
"sfc",
|
|
38
|
+
"veaury",
|
|
39
|
+
"mitosis",
|
|
40
|
+
"vue3-to-react",
|
|
41
|
+
"vue-react",
|
|
42
|
+
"react-vue",
|
|
43
|
+
"vue-in-react"
|
|
37
44
|
],
|
|
38
45
|
"homepage": "https://vureact.top",
|
|
39
46
|
"repository": {
|
|
@@ -75,6 +82,7 @@
|
|
|
75
82
|
"ora": "^9.1.0",
|
|
76
83
|
"postcss": "^8.5.6",
|
|
77
84
|
"sass": "^1.97.3",
|
|
85
|
+
"update-notifier": "^7.3.1",
|
|
78
86
|
"xxhashjs": "^0.2.2"
|
|
79
87
|
},
|
|
80
88
|
"engines": {
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
# Router Adaptation Guide
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
VuReact provides full conversion support for Vue Router, but since routing is an engineering-level context, some manual adjustments are still required after compilation.
|
|
6
|
+
|
|
7
|
+
### Automatically Converted Parts
|
|
8
|
+
|
|
9
|
+
- `<router-link>` → `<RouterLink>`
|
|
10
|
+
- `<router-view>` → `<RouterView>`
|
|
11
|
+
- Routing API calls: `useRouter()`, `useRoute()`, etc.
|
|
12
|
+
- Automatically injects the `@vureact/router` dependency
|
|
13
|
+
|
|
14
|
+
### Parts Requiring Manual Adjustment
|
|
15
|
+
|
|
16
|
+
- Routing configuration file format conversion
|
|
17
|
+
- Entry file rendering method
|
|
18
|
+
- Exclusion configuration setup
|
|
19
|
+
|
|
20
|
+
## Configuration Steps
|
|
21
|
+
|
|
22
|
+
### Step 1: Preparation Before Compilation
|
|
23
|
+
|
|
24
|
+
Ensure your Vue project uses the standard Vue Router configuration.
|
|
25
|
+
|
|
26
|
+
### Step 2: Execute Compilation
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npx vureact build
|
|
30
|
+
|
|
31
|
+
# Or manually configure the npm command
|
|
32
|
+
npm run vr:build
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Step 3: Adjust the Output React Project (Critical Step)
|
|
36
|
+
|
|
37
|
+
#### 3.1 Update the Entry File (src/main.tsx)
|
|
38
|
+
|
|
39
|
+
Example:
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import { StrictMode } from 'react';
|
|
43
|
+
import { createRoot } from 'react-dom/client';
|
|
44
|
+
import './index.css';
|
|
45
|
+
import router from './router';
|
|
46
|
+
|
|
47
|
+
createRoot(document.getElementById('root')!).render(
|
|
48
|
+
<StrictMode>
|
|
49
|
+
<router.RouterProvider />
|
|
50
|
+
</StrictMode>,
|
|
51
|
+
);
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Important Changes**:
|
|
55
|
+
|
|
56
|
+
- Import the Router Provider; there is no need to render `<App />` because `App` should be mounted in the routing configuration.
|
|
57
|
+
|
|
58
|
+
#### 3.2 Convert the Routing Configuration File
|
|
59
|
+
|
|
60
|
+
The actual structure shall be based on the routing configuration output by your project.
|
|
61
|
+
|
|
62
|
+
Rename `src/router/index.ts` to `src/router/index.tsx`.
|
|
63
|
+
|
|
64
|
+
Example:
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { createRouter, createWebHashHistory } from '@vureact/router';
|
|
68
|
+
import App from '../App';
|
|
69
|
+
import Dashboard from '../pages/Dashboard';
|
|
70
|
+
import Customers from '../pages/Customers';
|
|
71
|
+
|
|
72
|
+
const router = createRouter({
|
|
73
|
+
history: createWebHashHistory(),
|
|
74
|
+
routes: [
|
|
75
|
+
{
|
|
76
|
+
path: '/',
|
|
77
|
+
component: <App />,
|
|
78
|
+
children: [
|
|
79
|
+
{ path: 'dashboard', component: <Dashboard /> },
|
|
80
|
+
{ path: 'customers', component: <Customers /> },
|
|
81
|
+
],
|
|
82
|
+
},
|
|
83
|
+
],
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
export default router;
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
**Important Changes**:
|
|
90
|
+
|
|
91
|
+
- File extension: `.ts` → `.tsx`
|
|
92
|
+
- Export the `createRouter` router instance
|
|
93
|
+
- Component syntax: `component: Dashboard` → `component: <Dashboard />`
|
|
94
|
+
- Import method: Keep React component imports
|
|
95
|
+
|
|
96
|
+
#### 3.3 Configure Exclusions
|
|
97
|
+
|
|
98
|
+
Add exclusion configurations to `vureact.config.js` to prevent manually adjusted files from being overwritten during recompilation.
|
|
99
|
+
|
|
100
|
+
If you need to modify these files later, you must **synchronize the changes manually**.
|
|
101
|
+
|
|
102
|
+
Example:
|
|
103
|
+
|
|
104
|
+
```js
|
|
105
|
+
export default defineConfig({
|
|
106
|
+
exclude: [
|
|
107
|
+
'src/main.ts',
|
|
108
|
+
'src/router/**', // Exclude the entire routing directory
|
|
109
|
+
],
|
|
110
|
+
});
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Step 4: Verification and Testing
|
|
114
|
+
|
|
115
|
+
1. Install dependencies: `npm install`
|
|
116
|
+
2. Start the project: `npm run dev`
|
|
117
|
+
3. Test route navigation
|
|
118
|
+
4. Verify nested routes
|
|
119
|
+
|
|
120
|
+
## Common Issues
|
|
121
|
+
|
|
122
|
+
### Q1: Blank Page with Console Errors
|
|
123
|
+
|
|
124
|
+
**Possible Cause**: The routing configuration file has not been converted to JSX syntax
|
|
125
|
+
**Solution**:
|
|
126
|
+
|
|
127
|
+
1. Confirm the file extension is `.tsx` or `.jsx`
|
|
128
|
+
2. Check if components use the `<Component />` syntax
|
|
129
|
+
3. Ensure React components are imported correctly
|
|
130
|
+
|
|
131
|
+
### Q2: 404 Error on Route Navigation
|
|
132
|
+
|
|
133
|
+
**Possible Cause**: Incorrect history mode configuration
|
|
134
|
+
**Solution**:
|
|
135
|
+
|
|
136
|
+
- Check `createWebHashHistory` vs `createWebHistory`
|
|
137
|
+
- Verify the base path configuration
|
|
138
|
+
|
|
139
|
+
### Q3: Nested Routes Not Displaying Content
|
|
140
|
+
|
|
141
|
+
**Possible Cause**: Parent component lacks `<RouterView />`
|
|
142
|
+
**Solution**:
|
|
143
|
+
Add a route outlet in the layout component:
|
|
144
|
+
|
|
145
|
+
```vue
|
|
146
|
+
<!-- Original Vue -->
|
|
147
|
+
<template>
|
|
148
|
+
<div>
|
|
149
|
+
<header>...</header>
|
|
150
|
+
<router-view />
|
|
151
|
+
</div>
|
|
152
|
+
</template>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### Q4: Manual Adjustments Overwritten After Compilation
|
|
156
|
+
|
|
157
|
+
**Possible Cause**: Files not added to the `exclude` list
|
|
158
|
+
**Solution**:
|
|
159
|
+
Update `vureact.config.js` and add the adjusted files to the exclusion list.
|
|
160
|
+
|
|
161
|
+
## Best Practices
|
|
162
|
+
|
|
163
|
+
### 1. Routing Configuration Specifications
|
|
164
|
+
|
|
165
|
+
- Export the router instance: `export default createRouter({})`
|
|
166
|
+
- Use named routes: `{ name: 'dashboard', path: '/dashboard', ... }`
|
|
167
|
+
- Configure route lazy loading:
|
|
168
|
+
|
|
169
|
+
```tsx
|
|
170
|
+
const Dashboard = lazy(() => import('../pages/Dashboard'));
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
- Centralize management of route meta fields
|
|
174
|
+
|
|
175
|
+
### 2. File Management Strategy
|
|
176
|
+
|
|
177
|
+
- Manage routing configuration files in a separate directory
|
|
178
|
+
- Separate type definitions into `src/router/types.ts`
|
|
179
|
+
- Unify route guards in `src/router/guards.ts`
|
|
180
|
+
|
|
181
|
+
### 3. Testing Strategy
|
|
182
|
+
|
|
183
|
+
- Unit test routing configurations
|
|
184
|
+
- E2E test route navigation flows
|
|
185
|
+
- Functional comparison testing before and after compilation
|
|
186
|
+
|
|
187
|
+
## Related Resources
|
|
188
|
+
|
|
189
|
+
- [VuReact Official Documentation](https://vureact.top/en)
|
|
190
|
+
- [VuReact Router Official Documentation](https://router.vureact.top/en)
|
|
191
|
+
- [Compilation Issue Feedback and Support](https://github.com/vureact-js/core/issues)
|
|
192
|
+
- [Routing Issue Feedback and Support](https://github.com/vureact-js/vureact-router/issues)
|