vue-codeMirror的使用

　　　　最近要写一个在浏览器中写代码的功能

　　　　引入

　　　　npm install vue-codemirror --save

　　　　在main.js中

　　　　import { codemirror } from 'vue-codemirror'

　　　　import 'codemirror/lib/codemirror.css'

　　　　Vue.use(VueCodemirror)

　　　　在用到的组件中

 

　　　　import { codemirror } from 'vue-codemirror'

　　　　import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！

　　　　require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

　　　　声明

　　　　components: {

        　　　　codemirror

    　　　},

　　　　在html中

　　　　<codemirror  class="code-edit" ref="mycode" :value="curCode" :options="cmOptions"></codemirror>

　　　　在data中

　　　　 curCode: '这里放的是codeMirror中默认值',

               cmOptions: { //codeMirror的配置

                　　value: '', //编辑器的初始值（文本）

                　　mode: "text/javascript", //以什么格式进行代码高亮

                　　theme: "ambiance",// ambiance, foo bar, darcula //配置编辑器的主题样式

                　　indentUnit: 4, //缩进单位

                　　smartIndent: true, // 自动缩进

               　　 tabSize: 4, //tab字符的宽度

                　　lineNumbers: true, // 是否显示行

                　　firstLineNumber: 1, //第一行的行号

                　　showCursorWhenSelecting: true, // 在选择时是否显示光标

                　　readOnly: false //是否只读,不能获取焦点

            },

　　　　获取codeMirror中的代码

　　　　this.$refs.mycode.codemirror.getValue()

　　　　实现的效果