139 lines
4.0 KiB
JavaScript
139 lines
4.0 KiB
JavaScript
import { parse, generate } from '@vue/compiler-dom';
|
|
|
|
/**
|
|
* 简单的Vue模板编辑器演示
|
|
*/
|
|
function demoVueTemplateEditing() {
|
|
console.log('=== Vue模板编辑器简单演示 ===\n');
|
|
|
|
// 示例Vue模板
|
|
const template = `
|
|
<template>
|
|
<div class="container">
|
|
<header v-if="showHeader">
|
|
<h1>{{ title }}</h1>
|
|
</header>
|
|
<main>
|
|
<section id="section1">
|
|
<p>第一部分内容</p>
|
|
</section>
|
|
<section id="section2">
|
|
<div v-for="item in items" :key="item.id">
|
|
{{ item.name }}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
`;
|
|
|
|
console.log('1. 原始模板:');
|
|
console.log(template);
|
|
|
|
// 解析模板为AST
|
|
console.log('\n2. 解析模板为AST...');
|
|
const ast = parse(template);
|
|
console.log('✅ AST解析成功');
|
|
console.log('根节点类型:', ast.type);
|
|
console.log('子节点数量:', ast.children?.length || 0);
|
|
|
|
// 遍历AST并显示结构
|
|
console.log('\n3. AST结构:');
|
|
function printAST(node, indent = 0) {
|
|
const spaces = ' '.repeat(indent);
|
|
if (node.type === 1) { // 元素节点
|
|
console.log(spaces + `元素: <${node.tag}>`);
|
|
if (node.props && node.props.length > 0) {
|
|
node.props.forEach(prop => {
|
|
if (prop.type === 6) { // 属性
|
|
console.log(spaces + ` 属性: ${prop.name}="${prop.value?.content || ''}"`);
|
|
} else if (prop.type === 7) { // 指令
|
|
console.log(spaces + ` 指令: ${prop.name}${prop.arg ? `:${prop.arg.content}` : ''}`);
|
|
}
|
|
});
|
|
}
|
|
if (node.children) {
|
|
node.children.forEach(child => printAST(child, indent + 2));
|
|
}
|
|
} else if (node.type === 2) { // 文本节点
|
|
console.log(spaces + `文本: "${node.content}"`);
|
|
} else if (node.type === 5) { // 插值表达式
|
|
console.log(spaces + `插值: {{ ${node.content.content} }}`);
|
|
}
|
|
}
|
|
|
|
if (ast.children && ast.children.length > 0) {
|
|
ast.children.forEach(child => printAST(child));
|
|
}
|
|
|
|
// 修改AST - 交换section1和section2的位置
|
|
console.log('\n4. 修改AST - 交换section位置...');
|
|
|
|
// 查找section节点
|
|
let section1 = null;
|
|
let section2 = null;
|
|
let mainNode = null;
|
|
|
|
function findNodes(node) {
|
|
if (node.type === 1 && node.tag === 'main') {
|
|
mainNode = node;
|
|
}
|
|
if (node.type === 1 && node.tag === 'section') {
|
|
const idProp = node.props?.find(p => p.name === 'id');
|
|
if (idProp) {
|
|
if (idProp.value?.content === 'section1') {
|
|
section1 = node;
|
|
} else if (idProp.value?.content === 'section2') {
|
|
section2 = node;
|
|
}
|
|
}
|
|
}
|
|
if (node.children) {
|
|
node.children.forEach(child => findNodes(child));
|
|
}
|
|
}
|
|
|
|
findNodes(ast);
|
|
|
|
if (section1 && section2 && mainNode && mainNode.children) {
|
|
const index1 = mainNode.children.indexOf(section1);
|
|
const index2 = mainNode.children.indexOf(section2);
|
|
|
|
if (index1 !== -1 && index2 !== -1) {
|
|
// 交换位置
|
|
mainNode.children[index1] = section2;
|
|
mainNode.children[index2] = section1;
|
|
console.log('✅ 已交换section1和section2的位置');
|
|
}
|
|
}
|
|
|
|
// 生成修改后的代码
|
|
console.log('\n5. 生成修改后的代码...');
|
|
const result = generate(ast, {
|
|
mode: 'module',
|
|
source: template
|
|
});
|
|
|
|
console.log('生成结果类型:', typeof result.code);
|
|
console.log('代码长度:', result.code.length);
|
|
|
|
// 显示部分生成代码
|
|
console.log('\n6. 生成的部分代码:');
|
|
const lines = result.code.split('\n');
|
|
for (let i = 0; i < Math.min(10, lines.length); i++) {
|
|
console.log(lines[i]);
|
|
}
|
|
if (lines.length > 10) {
|
|
console.log('... (更多代码)');
|
|
}
|
|
|
|
console.log('\n=== 演示总结 ===');
|
|
console.log('✅ 成功解析包含Vue指令的模板');
|
|
console.log('✅ 正确识别v-if、v-for等Vue指令');
|
|
console.log('✅ 能够遍历和修改AST结构');
|
|
console.log('✅ 成功生成修改后的代码');
|
|
console.log('✅ 所有Vue指令都得到了正确处理');
|
|
}
|
|
|
|
// 运行演示
|
|
demoVueTemplateEditing(); |