1、下载

npm install vue-codemirror --save

2、使用

• main.ts代码：

import Vue from 'vue';
import VueCodemirror from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';

Vue.use(VueCodemirror);

• 组件中代码：

<template>
  <div class="dbServices-sqlconfig">
      <codemirror v-model="sqlText" :options="cmOption" />
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { codemirror } from 'vue-codemirror';
import 'codemirror/mode/sql/sql.js';
import 'codemirror/theme/solarized.css';

@Component({ components: { codemirror } })
export default class demo extends Vue {
	sqlText = `
	-- SQL Mode for CodeMirror
	SELECT SQL_NO_CACHE DISTINCT
	    @var1 AS \`val1\`, @'val2', @global.'sql_mode',
	    1.1 AS \`float_val\`, .14 AS \`another_float\`, 0.09e3 AS \`int_with_esp\`,
	    0xFA5 AS \`hex\`, x'fa5' AS \`hex2\`, 0b101 AS \`bin\`, b'101' AS \`bin2\`,
	    DATE '1994-01-01' AS \`sql_date\`, { T "1994-01-01" } AS \`odbc_date\`,
	    'my string', _utf8'your string', N'her string',
	        TRUE, FALSE, UNKNOWN
	  FROM DUAL
	  -- space needed after '--'
	  # 1 line comment
	  LIMIT 1 OFFSET 0;
	`;
	cmOption = {
		tabSize: 4,
	    styleActiveLine: true,
	    lineNumbers: true,
	    line: true,
	    mode: 'text/x-mysql',
	    theme: 'solarized light'
	};
}

3、效果

4、优化

这里用的是SQL的语法，我们发现在编辑器上方和下方都有黑的的阴影，这里我选择去掉这个阴影，只需要在代码中修改一下css即可。

<style lang="scss" scoped>
	::v-deep .cm-s-solarized.CodeMirror {
	  box-shadow: none;
	}
</style>

5、最终展示