https://blog.csdn.net/oumaharuki/article/details/79268498  别人的记载,写的很不错,还有下载的方法

以下是自己使用过的,做出来的例子:

做出来的效果图:

记住使用之前要npm下载哦

  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'

  require("codemirror/mode/python/python.js")
  require('codemirror/addon/fold/foldcode.js')
  require('codemirror/addon/fold/foldgutter.js')
  require('codemirror/addon/fold/brace-fold.js')
  require('codemirror/addon/fold/xml-fold.js')
  require('codemirror/addon/fold/indent-fold.js')
  require('codemirror/addon/fold/markdown-fold.js')
  require('codemirror/addon/fold/comment-fold.js')

当然组件需要先声明

  components:{
    codemirror
  }

html代码这样写:

js:

style:

vue中使用codemirror的更多相关文章

  1. 在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏

    项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目 ...

  2. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  3. vue中显示原网页代码--codemirror

    在项目中遇到了一个需求,后台返回string类型的html源码,要求前端这边按照codeview这种类型把这个源码展示出来.现总结如下 1.如果没啥样式的需求,只是要求该缩进缩进的话,可以直接使用in ...

  4. vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比

    vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比 使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各 ...

  5. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  6. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  8. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  9. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

随机推荐

  1. exception tomcat startup.bat 闪退

    解决方案: startup.bat,右击->编辑,在文件头加入下面两行: SET JAVA_HOME=D:\Java\jdk1.7 (java jdk目录) SET TOMCAT_HOME=E: ...

  2. request对象方法

    1.html <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  3. 6_1 持久化模型与再次加载_探讨(1)_三种持久化模型加载方式以及import_meta_graph方式加载持久化模型会存在的变量管理命名混淆的问题

    笔者提交到gitHub上的问题描述地址是:https://github.com/tensorflow/tensorflow/issues/20140 三种持久化模型加载方式的一个小结论 加载持久化模型 ...

  4. AWS CSAA -- 02 AWS - 10000 Feet Overview

    004 The History Of AWS So Far 005 AWS - 10000 Foot Overview 006 AWS - 10000 Foot Overview 007 AWS - ...

  5. Oracle存储过程_语法

    create or replace procedure procedure_name --存储过程名字 ( --进行输入/输出的量 量_name in out 量_类型 --e.g. username ...

  6. python之mechanize模拟浏览器

    安装 Windows: pip install mechanize Linux:pip install python-mechanize 个人感觉mechanize也只适用于静态网页的抓取,如果是异步 ...

  7. 设计可以多选的按钮ChooseManyButton

    设计可以多选的按钮ChooseManyButton 效果: 源码: ChooseManyButton.h 与 ChooseManyButton.m // // ChooseManyButton.h / ...

  8. 解决 锁定文件失败 打不开磁盘“D:\ubuntu\Ubuntu 64 位.vmdk”或它所依赖的某个快照磁盘。 模块 Disk”启动失败

    一次在使用虚拟机的过程中,电脑出问题强制关机后,重新打开虚拟机,出现了“文件锁定失败”,打不开虚拟机的情况. 上网百度查相关的解决方案,终于解决了问题.因为虚拟机运行的时候会创建相应的文件,即在虚拟机 ...

  9. Git使用本地仓库之基本操作

    1.Git是什么? 一个分布式版本控制系统,和SVN类似,但远比SVN强大的一个版本控制系统 ①Git可以方便的在本地进行版本管理,如同你本地有一个版本管理服务器一样我们可以选择在合适的时间将本地版本 ...

  10. Oracle SQL Developer官方工具 初探

    查询表数据(打开工作表:Alt+F10) 运行SQL语句:(格式化:Ctrl+F7) 自动完成语句的设置 自动弹出的速度加快,并且将命中率提高,进行如下设置: 由于我的输入法占用了CTRL+,的快捷建 ...