javascript - vuejs项目中怎样引入codemirror
本文介绍了javascript - vuejs项目中怎样引入codemirror的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1.问题
用了vuejs的项目中，使用codemirror做实时代码高亮。
对于codemirror相关的css和js文件，如果手动引入外部的，则能正确显示行号、实时高亮（本地编辑器如sublime的高亮体验）
如果引入通过npm下载到node_modules目录下的，那么就不能正常使用：语法不能高亮。
2.代码
用vue-cli的webpack模版建的项目。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="static/lib/codemirror.js"></script>
<link rel="stylesheet" href="static/lib/codemirror.css">
<script src="static/mode/javascript/javascript.js"></script>
</head>
<body>
<h1>代码编辑区域</h1>
<div v-banzi="neirong"></div>
</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的语法高亮，自行替换为你需要的语言效果
这篇关于javascript - vuejs项目中怎样引入codemirror的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
