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 VSCode and can be used to develop web editors.
https://github.com/imengyu/vue-code-layout
ant-design arco-design code electron element-plus element-ui js layout layouts ui ui-components vscode vue vue3 vue3-typescript vuejs windows
Last synced: about 3 hours ago
JSON representation
Vue 仿 VSCode 布局组件 A Vue editor layout component that like VSCode 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 (8 months ago)
- Default Branch: master
- Last Pushed: 2024-10-17T05:38:36.000Z (about 1 month ago)
- Last Synced: 2024-10-19T07:54:55.330Z (28 days ago)
- Topics: ant-design, arco-design, code, electron, element-plus, element-ui, js, layout, layouts, ui, ui-components, vscode, vue, vue3, vue3-typescript, vuejs, windows
- Language: Vue
- Homepage: https://docs.imengyu.top/vue-code-layout-docs/
- Size: 2.4 MB
- Stars: 31
- Watchers: 3
- Forks: 4
- Open Issues: 6
-
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)