Web前端学习路线图
一、基础入门
开发工具
页面结构-HTML5
- 标签语法
- 排版标签
- 语义化
- SEO
PC端网页布局-CSS3
- 选择器
- 盒模型
- 浮动
- 定位
- 过渡
- 精灵图
移动端网页布局
- Flex布局
- Grid布局
- REM
- 媒体查询
- vw/vh
- Bootstrap
- Less/sass
- 字体图标
- 平面转换
- 3D 转换
- 动画
二、技术进阶
- ES5
- ES6+
- setTimeout/setInterval
网页交互
- DOM 操作
- 原生Dom操作
- jQuery
- 网页特效
- 事件
- DOM 操作
前后端交互
- ajax
- axios
- Promise
- async/await
- Eventloop
- API 接口
- token
- cookie
- localStorage/sessionStorage
三、Node.js
Node.js基础
- Node.js
- 模块化
- express
- jest
管理工具
TypeScript
- TypeScript
- 类型
- 泛型
四、Vue.js
Vue2.x 核心技术
- Vue2.js
- 指令系统
- 常用选项
- 组件化
- 组件通讯
- 插件
Vue2.x全家桶
- vue-cli: 基于 Vue.js 进行快速开发的完整系统
- vue-router: Vue.js 官方的路由管理器
- vuex: 专为 Vue.js 应用程序开发的状态管理模式
- ElementUI
- vant
Vue3.js
PC端企业中台项目
- vue-admin-template
- RBAC
- 组件封装
- 国际化
- 性能分析
- Excel 导入导出
- Echarts
- wangeditor
- moment/dayjs
- js-cookie
- js-md5
- crypto-js
- 防抖debounce/节流throttle
- 竞态请求
移动端项目
- Tailwindcss
- 即时通讯
- 第三方登录
- 第三方支付
- 高德地图
五、小程序开发
原生微信小程序
- 微信小程序
- 组件封装及通信
- 微信支付/登录
- Vant Weapp
跨平台小程序
其他
六、React.js
React.js 核心技术
- React.js
- JSX
- 组件及组件通讯
- 虚拟 DOM
- 生命周期
TypeScript 开发
- ts+hooks
- ts+redux
- ts+router
移动端项目
- TypeScript
- hooks
- redux
- router
- lodash
- antd-mobile
- websocket
- 组件缓存
- 性能优化
PC 端项目
七、面试与就业
- 常见算法
- 浏览器原理
- Vue 原理
- React 原理
参考: