vue codemirror实现在线代码编译器效果

实现在线代码编译器效果的步骤如下：

步骤一：搭建Vue项目

1. 安装Vue CLI：在命令行输入 npm install -g @vue/cli 进行全局安装。
2. 创建项目：在命令行输入 vue create my-project，创建一个名为 my-project 的新项目。
3. 进入项目文件夹并启动项目：在命令行输入 cd my-project && npm run serve。

步骤二：安装依赖

在项目根目录下运行以下命令：

npm install --save codemirror vue-codemirror

步骤三：创建CodeMirror组件

在项目的src/components文件夹下，创建 CodeMirror.vue 文件。CodeMirror.vue 可以按照以下内容创建：

<template>
  <textarea ref="textarea"></textarea>
</template>
<script>
    import Vue from 'vue'
    import CodeMirror from 'codemirror'
    import 'codemirror/mode/javascript/javascript'

    export default Vue.extend({
        mounted() {
            const codeEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
                mode: 'javascript',
                lineNumbers: true,
                theme: 'material'
            })

            codeEditor.on('change', () => {
                this.$emit('input', codeEditor.getValue())
            })
        },
        watch: {
            value(newValue) {
                this.$refs.textarea.value = newValue
            }
        },
        props: {
            value: {
                type: String,
                default: ''
            }
        }
    })
</script>
<style>
  /* CodeMirror 样式 */
  .CodeMirror {
    height: 100%;
  }
</style>

该组件接受一个字符串类型的value属性，这是默认值；在修改代码后，使用$emit来将新的代码值发送出去。

步骤四：在Vue组件中使用CodeMirror

下面的示例演示了如何在Vue组件中使用CodeMirror组件：

<template>
  <div class="container">
    <CodeMirror v-model="code" />
    <button @click="runCode">运行代码</button>
  </div>
</template>
<script>
import CodeMirror from './components/CodeMirror.vue'

export default {
  components: {
    CodeMirror
  },
  data() {
    return {
      code: ''
    }
  },
  methods: {
    runCode() {
      try {
        //执行代码如下
        console.log(eval(this.code))
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  button {
    margin-top: 10px;
  }
</style>

在该示例中，使用<CodeMirror>标签将CodeMirror组件导入当前组件中，并将一个data属性code传递给该组件。同时，在<button>标签后创建了一个点击事件，以在代码中运行当前编辑的代码。

以上内容将允许你实现一个简单的在线代码编译器效果。