前端插件库之vue3使用vue-codemirror插件的步骤和实例

目录

• 使用
• 1.命令行安装
• 2.在需要的组件中配置
• 配置说明:
• 个人代码编辑区Demo
• 总结

vue-codemirror

基于 CodeMirror ，适用于 Vue 的 Web 代码编辑器。

使用

1.命令行安装

npm install vue-codemirror --save
// cnpm install vue-codemirror --save

如果运行官网例子时, 报错:

@codemirror/lang-javascript
@codemirror/theme-one-dark

可以在终端中安装对应文件, 解决问题

npm i  @codemirror/lang-javascript
npm i  @codemirror/theme-one-dark

2.在需要的组件中配置

配置说明:

个人代码编辑区Demo

代码编辑区

支持代码编辑区, 满足白天/黑夜主题切换, 满足c++/python语言切换

不足, 没有满足代码提示

组件代码 vue3

总结

到此这篇关于前端插件库之vue3使用vue-codemirror插件的文章就介绍到这了,更多相关vue3使用vue-codemirror插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！