vue code layout

Vue 仿 VSCode 布局组件 A Vue editor layout component that like VSCode and can be used to develop web editors.

34
5
Vue

vue-code-layout

一个仿 VSCode 的 Vue 编辑器布局组件,可以用于开发Web编辑器。

截图


特性

  • 简洁易用,体积小
  • 支持添加面板
  • 支持拖拽面板
  • 支持自定义面板图标、文字、渲染等
  • 支持VSCode外壳布局与编辑器区域布局
  • 支持保存、加载数据
  • 支持定义CSS样式

安装

npm install -save vue-code-layout

在 main.ts 中导入:

import 'vue-code-layout/lib/vue-code-layout.css'
import VueCodeLayout from 'vue-code-layout'

createApp(App)
  .use(VueCodeLayout)  

关于详细的用法,请参考文档。

文档

查看文档

查看在线演示

开发

git clone [email protected]:imengyu/vue-code-layout.git
cd vue-code-layout
npm install
npm run dev        # Development serve project
npm run build-demo # Build example project
npm run build-lib  # Build library project

问题

开源项目需要大家的支持才能越做越好。如果您遇到了问题,可以在仓库提出Issue,我会尽可能的给你解决。

如果您有好的修改,欢迎提交PR,成为项目的一员!

广告:作者的其他有用的项目

License

MIT