vue项目中使用vue-codemirror

最近开发中的一个需求如下：

• 类似代码题库，代码展示的区域刚开始用模板字符串和v-html，可以正常显示，但是不可以按代码格式展示，所以去gitHub上找到了vue-codemirror，顺便记录下在vue项目中使用vue-codemirror使用过程

第一步：安装vue-codemirror

• 使用npm：npm install vue-codemirror --save
• 使用yarn：yarn add vue-codemirror

• 使用cdn:

  <link rel="stylesheet" href="path/to/codemirror/lib/codemirror.css">
  <script type="text/javascript" src="path/to/codemirror.js"></script>
  <script type="text/javascript" src="path/to/vue.min.js"></script>
  <script type="text/javascript" src="path/to/dist/vue-codemirror.js"></script>
  <script type="text/javascript" src="path/to/codemirror/{some-resources}"></script>
  <script type="text/javascript">
      Vue.use(window.VueCodemirror)
  </script>

第二步：全局配置

项目全局main.js文件内引入：

import VueCodemirror from 'vue-codemirror'
// import base style
import 'codemirror/lib/codemirror.css'
// import more codemirror resource...

Vue.use(VueCodemirror, /* {
  options: { theme: 'base16-dark', ... },
  events: ['scroll', ...]
} */)

第三步：组件文件内使用

test.vue文件内使用：

<template>
  <div class="exercise">
      <codemirror
        v-model="codeSnippets"
        :options="cmOptions"
      />
  </div>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
export default {
  data() {
    return {
      cmOptions: {
        tabSize: 4,
        mode: 'text/javascript',  // 模式
        theme: 'base16-dark',  // 主题
        lineNumbers: true,  // 是否显示行数
        line: true,
        viewportMargin: Infinity,  // 处理高度自适应时搭配使用
        highlightDifferences: true,
        autofocus: false,
        indentUnit: 2,
        smartIndent: true,
        readOnly: true,  // 只读
        showCursorWhenSelecting: true,
        firstLineNumber: 1,
        // 更多配置查询 https://codemirror.net/doc/manual.html#config
      },
     codeSnippets:
      `for (var i = 0; i < 3; i++) {
        setTimeout(() => console.log(i), 1)
      }

      for (let i = 0; i < 3; i++) {
        setTimeout(() => console.log(i), 1)
      }`,
    }
  },
  components: {
    codemirror
  },
}
</script>
<style>  /* 注意：这里的样式需要全局，如果写了scoped会导致样式不生效 */
.CodeMirror {
  border: 1px solid #eee;
  height: auto;  /* 编辑器盒子高度自适应 */
  width: 30%;
}
</style>