Vue3.0使用TSX模板创建代码编辑器页面

最新推荐文章于 2024-04-28 10:07:38 发布

linkscope

最新推荐文章于 2024-04-28 10:07:38 发布

阅读量1.4k

点赞数 3

文章标签： vue.js typescript

本文链接：https://blog.csdn.net/SearchCXKCCTV/article/details/111579078

版权

本文介绍了如何在Vue3.0项目中使用MonacoEditor，探讨了采用TSX的原因，提供了配置Vue项目支持TSX的方法，并详细讲解了创建MonacoEditor组件的关键步骤，包括引入monaco-editor库和vue-jss库，以及利用shallowRef实现代码编辑器的功能。

摘要由CSDN通过智能技术生成

使用MonacoEditor

MonacoEditor是微软开源的一个在线页面代码编辑器，由于API众多却缺乏实例代码，特此记录一下如何在Vue3.0最新版本中使用Monaco

为什么使用TSX

Vue3.0由于加入了Composition-API支持，使得JSX模板语法得以更好地进行编写，而由于TypeSript不支持.vue后缀文件的代码检查，在使用TSX语法一切都可以迎刃而解，这里不再赘述Composition-API的使用方法以及深层运行原理，我们只需要知道.vue文件实际上是在编译执行rener函数，而setup支持返回render函数即可

让Vue项目支持TSX

@vue/babel-plugin-jsx: https://github.com/vuejs/jsx-next.

该babel插件已在vue-ant-design项目当中使用，可使用性有一定的保障，日常由阿里几个员工负责维护，已在vue-next项目中进行推荐使用，具体如何使用不在赘述

开始编写MonacoEditor组件

这里自动视为你熟知TSX模板语法，简单介绍一下关键部分：

monaco-editor: 这是微软的编辑器库，API文档: https://microsoft.github.io/monaco-editor/api/.
vue-jss: 这是一个基于Vue3.0编写的Class类库，TS类型声明的很齐全，使用方法也非常简单，你只需要创建一个createUseStyle实例，再往里添加你想要的css样式即可，github: https://github.com/pure-vue/vue-jss.
shallowRef: 只关注与.value的变化但不会使其value变成一个响应式，官方原文：Create a ref that tracks its own .value mutation but doesn’t make its value reactive.

import * as Monaco from 'monaco-editor'
import {
   
  defineComponent,
  onMounted,
  PropType,
  shallowRef,
  ref,
  onBeforeUnmount,
  watch
} from 'vue'
import {
    createUseStyles } from 'vue-jss'

let subscription: Monaco.IDisposable | undefined
let preventTriggerChangeEvent = false
const useStyles = createUseStyles({
   
  container: {
   
    border: '1px solid #eee',
    display: 'flex',
    flexDirection: 'column',
    borderRadius: 5
  },
  title: {
   
    backgroundColor: '#eee',
    padding: '10px 0',
    paddingLeft: 20
  },
  code: {
   
    flexGrow: 1
  }
})

export default defineComponent({
   
  name: 'Monac