Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imengyu/vue-code-layout
Vue 仿 VSCode 布局组件 A Vue editor layout component that like visual studio code and can be used to develop web editors.
https://github.com/imengyu/vue-code-layout
ant-design arco-design code editor electron element-plus element-ui js layout layouts ui ui-components visual-studio-code vscode vue vue3 vue3-typescript vuejs windows
Last synced: 6 days ago
JSON representation
Vue 仿 VSCode 布局组件 A Vue editor layout component that like visual studio code and can be used to develop web editors.
- Host: GitHub
- URL: https://github.com/imengyu/vue-code-layout
- Owner: imengyu
- License: mit
- Created: 2024-03-28T15:21:34.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-12-20T12:08:20.000Z (about 1 month ago)
- Last Synced: 2025-01-09T02:34:03.170Z (13 days ago)
- Topics: ant-design, arco-design, code, editor, electron, element-plus, element-ui, js, layout, layouts, ui, ui-components, visual-studio-code, vscode, vue, vue3, vue3-typescript, vuejs, windows
- Language: Vue
- Homepage: https://docs.imengyu.top/vue-code-layout-docs/
- Size: 2.57 MB
- Stars: 38
- Watchers: 3
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.CN.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-code-layout
一个仿 VSCode 的 Vue 编辑器布局组件，可以用于开发Web编辑器。
---
## 特性
* 简洁易用，体积小
* 支持添加面板
* 支持拖拽面板
* 支持自定义面板图标、文字、渲染等
* 支持VSCode外壳布局与编辑器区域布局
* 支持保存、加载数据
* 支持定义CSS样式
### 安装
```
npm install -save vue-code-layout
```
在 main.ts 中导入:
```js
import 'vue-code-layout/lib/vue-code-layout.css'
import VueCodeLayout from 'vue-code-layout'
createApp(App)
.use(VueCodeLayout)
```
关于详细的用法，请参考文档。
## 文档
[查看文档](https://docs.imengyu.top/vue-code-layout-docs/)
[查看在线演示](https://docs.imengyu.top/vue-code-layout-demo/)
## 开发
```shell
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，成为项目的一员！
## 广告：作者的其他有用的项目
* [vue3-context-menu Vue右键菜单组件](https://github.com/imengyu/vue3-context-menu)
* [vue-dock-layout Vue仿Visual studio拖拽布局组件](https://github.com/imengyu/vue-dock-layout)
* [vue-dynamic-form vue数据驱动的表单](https://github.com/imengyu/vue-dynamic-form)
## License
[MIT](./LICENSE)