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的语法高亮，自行替换为你需要的语言