HTML5 & CSS3

HTML

知识点	笔记地址
基础语法
排版标签
路径
多媒体标签
链接标签
列表标签
表格标签
表单标签
布局标签
语义化标签
字符实体
SEO 基础的优化 (logo 优化)

CSS

选择器 | 外观 | 文字 | 背景 | 标准流 | 三大特性 | 盒模型 | 伪元素 | 浮动 | 伪类 | 定位 | 圆角 | 阴影 | 透明 | 过渡 | 显示 | 网格布局 | 弹性布局(圣杯布局，双飞翼布局，品字布局)

选择器

外观

文字

背景

标准流

三大特性

盒模型

伪元素

浮动

伪类

定位

圆角

阴影

透明

过渡

显示

网格布局

弹性布局(圣杯布局，双飞翼布局，品字布局)

移动 Web

CSS高级特效

字体图标｜2D转换｜3D转换｜动画

字体图标

2D 转换

3D 转换

动画

移动适配

rem ｜ vw/vh｜Flex布局模型｜Less基础语法｜视口｜分辨率｜二倍图｜移动适配｜媒体查询

rem

vw/vh

Flex布局模型

Less基础语法

视口

分辨率

二倍图

移动适配

媒体查询

响应式

媒体查询｜ bootstrap框架｜栅格系统｜组件｜响应式网页布局

媒体查询

bootstrap框架

栅格系统

组件

响应式网页布局

JavaScript

JavaScript 基础

变量

基本数据类型

数据类型的转换

运算符

if分支

switch分支

三元表达式

while循环

for循环

数组

函数

对象

内置对象

let / const

字面量

WebAPI

DOM

DOM 树

DOM 对象

获取元素

innerHTML

style

className

classList

间歇函数

延迟函数

事件监听

鼠标事件

键盘事件

高阶函数

环境对象

节点操作

事件流

事件委托

元素位置

BOM

BOM

window对象

swiper插件

本地存储

自定义属性

正则表达式

JavaScript高级

知识点	Description
构造函数
单体对象
面向对象 / 原型 / 原型链
解构
剩余
展开
箭头函数
Object
Array
严格模式
闭包
继承
防抖
节流
异常处理
深浅拷贝
JS 阻塞
懒加载
作用域 / 作用域链
异步 / 事件循环机制
ES6~ES12

底层原理实现

自定义 promise

自定义 axios

自定义 PubSub

自定义 EventBus

自定义 React、Vue 脚手架

自定义实现 lodash 方法

Ajax

利用 axios 发起 Ajax 请求，实现前后端的数据交互。了解 HTTP 请求的过程以及 Ajax 的底层原理。

深入学习 JS 异步的底层原理，能够使用 Promise 处理异步操作，并使用 async/await 简化异步操作。

客户端与服务器

axios

请求与响应报文

接口

form 表单

拦截器

FormData

文件上传

XMLHttpRequest

Promise

async / await

EventLoop

宏任务 / 微任务

Web 安全

HTTPS

内容安全策略（CSP）

跨域资源共享

OWASP 安全风险

Git

能够创建 Git 仓库管理项目，基于 Git 分支进行多人协同开发

安装和配置 Git | Git 本地操作的常用命令 | .gitignore 忽略文件 | Git 分支与常用命令 | 远程仓库的使用

安装和配置 Git

Git 本地操作的常用命令

.gitignore 忽略文件

Git 分支与常用命令

远程仓库的使用

Git快速上手

https://haloboys.github.io/2022/09/20%E5%B7%A5%E5%85%B7/%E5%B7%A5%E5%85%B7_Git_Git%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/efc31b2a/

Vue (Vue2 + Vue3)

预备阶段

掌握模块化思想，npm包管理，webpack基础，初探工程化开发。

Node.js安装

fs模块

path模块

http模块

npm

包配置文件

npm常用命令

模块化概念

CommonJS

ES6Module

工程化开发概念

webpack基础配置

dev-server

webpack插件

常用loader

babel

Vue 核心技术

MVVM

SPA

Vue 调试工具

虚拟DOM

diff算法

指令系统

v-model原理

数据选项

生命周期

样式穿透

动态样式

插槽

组件系统

组件通信

自定义指令

ref

动态组件

$ nextTick

自定义事件

计算属性

