{"id":20614257,"url":"https://github.com/imengyu/vue-code-layout","last_synced_at":"2025-04-09T14:06:13.132Z","repository":{"id":230245503,"uuid":"778873134","full_name":"imengyu/vue-code-layout","owner":"imengyu","description":"Vue 仿 VSCode 布局组件 A Vue editor layout component that like visual studio code and can be used to develop web editors.","archived":false,"fork":false,"pushed_at":"2025-03-31T02:54:21.000Z","size":1921,"stargazers_count":49,"open_issues_count":14,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T12:17:33.492Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://docs.imengyu.top/vue-code-layout-docs/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imengyu.png","metadata":{"files":{"readme":"README.CN.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-28T15:21:34.000Z","updated_at":"2025-03-31T02:54:24.000Z","dependencies_parsed_at":"2024-04-07T11:27:40.118Z","dependency_job_id":"bc6187a9-9cb7-47fe-bc31-2bbf696593ed","html_url":"https://github.com/imengyu/vue-code-layout","commit_stats":{"total_commits":53,"total_committers":1,"mean_commits":53.0,"dds":0.0,"last_synced_commit":"ecafa62723a888c2d7a49dc1e538762a1a53d577"},"previous_names":["imengyu/vue-code-layout"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imengyu%2Fvue-code-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imengyu%2Fvue-code-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imengyu%2Fvue-code-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imengyu%2Fvue-code-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imengyu","download_url":"https://codeload.github.com/imengyu/vue-code-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054230,"owners_count":21039952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-16T11:12:18.896Z","updated_at":"2025-04-09T14:06:13.100Z","avatar_url":"https://github.com/imengyu.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# vue-code-layout\n\n一个仿 VSCode 的 Vue 编辑器布局组件，可以用于开发Web编辑器。\n\n![截图](https://raw.githubusercontent.com/imengyu/vue-code-layout/master/screenshot/first.jpg)\n\n---\n\n## 特性\n\n* 简洁易用，体积小\n* 支持添加面板\n* 支持拖拽面板\n* 支持自定义面板图标、文字、渲染等\n* 支持VSCode外壳布局与编辑器区域布局\n* 支持保存、加载数据\n* 支持定义CSS样式\n\n### 安装\n\n```\nnpm install -save vue-code-layout\n```\n\n在 main.ts 中导入:\n\n```js\nimport 'vue-code-layout/lib/vue-code-layout.css'\nimport VueCodeLayout from 'vue-code-layout'\n\ncreateApp(App)\n  .use(VueCodeLayout)  \n\n```\n\n关于详细的用法，请参考文档。\n\n## 文档\n\n[查看文档](https://docs.imengyu.top/vue-code-layout-docs/)\n\n[查看在线演示](https://docs.imengyu.top/vue-code-layout-demo/)\n\n## 开发\n\n```shell\ngit clone git@github.com:imengyu/vue-code-layout.git\ncd vue-code-layout\nnpm install\nnpm run dev        # Development serve project\nnpm run build-demo # Build example project\nnpm run build-lib  # Build library project\n```\n\n## 问题\n\n开源项目需要大家的支持才能越做越好。如果您遇到了问题，可以在仓库提出Issue，我会尽可能的给你解决。\n\n如果您有好的修改，欢迎提交PR，成为项目的一员！\n\n## 广告：作者的其他有用的项目\n\n* [vue3-context-menu Vue右键菜单组件](https://github.com/imengyu/vue3-context-menu)\n* [vue-dock-layout Vue仿Visual studio拖拽布局组件](https://github.com/imengyu/vue-dock-layout)\n* [vue-dynamic-form vue数据驱动的表单](https://github.com/imengyu/vue-dynamic-form)\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimengyu%2Fvue-code-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimengyu%2Fvue-code-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimengyu%2Fvue-code-layout/lists"}