如何实现vue代码预览

使用 Vue 组件实现代码预览

创建一个 Vue 组件来渲染代码块，可以使用 highlight.js 或 prism.js 进行语法高亮。安装依赖后，在组件中引入高亮库并配置语言支持。

<template>
  <div class="code-preview">
    <pre><code :class="language">{{ code }}</code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default {
  props: {
    code: String,
    language: {
      type: String,
      default: 'javascript'
    }
  },
  mounted() {
    hljs.highlightBlock(this.$el.querySelector('code'));
  }
};
</script>

动态加载代码内容

通过 API 或文件读取动态加载代码内容。使用 axios 或 fetch 获取远程代码文件，或通过 require.context 加载本地文件。

methods: {
  async loadCode(url) {
    const response = await fetch(url);
    this.code = await response.text();
  }
}

集成代码编辑器

使用 monaco-editor 或 codemirror 提供交互式编辑功能。这些库支持语法高亮、自动补全和错误检查。

import MonacoEditor from 'vue-monaco';

export default {
  components: { MonacoEditor },
  data() {
    return {
      code: 'console.log("Hello, Vue!")',
      editorOptions: {
        language: 'javascript',
        theme: 'vs-dark'
      }
    };
  }
};

添加运行功能

通过 eval 或 new Function 执行代码，但需注意安全性。建议使用沙箱环境或 Web Worker 隔离执行。

methods: {
  runCode() {
    try {
      const result = new Function(this.code)();
      console.log(result);
    } catch (error) {
      console.error(error);
    }
  }
}

支持多语言切换

根据文件扩展名或用户选择切换语言模式。配置高亮库支持多种语言，动态更新编辑器语言选项。

watch: {
  language(newLang) {
    if (this.editor) {
      this.editor.setModelLanguage(this.editor.getModel(), newLang);
    }
  }
}

优化性能与体验

懒加载重型依赖如编辑器库，添加加载状态提示。对于大文件代码，实现虚拟滚动或分块渲染。

async mounted() {
  const { default: MonacoEditor } = await import('vue-monaco');
  this.EditorComponent = MonacoEditor;
}

错误处理与边界情况

捕获代码加载和执行中的异常，提供友好的错误提示。处理特殊字符、长行和复杂嵌套的渲染问题。

try {
  this.loadCode(this.url);
} catch (error) {
  this.error = 'Failed to load code: ' + error.message;
}