vue2 导入使用vue-codemirror详解

最新推荐文章于 2025-06-18 09:03:20 发布

Saga Two

最新推荐文章于 2025-06-18 09:03:20 发布

阅读量7.9k

点赞数 30

CC 4.0 BY-SA版权

分类专栏：实战应用文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_46309087/article/details/135983108

vue2 导入使用vue-codemirror详解

1 介绍

vue-codemirror是一个基于Vue的代码在线编辑器组件，它封装了CodeMirror编辑器，使得在Vue项目中可以方便地使用CodeMirror。vue-codemirror提供了丰富的配置选项，包括语言模式、高度、自动补全、代码折叠等功能，可以满足大部分代码编辑的需求。相比于其他编辑器，vue-codemirror支持的语言模式非常丰富，包括JavaScript、Python、Java等100多种语言。同时，vue-codemirror还支持自动补全、语法高亮、自动提示等功能，使得代码编辑更加高效和便捷。

使用vue-codemirror非常简单，只需要在Vue组件中引入并注册即可。可以通过设置组件的属性来配置CodeMirror编辑器的各种选项，例如语言模式、高度、自动补全等。同时，也可以使用Vue的响应式数据来动态更新编辑器的内容。

2 安装使用

2.1 安装 vue-codemirror

// 指定安装4.x版本
// 目前最新版本6.x，仅支持Vue3.0
npm i vue-codemirror@4.x --save

// codemirror 需要与 vue-codemirror 同时安装
npm i codemirror@5.x --save

2.2 使用 codemirror

2.2.1 引入

新建样式以及配置文件cm-setting.js

// cm-setting.js
// 组件样式
import "codemirror/lib/codemirror.css";
// 主题
import "codemirror/theme/3024-day.css"; // 引入主题样式，根据设置的theme的主题引入
import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/monokai.css";
import 'codemirror/theme/rubyblue.css';

	
// html代码高亮
import "codemirror/mode/htmlmixed/htmlmixed.js"; 

// 语言模式
import 'codemirror/mode/javascript/javascript.js'

1.全局引入

// main.js
import Vue from "vue";
import App from "./App";

// 引入
import {
   
    codemirror } from "vue-codemirror";
	
// 引入配置对应的文件（样式、主题、代码格式等）
import "@/utils/cm-setting.js";
	
// 注册使用
Vue.component("codemirror", codemirror);
	
...