# zhufeng-vueDrops-2101

**Repository Path**: wangzhenzhou/zhufeng-vue-drops-2101

## Basic Information

- **Project Name**: zhufeng-vueDrops-2101
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 150
- **Created**: 2021-01-26
- **Last Updated**: 2021-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 可视化拖拽组件训练营

## 入营须知

- 本训练营共计一周，从 21 年 01 月 23 日晚 8 点开始到 21 年 01 月 30 日晚 8 点结束
- 参加本训练营需要支付 30 学分(视情况而决定)
- 第一部分由周六(23 号)上午发布相关的文档视频，第二部分由下周一(25 号)中午发布剩下的文档视频，届时全部发送完毕
- 目前先讲解的内容版本是 vue3 版本，React 版本后续会安排，请大家敬候佳音
- 上交作业的时间是下周六(30 号)晚八点，过时不候
- 交作业的版本可以是 vue 版本或是 react 版本，不过还是建议大家多多挑战自己呀！
- 上交作业的时候个人的话就按照正常的交作业的格式就好，小组的话，请把名字和学号写在一起
- 完成作业的同学可以把表格的学分填好呀
- 要参加的同学要填写表格[https://shimo.im/sheets/TWkG9PNmfo0yyMsI/MODOC](https://shimo.im/sheets/TWkG9PNmfo0yyMsI/MODOC)
- 本次训练营学分是 30 分，可以单兵做战，完成作业返回 45 分，也可以结成两个人的学死党团队做战，如果两个人都完成，每个返回 60 分，如果有一个没有完成，则不返回学分。

## 训练营说明

- 内容视频介绍：[https://www.bilibili.com/video/BV1BK4y1W7Eu/](https://www.bilibili.com/video/BV1BK4y1W7Eu/)
- Vue 版本项目预览：[http://martsforever-pot.gitee.io/vue-visual-editor/](http://martsforever-pot.gitee.io/vue-visual-editor/)
- React 版本项目预览：[http://martsforever-pot.gitee.io/react-visual-editor/](http://martsforever-pot.gitee.io/react-visual-editor/)

## 训练目标

训练主要流程（中途可能会补充或者调整顺序）

- [x] 主页面结构：左侧可选组件列表、中间容器画布、右侧编辑组件定义好的属性
- [x] 从菜单拖拽组件到容器；
- [x] Block 的选中状态；
- [x] 容器内的组件可以拖拽移动位置；
- [x] 命令队列以及对应的快捷键；
- [x] 单选、多选；
- [x] 设计好操作栏按钮：
  - [x] 撤销、重做；
  - [x] 导入、导出；
  - [x] 置顶、置底；
  - [x] 删除、清空；
- [ ] 拖拽贴边；
- [ ] 组件可以设置预定义好的属性；
- [ ] 右键操作菜单；
- [ ] 拖拽调整宽高；
- [ ] 组件绑定值；
- [ ] 根据组件标识，通过作用域插槽自定义某个组件的行为
  - [ ] 输入框：双向绑定值、调整宽度；
  - [ ] 按钮：类型、文字、大小尺寸、拖拽调整宽高；
  - [ ] 图片：自定义图片地址，拖拽调整图片宽高；
  - [ ] 下拉框：预定义选项值，双向绑定字段；

## 技能要求

本次可视化拖拽组件没有用额外的拖拽库。比如 Vue 中仅使用了 ElementPlus，React 仅使用了 Ant Design，其他所有功能要求同学跟着视频手写。视频中不会讲解太多基础知识，所以要求同学们基本一定的相关知识技能；

> 通用技能

- 能够熟练使用 Typescript，本次 Vue3.0 以及 React 版本的训练会全部使用 Typescript 开发，并且不会讲解 Typescript 的基础知识点；
- 熟练使用 css 预处理语言，本次以 Sass 为主（当然喜欢使用 Less 或者 Stylus 的同学可以使用自己擅长的语言，本次仅使用了 Sass 的一些基础语法）；
- 熟练使用 js 操作 dom，比如通过 js 读取 dom 的位置信息，通过 js 修改 dom 的位置信息。了解 js 的事件冒泡、事件捕获机制以及 mouse 事件与 drag 事件的区别以及用法。

> Vue3.0

- 能够基本掌握 Vue3.0 的响应式原理、template 中的基本语法、vue-jsx 的基本语法、组件封装等知识点。
- 能够熟练使用 CompositionAPI；并且基于 CompositionAPI+Typescript 封装具有严格类型声明的 Vue 组件；

> React

- 熟悉 React 基本语法；
- 熟练使用 React hook + Typescript 封装组件；

## 相关资料

> 以下排名不分先后

- [React 官方文档](https://react.docschina.org/docs/hello-world.html)
- [React Hook 官方文档](https://react.docschina.org/docs/hooks-intro.html)
- [Vue3.0 官方文档（中文）](https://v3.cn.vuejs.org/guide/introduction.html)
- [Vue3.0 文档（中文）](http://martsforever-snapshot.gitee.io/vue-docs-next-zh-cn/)：我在码云上同步过来的中文文档，不用翻墙，访问快很多；
- [渲染函数：官方文档](https://v3.vuejs.org/guide/render-function.html#jsx)
- [渲染函数：jsx-next github](https://github.com/vuejs/jsx-next#installation)
- [Composition API](http://martsforever-snapshot.gitee.io/vue-docs-next-zh-cn/guide/composition-api-introduction.html)：在 Vue3.0 文档中一样可以找到，这里给出直接访问地址。
- [Typescript Deep Dive](http://martsforever-snapshot.gitee.io/typescript-book-chinese/)：我在码云上同步过来的 `Typescript Deep Dive`一书的中文文档，不用翻墙访问很快；
- [@vue/cli Vue 官方脚手架](https://cli.vuejs.org/zh/)：官方推荐的用于创建 Vue 工程脚手架工具
- [Vite](https://www.npmjs.com/package/vite)：尤雨溪大佬新出的，旨在替代 webpack-dev 的开发工具，本次的 React 版本就是用 vite 搭建的，在全引入 antd 的情况下可以秒速启动（第一次慢一点）并且自带 React 热更新的功能；Vue 版本因为 ElementPlus 安装有问题，暂时无法使用；

## 入营要求

- 保证入营期间和老师保持通信联系，不许无故缺席失联
- 每天有至少 2 个小时的独立学习时间
- 保证入营期间积极参与讨论和整理学习成果或是想法

## 训练流程

- 1. 先将训练营的仓库代码仓库 `Fork` 到自己的码云账号下 [https://gitee.com/zhufeng-training/zhufeng-vue-drops-2101](https://gitee.com/zhufeng-training/zhufeng-vue-drops-2101)
- 2. 将 Fork 后的仓库 Clone 到本地
- 3. 在项目根目录下创建自己的项目并完成当天的任务，第 1 天是创建，后面就是添加代码了
- 4. 把实践总结(学到了什么？收获了什么?遇到了什么问题?如何解决的?)写在当天目录的`学习总结.md`文件里
- 4. 在本地仓库完成作业后，push 到自己的码云远程仓库中
- 5. 最后将自己最后的 commit 链接地址添加到训练营仓库的当天 issue 中
- 6. 完成后在微信群中打卡，并`@`助教加学分如果不会操作的可以看操作视频 [https://img.zhufengpeixun.com/submitwork.mp4](https://img.zhufengpeixun.com/submitwork.mp4)