https://github.com/chinanf-boy/vuegg-explain
explain : vuegg 可视化 vue工程真的厉害, 继续挖坑, 自己看的快, 打得就没那么快了
https://github.com/chinanf-boy/vuegg-explain
drag drop explain vue vuegg
Last synced: 12 months ago
JSON representation
explain : vuegg 可视化 vue工程真的厉害, 继续挖坑, 自己看的快, 打得就没那么快了
- Host: GitHub
- URL: https://github.com/chinanf-boy/vuegg-explain
- Owner: chinanf-boy
- Created: 2018-05-07T03:35:48.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-08T11:38:32.000Z (about 8 years ago)
- Last Synced: 2025-02-08T08:47:12.864Z (over 1 year ago)
- Topics: drag, drop, explain, vue, vuegg
- Homepage: https://vuegg.now.sh
- Size: 143 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Vuegg
「 🐣 vue GUI generator [vuegg.github.io](vuegg.github.io) 」
[](https://github.com/chinanf-boy/Source-Explain)
Explanation
> "version": "0.17.0"
[github source](https://github.com/vuegg/vuegg)
~~[english](./README.en.md)~~
---
本次解释的项目是一个`全栈`项目, 所以分 server/client
- [ ] [server](#server)
- [ ] [client](#client)
---
本目录
---
### server
> 先说说, server 做了什么
1. `get-access-token`
从`github` - `oauth app` 中获取, 用户信息-`access_token`
2. `save-vuegg-project`
将, 前端所有状态保存在`github用户`-自己的`repo`中, 就像新建一个`repo` { `vue.gg` 文件被保存}
3. `get-vuegg-project`
获取上面的项目, {`vue.gg`文件}
4. `generate`
将所有前端-状态转译生成`.zip`文件, 下载
[>>> server <=== 先这个](./server.md)
### client
> 那么, 前端又做了什么呢
[>>> client](./client.md#client)
那就多了,
主要两大块
#### 1. `/` - 编辑页面
> 要可视化组件, 自然而然需要
- 拖拽操作的 `元素栏` => 画笔
- 每个元素设置的 `设置栏`
- 添加页面的 `页面栏`
> 有了画笔, 自然需要画布
- 放下操作的 `画布栏` => 画布
> 专注画布, 也提供了快捷键 比如 `Ctrl + Z` 自然就是回退等操作了
- 基本操作 「回退/前进/删除/保存/上传等」 `操作导航栏`
- 自然少不了 `用户栏`
#### 2. `/preview` - 预览页面
> 自然就是路由转换, 组件变换 的 预览
- 三种边窗大小变化对应 一般 {`移动端|平板|桌面`}
- 少不了, `回退 等` 小按钮的操作
#### 3. 404 页面
可以做得萌一点噢