vue-codemirror实现sql和json线上编辑器

实习小计01

今天老大让写一个线上编辑器，写的是sql和json两个编译器，sql的编译器要有提示，

老大扔过来两个选择，1：vue-codemirror；2：monaco-editor，一个前端小白，只会vue，所以果断选那个我有点沾边的（也就是vue-codemirror），到网上查了一下文档，照着文档大致做出来的，这里主要参考的文章有：http://t.csdn.cn/BTlnv和http://t.csdn.cn/8Gl0F其中第一篇文章是sql的，第二篇文章是json的，因为公司做的是基于vue2的项目，然后在网上看到vue-codemirror的v6和v7好像只能支持vue3，所以就装了[email protected]

具体步骤：

1.首先看自己的项目用的是vue2还是vue3，如果是vue3可以直接安装

npm install vue-codemirror --save

        如果是vue2的项目就要指定版本安装，

npm install [email protected] --save

        当然你也可以指定其他版本；

2.安装完成后就是引入，在main.js的文件内引入

import VueCodemirror from 'vue-codemirror'

import 'codemirror/lib/codemirror.css'

Vue.use(VueCodemirror)

 3.引入成功之后就可以开始使用了，直接新建个vue文件，把下面的粘贴进去就好，这样SQL编译器就成了

4.如果想做的是json编译器可以把第三步要黏贴的代码换成下面这段