本文将介绍如何在 Vue3 使用 Monaco。
创建 vue3 项目
通过以下命令创建项目,根据提示一步一步创建即可。
npm create vue@latest
除了 Typescript 其他全默认即可。
安装项目依赖
Monaco 开源项目很多,这个项目更新很活跃,用法和 react 也比较类似。
npm i @guolao/vue-monaco-editor
创建组件并初始化
创建 Editor 组件,这里 Width、Height 根据需要进行设置,如果不设置默认大小只有 5px。
<template>
<vue-monaco-editor
width="100vw"
height="100vh"
v-model:value="code"
theme="vs-dark"
:options="MONACO_EDITOR_OPTIONS&