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

  • 相似代码题库，代码展现的区域刚开始用模板字符串和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 styleimport '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>