全栈学习 Demo 大合集

说明: 💯 本项目包含常用的技术点和技术栈,时间为 2020 年度最新的技术栈,大范围的包含(Vue,Vuex,SSR,vue 源码解析,vue 实战,vue 单元测试,ts,React 入门,react 全家桶,react 组件,react 源码解析,redux,react-router,node 基础,node 网络编程,node 持久化 mysql,node 持久化 mongodb,node 部署,pm2,koa 实战,微信小程序,网络安全,RN,Flutter,webpack,微信公众号,自动化测试,前端性能优化,数据结构算法),包含小的 html,css,js 的设计模式等方向,数据可视化(最新增加)

• 选择哪个 Demo,都需要进入对应的目录下面安装 yarn or npm i

基础篇

1. 文字文本溢出解决方案 -> 文本溢出
2. 图片预加载 -> 预加载 vue 版本图片预加载
3. 手写一个 new -> new
4. 手写一个深拷贝 -> 深拷贝
5. 模拟订阅发布模式(观察者) -> 订阅发布
6. 玩转 Flex 布局 -> Flex
7. 函数柯里化 -> 柯里化
8. 实现 mergePromise 函数，把传进去的数组顺序先后执行 mergePromise
9. 图片上传操作七牛云 图片上传
10. localStorage 的过期时间处理 localStorage 过期

数据可视化学习

1. canvas 验证码 验证码
2. svg 矢量图绘制 svg
3. zender zender
4. canvas 进行 img 图片压缩 图片压缩
5. G2 绘图 G2
6. G6 绘图 G6
7. I7 地图编写 I7
8. echarts 全部 echarts 案例 echarts

实战篇

名称	源码	线上网址	技术栈
美团 PC 端	源码	线上	原生 React+antd+Koa+mongoose
美团移动端(推荐)	源码	线上	umi+dva+antd+Koa+mongoose
美团后台	源码	线上	vue+nuxt+elment+Koa+mongoose
饿了么多端开发	源码	线上	taro+taro-ui
饿了么微信小程序	源码	暂无	原生微信小程序
后台管理系统 (力荐)	源码	线上	TS + Hooks + Redux
React 封装自己组件	源码	线上	TS + Hooks
Vue 社区论坛网站(开发中)	源码	线上	vue+ts+lazyload
🔥 Vue React H5数据可视化,数据报表(开发中)	源码	正在开发	react+vue+echarts+v-echarts

TodoMVC 系列

• ⚡ Mobx.React.TodoMVC (Mobx) MVC
• 🔥 React.TodoMVC ( TS + Hooks ) MVC
• 🐠 Vue.TodoMVC ( 普通版 ) MVC
• ✂️ Vue.TodoMVC ( TS ) MVC

框架篇

vue 阶段

1. vue 购物车 -> 进入购物车
2. element 练习 -> 框架练习
3. vuex 和 vueRouter -> vuex 和 vue-router 练习
4. vue 源码解析 -> 迷你 Vue
5. vue 项目入门 -> 实战练习 vue
6. vue 完整项目 -> 完整项目
7. github 学习 koa -> koa
8. vueSSR 渲染 -> nuxt
9. vue 原生 ssr -> ssr
10. vue ts -> vue-ts
11. vue 单元测试 -> vue-demo

React 阶段

1. react 入门 & react 购物车 -> react-first react-sheng
2. react 生命周期 (react 16 之前,16版本之后) react-sheng
3. react 新特性 高级 context,HOC 高阶函数,具名插槽 react-hide
4. react 组件化 & antd 库的使用 & react-redux & react-thunk & react-router & redux-saga react-antd
5. generator -> genertor
6. antd-pro & 骨架屏 & umi 项目实战 -> react 项目
7. 手写 React 核心 Api & 探究 setState & 探究 diff 算法 -> react 原理
8. react + ts + hooks + antd 实例 -> react-hooks-ts
9. react-hooks 全部常用的 hooks react-hooks
10. 手写 redux,和常用中间件机制 redux-middleware

node 阶段

1. node 基础课程 -> node 基础
2. node 持久化 mysql -> node-mysql
3. node 持久化 mongodb -> mongodb
4. koa 实战 -> koa 实战
5. koa 鉴权 -> koa 鉴权

前端综合

1. 前端安全 -> 前端安全
2. 自动化测试 -> ce
3. 性能优化 -> xing
4. TypeScript -> ts
5. webpack 学习 -> webpackStudy
6. webpack 搭建 React 开发环境 webpack-react

微信

1. 微信-> weixin
2. 微信 oauth -> weixin2
3. 微信小程序初步学习 -> xiaochengxu
4. 微信云开发练习 -> yun

License

MIT