learn-VRA
learn-VRA copied to clipboard
LearnShare
Let's learn Vue/React/Angular together.
Vue、React 和 Angular 一起学怎么样？
Why not.
目标
- 同时学习 Vue、React 和 Angular
- 同步学习三者相同/相关的知识
- 全面切换为 TypeScript
- 融合以往的项目经验
- 尽量涉及更多、更广的内容
成果记录
- 将学习内容记录到文档中（编写为 Markdown 存放在本项目中）
- 将练习代码保存下来（存放在 Github 中，按主题独立分支）
交流讨论
- learnshare.hjq#gmail
- 各项目 issues
- Discord: Learn-VRA
相关代码
学习主题
| 主题 | 子主题 | Vue | React | Angular |
|---|---|---|---|---|
| 开发环境 | ||||
| Hello World | 创建和运行项目 | Vite | Create React App | Angular CLI |
| 项目结构和配置 | 项目结构 | 项目结构 | 项目结构 | |
| ESLint + Airbnb | ESLint + Airbnb | ESLint + Airbnb | ESLint + Airbnb | |
| SCSS + dart-sass | SCSS + dart-sass | SCSS + dart-sass | - | |
| Hello World | Hello World | Hello World | Hello World | |
| 应用配置和启动 | Vue 应用 | React 应用 | Angular 应用 | |
| 路径别名 | - | - | ||
| 组件 | 创建、注册和使用组件 | 创建和使用组件 | 创建、注册和使用组件 | |
| 单文件组件 | - | - | ||
| 模板 | HTML 和插值 | HTML 和插值 | JSX | HTML 和插值 |
| 属性绑定 | 属性绑定 | 属性绑定 | ||
| 显示或隐藏元素 | 显示或隐藏元素 | 显示或隐藏元素 | ||
| 循环 | 循环 | 循环 | ||
| 事件 | 事件 | 事件 | 事件 | |
| 表单 | 表单和双向绑定 | 表单 | 表单和双向绑定 | |
| 样式 | 样式 | 样式 | 样式 | |
| 数据 | 数据的响应性 | - | - | |
| data | state | 数据 | ||
| props | props | @Input | ||
| computed | - | - | ||
| 逻辑 | methods | - | - | |
| watch | - | - | ||
| 生命周期 | 生命周期 | 生命周期 | ||
| ref 和 DOM | 模板引用 | ref 和 DOM | 模板变量 | |
| - | - | TemplateRef | ||
| - | - | @ViewChildren | ||
| 跨组件数据传递 | props/@Input | props | props | @Input |
| attrs | attrs | - | attrs | |
| slot | slot | props.children 和 Render Props | 内容投影 | |
| 自定义事件 | $emit | 模拟事件语法 | @Output | |
| 局部共享 | Provide/Inject | Context | Service | |
| 状态管理 | Vuex | Redux | NgRx | |
| 路由 | Vue Router | React Router | @angular/router | |
- 开发环境
- hello-world
- 使用 TypeScript 的 Vue/React 项目
- 应用配置和启动
- 组件
- ref 和 DOM
- 跨组件数据传递
- 路由
- 网络请求
- 服务端渲染
- 测试
- 部署
LearnShare