侦听器

组件库

组件封装

keep-alive

路由系统

导航守卫

vue-cli

vuex

vant

element-ui

路由懒加载

Vue3.0 （Vue3 + TypeScript）

掌握Vue3新特性、Vite、组合 API、Pinia …

Vite

选项API

组合API

setup

生命周期

reactive

toRef

toRefs

computed

组件通信

依赖注入

ref 边界

Pinia

TypeScript

掌握TypeScript基础语法，并且在Vue3项目中熟练运用TypeScript

基础类型

联合类型

字面量类型

类型推断

类型断言

泛型

类型声明

ts 结合 composition-api

ts 结合 axios

头条案例

小程序

原生小程序

账号申请

开发工具

工程目录

项目配置

屏幕适配

资源托管

字体图标

数据绑定

事件处理

生命周期

场景值

模块化

网络请求

路由

WXS

模板

组件

UI 框架

表单

Promise

uni-app

脚手架

项目配置

单文件组件

生命周期

条件编译

计算属性

跨平台支持

less

sass

组件通信

电商项目

客户消息

微信支付

微信地址

小程序转发

区域滚动

上拉加载

下拉刷新

数据缓存

用户信息

自定义组件

微信登录

意见反馈

上线发步

React

React核心

Hooks

Redux中间件

TypeScript

ts 结合 hooks | ts 结合 redux | ts 结合路由 | 点餐案例重构

数据可视化

canvas

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

svg

参考文档：https://www.runoob.com/svg/svg-tutorial.html

echarts

参考文档：https://echarts.apache.org/zh/index.html

项目

Github ProJect

50 Projects in 50 Days - HTML/CSS and JavaScript: https://github.com/bradtraversy/50projects50days

购物车案例（Vue2）

项目地址：https://github.com/HaloBoys/ShopCar_Vue2.X

Todo 项目（Vue2）

项目地址：https://github.com/HaloBoys/TodoList_Vue2.X

尚品汇（Vue2）

项目地址：https://github.com/HaloBoys/ShangPinHui_Vue2.X

尚品汇后台管理（Vue2）

项目地址：https://github.com/HaloBoys/ShangPinHui_Vue2.X_Manage

小兔鲜儿电商项目首页制作

精灵图 | 文档编码 | 性能优化 | 布局技巧 | SEO | 性能优化 | 版心 | 设计稿 | PxCook

小兔鲜电商小程序项目

小程序无需安装，用完即走的应用方式越来越受到用户的欢迎，企业也都纷纷开展了小程序的开发。

小兔鲜儿是一个经典的电商类小程序项目，包括商品、用户、购物车、订单等核心功能模块，采用 uni-app 框架做为跨平台小程序开发方案，并综合运用了原生小程序的组件化、模块化、网络请求、本地存储、微信登录、微信支付等技术

学习目标

能够开发跨平台的小程序
能够独立开发小程序项目
掌握微信登录的实现方式
掌握微信支付的实现方式

解决方案

小程序跨平台开发解决方案
小程序微信登录实现方案
小程序微信支付实现方案
下拉刷新/上拉加载交互实现方案
数据缓存实现方案

知识点

uni-app跨平台开发框架
组件封装及通信
微信支付/登录
pinia 状态管理
基于vue3+ts技术实践方案
小程序云开发
vant组件库

数据看板项目

数据看板是一个数据可视化项目，通过折线图、K线图、柱状图等图表形式归纳汇总大量数据，以实现更加直观的数据表达效果。

学习目标

掌握Echarts 各类型数据可视化图表的应用
能够根据需要求创建折线图、K线图、地图等图表
掌握前后端分离技术的实现方式并了解其意义
掌握使用token进行访问鉴权功能实现

解决方案

基于 bootstrap 的响应式页面布局方案
基于 echarts 的数据可视化解决方案
基于 token 的访问权限控制解决方案

知识点

基于axios 实现网站注册和登录功能
基于 Echarts 结合需求高度自定义不同类型的可视化图表
Ajax、数据渲染和服务端推送前后端分离技术的应用
基于 token 的访问权限控制功能

面经全端项目

面经系统，由面试经验文章PC管理后台，个人H5端面试文章浏览组成。能够锻炼对 Vue 完整技术栈的运用。同时该项目还涵盖了 token 身份认证、Vue 组件库、文件上传、富文本编辑器等前端技术解决方案，移动端开发，适合刚入手 Vue 框架、希望通过项目开发来巩固 Vue 基础的前端开发者学习。

学习目标

掌握 element-ui 组件库的运用
掌握 axios 以及拦截器的应用
掌握 Vuex 管理全局状态的技术解决方案
熟练使用 vue-router 管理组件的切换展示
掌握 element-ui 中如何自定义表单的校验规则
掌握文件上传和富文本编辑器在 Vue 项目中的应用
掌握 Vant 组件库的运用
掌握使用 postcss-px-to-viewport 实现移动端适配

解决方案

token身份认证解决方案
文件上传解决方案
富文本编辑解决方案
表单验证解决方案
基于vant的移动端界面构建方案
基于postcss-px-to-viewport移动端适配方案

知识点

基于 vue-cli 创建工程化的 Vue 项目
基于 element-ui 组件库快速实现项目布局
用户注册与登录的业务解决方案
使用 Vuex 管理全局共享的数据
使用 axios 实现前后端的数据交互
基于 vant 组件库快速构建移动端界面

iHRM人力资源项目

iHRM是一款基于SaaS平台的人力资源管理系统，企业通过该系统可以完成公司组织架构管理、员工管理、角色管理、权限管理（审批、考勤、社保）等，为企业的人力资源管理提供一站式解决方案。

学习目标

掌握Vue + Element技术栈在开发管理型后台项目的技术开发能力
具备角色，人员，权限类系统的设计整体设计及应用能力
拥有Vuejs相关的技术要点及配套的插件，解决方案深度使用能力

解决方案

基于element-ui和vue2进行大型中台项目开发解决方案
基于axios封装请求工具模块解决方案
基于token的前端登录解决方案
vuex分模块持久化解决方案
RBAC大型中台项目权限控制解决方案
excel批量导入导出解决方案
上传组件封装解决方案
多语言动态主题解决方案
树形结构处理解决方案

知识点

优医问诊项目

优医问诊是一个连接医生和患者的移动医疗行业H5应用，通过高效、快速的在线问诊服务，为患者提供健康帮助，涵盖了找医生、快速问诊、开药门诊、疾病查询，健康健康百科等功能。

该项目基于Vue3+TypeScript进行开发，且引入下一代状态管理工具 Pinia 和最热门的前端移动UI组件库 Vant ，采用全新技术栈

学习目标

掌握使用Vue3 + TypeScript 开发大型前端项目开发能力
掌握使用Vant组件库开发移动端项目能力
掌握 Pinia 状态管理工具实现项目状态管理
掌握第三方登录和第三方支付业务解决能力
掌握快速问诊等在线问诊主流业务开发能力

解决方案

基于vue3.0+typescript中大型项目开发解决方案
基于vant组件库快速构建H5界面解决方案
基于vue-router的前端路由解决方案
基于vite构建vue3.0项目解决方案
基于pinia的状态管理解决方案
基于pinia-plugin-persistedstate状态持久化解决方案
基于@vuecore/use的组合API工具库解决方案
基于id-validator的身份证信息校验解决方案
基于postcss-px-to-viewport移动端适配解决方案
基于vite-plugin-svg-icons的svg图标组件解决方案
基于tailwindcss的原子化类名现代解决方案
基于socket.io的即时通讯问诊室解决方案
基于eruda 的移动端调试解决方案
第三方登录解决方案
第三方支付解决方案

知识点

极客园H5项目

「极客园」对标“CSDN”、“博客园”等竞品，致力成为更加贴近年轻 IT 从业者（学员）的科技资讯类应用。本项目是极客园移动端，主要涵盖了H5端新闻资讯类项目的核心业务。

包括首页文章列表上拉加载与刷新，频道管理，本地线上频道管理，文章搜索，文章评论与回复，组件缓存，token过期与刷新处理，用户权限拦截，个人信息修改解决方案。

学习目标

熟练掌握typescript + react技术栈 + antd-mobile组件库开发H5移动端新闻资讯类项目的技术能力。

解决方案

基于typescript开发中大型项目的解决方案
基于antd-design组件库移动端解决方案
基于react全家桶（react hooks + redux + react-router）移动端解决方案
基于axios封装请求工具类解决方案
基于token的前端登录解决方案，封装PrivateRouter拦截未登录用户
基于token实现token过期与token刷新处理
封装KeepAlive组件实现组件缓存的解决方案
基于antd-mobile实现文章列表的下拉刷新与上拉加载功能

知识点

极客园PC端项目

学习目标

熟练掌握 typescript + react技术栈（umi + dva + antd组件库 )开发后台管理项目的技术能力。

解决方案

基于react hooks实现后台管理系统的解决方案
基于ant-design组件库解决方案
基于react-router的前端路由解决方案
基于dva的状态管理解决方案
基于react-quill的富文本编辑器解决方案
基于 umi 的构建react项目解决方案

知识点

Todo

[x] 说一下vue生命周期
[x] 说一下组件通信
[ ] 说一下vuex
[ ] 说一下双向绑定的原理
[ ] 知道哪些 vue 指令
[ ] 说一下自定义指令
[ ] 说一下路由传参
[ ] 说一下防抖节流
[ ] 说一下this
[ ] 怎么阻止默认事件
[ ] 怎么阻止事件冒泡
[ ] 数组常用的方法
[ ] 数组去重知道哪些方法
[ ] 字符串操作方法
[ ] 怎么判断一个数是不是素数，逻辑怎么写？
[ ] 怎么清除浮动
[ ] div怎么垂直居中
[ ] 怎么画0.5px的线
[ ] 说一下盒模型
[x] 两个异步请求数据操作怎么合并
[ ] V-model是谁的语法糖
[ ] query和params区别
[ ] vue怎么获取dom
[ ] flex布局怎么把元素搞到右上角
[ ] promise有几种状态，会不会改变
[ ] async和await解决什么问题？
[ ] let和const区别
[ ] const定义对象里面的属性值能不能改？
[ ] 常见状态码
[ ] 对同步和异步的理解
[ ] 常见的宏任务，微任务？
[ ] 怎么判断两个数组相等？
[ ] es6遍历数组的方法？
[ ] 前端怎么给数据加密？
[ ] 两个html文件怎么传值？
[ ] vue3了解多少？
[ ] 数据结构了解哪些
[ ] 怎么查找两个数组的交集
[ ] 二叉树查找
[ ] 了解哪些网络安全知识
[ ] 对称加密和非对称加密哪个效率高
[ ] web木马了解吗
[ ] 用户输入url会发生什么
[ ] flex布局元素怎么放右下角
[ ] js的设计模式？
[ ] var let const区别
[ ] 遍历数组的方法，哪个可以跳出循环，哪个效率最高
[ ] promise捕获错误的方式
[ ] 异步任务有哪些
[ ] vue兼容到ie几
[ ] 组件通信
[ ] 生命周期父子组件执行顺序
[ ] 过滤器有没有用过
[ ] 用第三方库报错怎么办
[ ] 点击高亮的选项卡怎么实现
[ ] 图标跟随鼠标移动怎么实现
[ ] 50+ Vue经典面试题源码级详解 https://juejin.cn/post/7097067108663558151#heading-31

前端开发手册

HTML5 & CSS3

HTML

CSS

移动 Web

CSS高级特效

移动适配

响应式

JavaScript

JavaScript 基础

WebAPI

DOM

BOM

JavaScript高级

底层原理实现

Ajax

Web 安全

Git

Vue (Vue2 + Vue3)

预备阶段

Vue 核心技术

Vue3.0 （Vue3 + TypeScript）

TypeScript

小程序

原生小程序

uni-app

电商项目

React

React核心

Hooks

Redux中间件

TypeScript

数据可视化

canvas

svg

echarts

项目

Github ProJect

购物车案例（Vue2）

Todo 项目（Vue2）

尚品汇（Vue2）

尚品汇后台管理（Vue2）

小兔鲜儿电商项目首页制作

小兔鲜电商小程序项目

学习目标

解决方案

知识点

数据看板项目

学习目标

解决方案

知识点

面经全端项目

学习目标

解决方案

知识点

iHRM人力资源项目

学习目标

解决方案

知识点

优医问诊项目

学习目标

解决方案

知识点

极客园H5项目

学习目标

解决方案

知识点

极客园PC端项目

学习目标

解决方案

知识点

Todo