# 学习网站 ## 视频教程 b站慕课网 [优课网](https://youkewang.top/category/qianduankaifa)（付费） ## 手册 [菜鸟教程](https://www.runoob.com/) [牛客](https://www.nowcoder.com/) [ES6入门教程](https://es6.ruanyifeng.com/) # 基础教程 ## html + css [黑马最新前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程](https://www.bilibili.com/video/BV1Kg411T7t9) 27h [pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程](https://www.bilibili.com/video/BV14J4114768) 56h ## JavaScript [pink老师 JavaScript基础语法](https://www.bilibili.com/video/BV1Sy4y1C7ha) 48h ## Vue [vue todolist](https://zmrenwu.com/courses/vue2x-todo-tutorial/materials/38/) 图文，开胃菜，用于快速入门 [coderwhy 最全最新Vue、Vuejs教程，从入门到精通](https://www.bilibili.com/video/BV15741177Eh) 68h [尚硅谷 Vue2.0+Vue3.0全套教程丨vuejs从入门到精通](https://www.bilibili.com/video/BV1Zy4y1K7SH) 46h ## React [尚硅谷 React技术全家桶全套完整版（零基础入门到精通）](https://www.bilibili.com/video/BV1wy4y1D7JT) 40h [React入门到实战](https://www.bilibili.com/video/BV1Z44y1K7Fj) 20h ## webpack [千锋陆荣涛最新前端webpack5全套教程，全网最完整的webpack教程（基础+高级）](https://www.bilibili.com/video/BV1YU4y1g745) 10h [尚硅谷新版Webpack5实战教程(从入门到精通)](https://www.bilibili.com/video/BV1e7411j7T5) 10h # 实战教程 ## vue #### 付费 [Vue全家桶实战从零独立开发企业级电商系统](https://coding.imooc.com/class/chapter/397.html) [Vue 实战商业级读书Web APP 全面提升技能](https://coding.imooc.com/class/285.html) #### 免费 [前端项目/vue项目实战/vue+element-ui/vue经典案例分享/紧贴实战的vue经典案例](https://www.bilibili.com/video/BV1QU4y1E7qo) [尚硅谷VUE项目实战，前端项目-尚品汇](https://www.bilibili.com/video/BV1Vf4y1T7bw) [前端实战项目】手把手教你从零开始做一个网易云音乐，月嫂级毕业设计教程](https://www.bilibili.com/video/BV1c44y1g7ac) [【Web前端】Vue实战案例-后台管理系统](https://www.bilibili.com/video/BV1R3411p7wa) [Vue实战项目—易购商城](https://www.bilibili.com/video/BV1A34y1Y7KV) [尚硅谷Vue项目(vue实战谷粒外卖)](https://www.bilibili.com/video/BV1hs411E7cB) [通俗易懂的Vue实战项目-搭建个人博客](https://www.bilibili.com/video/BV11i4y177ku) ## React #### 付费 [React16+Redux 实战企业级大众点评Web App](https://coding.imooc.com/class/313.html) #### 免费 [尚硅谷React项目教程(react实战全栈谷粒后台)](https://www.bilibili.com/video/BV1i4411N7Qc) [利用react+antd的实战开发项目——商城系统的管理后台](https://www.bilibili.com/video/BV1464y1F7EM) [黑马程序员React从零基础入门到react好客租房项目实战](https://www.bilibili.com/video/BV14y4y1g7M4) [React项目实战课程](https://www.bilibili.com/video/BV1R4411a7QC) ## webpack [webpack5 + vue3 从零配置项目](https://juejin.cn/post/7056398225095262245) [教你用webpack搭一个vue脚手架[超详细讲解和注释！]](https://juejin.cn/post/6844903545641107469) [使用webpack配置一个小型vue-cli脚手架](https://juejin.cn/post/6844903942317408269) # 练手项目 ## html + css #### 小米官网仿写 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2c05e6ca435471d85763878be79b393~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12708b195dbc48b39387168874441bd1~tplv-k3u1fbpfcp-zoom-1.image) #### 携程仿写 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4207973b4b3c4aa2ac4378da41df17e3~tplv-k3u1fbpfcp-zoom-1.image) #### 京东仿写 \ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59404c7460d8463a81a5cfc8016cb0c1~tplv-k3u1fbpfcp-zoom-1.image) ## JavaScript #### todo list ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c939cc7f944a424cbb5080e822607dfa~tplv-k3u1fbpfcp-zoom-1.image) #### todo list ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9398fadabbb433d9cbfa6bf735e8382~tplv-k3u1fbpfcp-zoom-1.image) ## 框架实战 github和gitee有很多Vue、React的练手项目。这些练手项目用Vue/React及工作中常用到的技术构造出一个完整的项目。这些项目主要有这么几类：电商（仿京东商城、仿小米商城）、音乐、020平台（仿饿了么、仿大众点评）、后台管理、社区（CNode、仿简书）、新闻（仿今日头条）、IM、博客、其他（通讯录、答题器）。从项目难易程度可以分为**简单项目**和**复杂项目**。简单项目可用于练手，熟悉框架和库的用法；复杂项目，比较接近企业级的实际项目，如果能仿照搭建出这种复杂项目，基本上就达到了胜任初级工程师岗位的程度了。 ## vue #### 答题器（移动端）简单 vue2 + vuex + less #### 课程管理系统简单 vue2 + vuex + vue-router + element-ui ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47836d54a718451fb5af7380415f2eb0~tplv-k3u1fbpfcp-zoom-1.image) #### 后台管理复杂 vue2 + vuex + vue-router + element-ui + vue-quill-editor + echart + less + fetch #### 仿知乎简单 vue3 + vuex + vue-router + typescript + ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9192b546b0db4139bf1a1089aaf51d20~tplv-k3u1fbpfcp-zoom-1.image) #### 新峰商城（移动端）复杂 vue3 + vuex + vue-router + vant + less + axios PS：该项目没有做图片懒加载，所以首页初始加载很慢 #### 新峰商城管理后台复杂 vite + vue3 + vue-router + wangeditor + element-plus + axios PS：测试账号密码：admin 123456 #### 管理后台复杂 vue2 + vuex + vue-router + element-ui + axios + echart #### 音乐播放器复杂 vite + vue3 + vue-router + sass + axios + element-plus + typescript #### 音乐播放器（移动端）复杂 vue2 + vuex + vue-router + rxjs + less + fetch #### Cnode社区（移动端）复杂 vue2 + vuex + vue-router + webpack-zepto ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08775cf12cc24d8f820c5069ee0dc5fa~tplv-k3u1fbpfcp-zoom-1.image) ## React #### 宜家（移动端）简单 react + redux + react-router + fetch + express ? ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63af13c5a3934383806340dc6fe6d637~tplv-k3u1fbpfcp-zoom-1.image) #### [ ](https://gitee.com/li_ya_xu/react-juejin) #### 音乐播放器复杂 react + redux + react-router + react-draggable + styled-components + axios + craco ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2154c7ffac4048669ae7ed5274b6ddd5~tplv-k3u1fbpfcp-zoom-1.image) [\ ](https://gitee.com/warm_one/react-muisc2) [\ ](https://gitee.com/wang_lllkkk/react-admin) [\ ](https://gitee.com/fine509/react_wiki) #### 旅游网简单 react + react-router + antd + sass + axios + typescript + craco ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a243eee4b784f7a81e7f9735caef48e~tplv-k3u1fbpfcp-zoom-1.image) #### 新闻管理后台复杂 react + redux + react-router + typescript + axios + antd + draft-js + echarts + react-tsparticles + json-server（全局安装） PS：react-particles-js已经不支持，卸载，然后替换成react-tsparticles就行了 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d99f4f7f490a43d78b2be27eed7c581b~tplv-k3u1fbpfcp-zoom-1.image) #### CNode社区复杂 react + redux + react-router + axios + less + antd ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ec75903f61142bf80e03e4b343d0ab4~tplv-k3u1fbpfcp-zoom-1.image) #### 好客租房复杂 react + react-router + sass + axios + antd-mobile PS：根据实战教程开发：[黑马程序员React从零基础入门到react好客租房项目实战](https://www.bilibili.com/video/BV14y4y1g7M4)。这个项目用到了百度地图的开发平台API，需要申请百度地图API权限：[百度开发平台文档-JavaScript API](https://lbsyun.baidu.com/index.php?title=jspopularGL) #### 报销审核（移动端）简单 react + redux + react-router + immutable + less + axios ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dce9b649c944c24b3a782abaad3228d~tplv-k3u1fbpfcp-zoom-1.image)