安装

// npm 
npm install codemirror-editor-vue3 codemirror@^5.65.12
 
// ts版 还需安装：
npm install @types/codemirror

全局注册

修改main.ts：

import { createApp } from 'vue'
 
import App from './App.vue'
 
import { InstallCodemirro } from "codemirror-editor-vue3"
 
const app = createApp(App)
app.use(InstallCodemirro)
app.mount('#app')

当然也可以不全局注册，使用的时候再注册：

使用

<template>
    <Codemirror v-model:value="item.content" border ref="cmRef" :options="options" :height="height" width="100%" />
</template>

<script setup lang="tsx" name="generatorPreview">
import { ref } from "vue";
import { getPreview } from "@/views/tools/generator/preview/api/http";

const data = ref<Generator.PreviewItem[]>();
const options = {
  mode: "text/javascript", // 语言
  foldGutter: true, // 代码折叠
  readOnly: true, //只读
  styleActiveLine: true //选中行的样式
};

const height = document.documentElement.clientHeight - 190 + "px";
getPreview("system_user").then(res => {
  data.value = res.data;
  
});
</script>