vue-repl-enhance

一个功能增强版的 Vue REPL 组件，支持 Vue 2 和 Vue 3 的在线编辑与预览。基于 @vue/repl 开发，增加了对 Vue 2 的支持以及更多配置选项。

特性

• ⚡️ 多版本支持：无缝切换 Vue 2 (2.7+) 和 Vue 3 (3.x)。
• 📝 编辑器支持：内置 Monaco Editor 支持，提供强大的代码编辑体验。
• 🛠 TypeScript 支持：内置 TypeScript 编译支持。
• 📦 依赖管理：支持 Import Map，可自定义依赖包路径。
• 🖥 灵活布局：支持左右分栏、仅编辑器、仅预览等多种布局模式。
• 🎨 主题定制：支持亮色 (Light) 和暗色 (Dark) 主题。

安装

npm install vue-repl-enhance
# 或
pnpm add vue-repl-enhance
# 或
yarn add vue-repl-enhance

使用指南

基础用法

<script setup lang="ts">
import { onMounted } from 'vue'
import { Repl, ReplStore } from 'vue-repl-enhance'
import MonacoEditor from 'vue-repl-enhance/monaco-editor'

// 初始化 Store
const store = new ReplStore({
  defaultVueVersion: '3.3.4', // 默认 Vue 版本
  defaultTypescriptVersion: '5.0.2',
})

// 设置初始文件
onMounted(() => {
  store.setFiles({
    'App.vue': `
<template>
  <h1>Hello Vue Repl!</h1>
</template>
`
  })
})
</script>

<template>
  <Repl
    :store="store"
    :editor="MonacoEditor"
    :showCompileOutput="false"
  />
</template>

<style>
/* 确保容器有高度 */
.vue-repl {
  height: 100vh;
}
</style>

Vue 2 支持

要支持 Vue 2，需要在初始化 Store 时指定 Vue 版本为 2.x，并确保提供了 Vue 2 的运行时 URL。

const store = new ReplStore({
  defaultVueVersion: '2.7.16',
  // 如果需要，可以手动指定运行时 URL
  // defaultVueRuntimeURL: '...' 
})

API 文档

Repl 组件 Props

| 属性名 | 类型 | 默认值 | 说明 | |Ref |Ref |Ref |Ref | | editor | Component | Required | 编辑器组件 (如 MonacoEditor) | | store | ReplStore | new ReplStore() | REPL 状态管理实例 | | theme | 'light' \| 'dark' | 'light' | 主题模式 | | layout | 'horizontal' \| 'vertical' | - | 布局方向 | | layoutMode | 'both' \| 'editor' \| 'preview' | 'both' | 显示模式 | | split | number | - | 分栏初始比例 | | autoResize | boolean | true | 是否自动响应容器大小变化 | | showCompileOutput | boolean | false | 是否显示编译输出 | | showImportMap | boolean | false | 是否显示 Import Map 编辑器 | | showTsConfig | boolean | false | 是否显示 tsconfig.json 编辑器 | | showError | boolean | true | 是否显示错误提示 | | showFileSelector | boolean | true | 是否显示文件选择器 | | showMessageToggle | boolean | true | 是否显示消息切换按钮 | | clearConsole | boolean | true | 运行前是否清空控制台 | | ssr | boolean | false | 是否启用 SSR 预览模式 | | previewOptions | Object | - | 预览 iframe 的高级配置 |

ReplStore 配置选项

interface StoreOptions {
  serializedState?: string;            // 从 URL hash 恢复的状态字符串
  showOutput?: boolean;                // 初始是否显示编译输出
  outputMode?: 'preview' | 'js' | 'css' | 'ssr'; // 初始输出模式
  defaultVueVersion?: string;          // 默认 Vue 版本
  defaultTypescriptVersion?: string;   // 默认 TypeScript 版本
  defaultVueRuntimeURL?: string;       // 自定义 Vue 运行时 URL
  defaultVueServerRendererURL?: string;// 自定义 Vue SSR 渲染器 URL
  latestVersions?: Record<string, string>; // 依赖包的最新版本映射
}

开发与构建

启动开发服务器

npm run dev

构建

npm run build

Nginx 配置

如果使用 Nginx 部署，需要确保 .mjs 文件被正确识别为 application/javascript 类型，否则可能会遇到 MIME type 错误。

在 nginx.conf 或 mime.types 中添加以下配置：

http {
    include       mime.types;
    types {
        application/javascript mjs;
    }
    # ... 其他配置
}

许可证

MIT