1.问题

用了vuejs的项目中，使用codemirror做实时代码高亮。

对于codemirror相关的css和js文件，如果手动引入外部的，则能正确显示行号、实时高亮（本地编辑器如sublime的高亮体验）

如果引入通过npm下载到node_modules目录下的，那么就不能正常使用：语法不能高亮。

2.代码

用vue-cli的webpack模版建的项目。

index.html

       
  
代码编辑区域
 
 

入口js文件main.js

import Vue from 'vue' // import CodeMirror from 'codemirror' Vue.directive('banzi', { twoWay: true, bind: function () { this.codemirror = CodeMirror(this.el, { mode: 'javascript', lineNumbers: true }) this.codemirror.on('change', function () { this.set(this.codemirror.getValue()) }.bind(this)) }, update: function (value, oldValue) { this.codemirror.setValue(value || '') } }) /* eslint-disable no-new */ new Vue({ el: 'body', data: { 'neirong': '' } })

====== update ======

用npm装的codemirror，里面没有index.js，有bower.json:

{ "name": "codemirror", "main": ["lib/codemirror.js", "lib/codemirror.css"], "ignore": [ "**/.*", "node_modules", "components", "bin", "demo", "doc", "test", "index.html", "package.json", "mode/*/*test.js", "mode/*/*.html" ] }

参照bower.json,我尝试这样引入codemirror:

import CodeMirror from 'codemirror/lib/codemirror.js'

但是不起作用

===== 再次update ======

在根组件App.vue中这样引入codemirror:

import CodeMirror from 'codemirror/lib/codemirror' // CodeMirror，必要 import 'codemirror/lib/codemirror.css' // css，必要 import 'codemirror/mode/javascript/javascript' // js的语法高亮，自行替换为你需要的语言

import CodeMirror from 'codemirror/lib/codemirror' // CodeMirror，必要 import 'codemirror/lib/codemirror.css' // css，必要 import 'codemirror/mode/javascript/javascript' // js的语法高亮，自行替换为你需要的语言

npm install vue-codemirror