vue中使用ace-builds

1、首先需要执行命令 npm install ace-builds -S 安装依赖
 

//html
 <div class="ace-container">
    <div class="ace-editor" ref="ace"></div>
 </div>

// js
<script>
import ace from 'ace-builds'
import 'ace-builds/src-noconflict/snippets/javascript'
import 'ace-builds/src-noconflict/snippets/sql'
import 'ace-builds/src-noconflict/snippets/html'
import 'ace-builds/src-noconflict/snippets/css'
import 'ace-builds/src-noconflict/snippets/scss'
import 'ace-builds/src-noconflict/snippets/json'
import 'ace-builds/src-noconflict/snippets/java'
import 'ace-builds/src-noconflict/snippets/text'
import 'ace-builds/webpack-resolver'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/theme-monokai'
import 'ace-builds/src-noconflict/mode-javascript'

export default {
   mounted () {
    this.aceEditor =
    ace.edit(this.$refs.ace, {
      maxLines: 20,
      minLines: 10,
      fontSize: 14,
      value: this.value ? this.value : '',//初始显示内容
      theme: this.themePath,
      mode: this.modePath,
      wrap: this.wrap,
      tabSize: 4
    })
    // 激活自动提示
    this.aceEditor.setOptions(
      {
        enableSnippets: true,
        enableLiveAutocompletion: true,
        enableBasicAutocompletion: true
      })
    this.aceEditor.getSession().on('change', this.change)
  },
  data () {
    return {
      value:'',
      aceEditor: null,
      wrap: true,// 是否自动换行
      themePath: 'ace/theme/monokai',//黑色主题，默认为白色
      modePath: 'ace/mode/javascript',//语言为javascript,其他语言如下：
      // name: 'JavaScript',path: 'ace/mode/javascript'
      // name: 'SQL',path: 'ace/mode/sql'
      // name: 'HTML',path: 'ace/mode/html'
      // name: 'CSS',path: 'ace/mode/css'
      // name: 'SCSS',path: 'ace/mode/scss'
      // name: 'Json',path: 'ace/mode/json'
      // name: 'Java',path: 'ace/mode/java'
      // name: 'Text',path: 'ace/mode/text'
    }
  },
   methods: {
    // 实时获取当前输入内容
    change () {
     console.log(this.aceEditor.getSession().getValue())
    },
    // 如果有语言切换需求
    handleModelPathChange (modelPath) {
      this.aceEditor.getSession().setMode(modelPath)
    },
    // 是否自动换行
    handleWrapChange (wrap) {
      this.aceEditor.getSession().setUseWrapMode(wrap)
    }
  }
 }
},
</script>