阶段一基础前端知识1. HTML/CSS/JavaScript基础HTML5常用语义化标签article标签定义独立的内容。 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。html head meta charsetutf-8 title演示/title /head body article h1Internet Explorer 9/h1 p Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。/p /article /body /htmlheader标签定义文档或者文档的一部分区域的页眉。header 元素应该作为介绍内容或者导航链接栏的容器。在一个文档中您可以定义多个 header 元素。注释header 标签不能被放在 footer、address 或者另一个 header 元素内部。article header h1Internet Explorer 9/h1 ptime pubdate datetime2011-03-15/time/p /header p Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的/p /articlenav标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到 nav 元素。nav 元素只是作为标注一个导航链接的区域。在不同设备上手机或者PC可以制定导航链接是否显示以适应不同屏幕的需求。!DOCTYPE html html head meta charsetutf-8 title练习/title /head body nav a href/html/HTML/a | a href/css/CSS/a | a href/js/JavaScript/a | a href/jquery/jQuery/a /nav /body /htmlmain标签用于指定文档的主体内容。main 标签中的内容在文档中是唯一的。它不应包含在文档中重复出现的内容比如侧栏、导航栏、版权信息、站点标志或搜索表单。注意在一个文档中main 元素是唯一的所以不能出现一个以上的 main 元素。main 元素不能是以下元素的后代article、aside、footer、header 或 nav。!DOCTYPE html !DOCTYPE html html head meta charsetutf-8 title练习/title /head body main h1Web 浏览器/h1 pGoogle Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。/p article h1Google Chrome 浏览器/h1 pGoogle Chrome 浏览器是由 Google 开发的一款免费的开源 web 浏览器于 2008 年发布。/p /article article h1Internet Explorer 浏览器/h1 pInternet Explorer 浏览器由微软开发的一款免费的 web 浏览器发布于 1995 年。/p /article article h1Mozilla Firefox 浏览器/h1 pFirefox 浏览器是一款来自 Mozilla 的免费开源 web 浏览器发布于 2004 年。/p /article /main /body /htmlsection标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。!DOCTYPE html html head meta charsetutf-8 title练习/title /head body section h1WWF/h1 pThe World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961./p /section section h1WWFs Panda symbol/h1 pThe Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF./p /section /body /htmlaside,footer标签的正确使用场景HTML5新特性video, audio, canvas, svg, progress, meter表单新特性placeholder, required, pattern, autocompleteCSS3特性Flexbox布局 - display: flex及相关属性容器属性flex-direction, flex-wrap, justify-content, align-items, align-content项目属性flex-grow, flex-shrink, flex-basis, order, align-selfGrid布局display: grid及相关属性网格定义grid-template-columns, grid-template-rows, grid-template-areas网格间隙grid-gap项目放置grid-column, grid-rowCSS3选择器属性选择器, 伪类选择器, 伪元素选择器CSS3动画keyframes, animation属性CSS3过渡transition属性CSS3变换transform属性媒体查询media变量--variableJavaScript ES6语法变量声明let, constlet 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量一旦声明常量的值就不能改变。箭头函数() {}模板字符串 string ${variable} 解构赋值数组解构, 对象解构扩展运算符...剩余参数function(...args)默认参数function(a 1)增强的对象字面量简写属性, 计算属性名, 方法简写Promisenew Promise(), then(), catch(), finally()async/await异步函数模块系统import, export类class, extends, super迭代器与生成器*, yield2. TypeScript基础类型系统- 基本类型number, string, boolean, null, undefined, symbol, bigint- 联合类型string | number- 交叉类型A B- 类型断言as, Type- 类型守卫typeof, instanceof, 自定义类型守卫- 类型推断TypeScript的自动类型推断- 类型别名type- 接口interface- 泛型T, 泛型约束, 泛型默认值- 高级类型- 映射类型Record, Partial, Required, Pick, Omit- 条件类型T extends U ? X : Y- 工具类型ReturnType, Parameters, ConstructorParameters- 模块声明declare module- 命名空间namespace阶段二Vue 3核心1. Vue 3基础 组件基础- 组件定义defineComponent- 组件注册全局注册, 局部注册- 组件通信Props, Emits- 组件生命周期onMounted, onUnmounted, onUpdated, onBeforeMount, onBeforeUpdate, onBeforeUnmount- 组件样式scoped样式, 深度选择器模板语法- 插值{{ }}- 指令v-if, v-else, v-else-if, v-for, v-show, v-bind, v-on, v-model, v-slot- 计算属性computed- 侦听器watch, watchEffect- 过滤器已废弃使用计算属性替代响应式系统- ref基本类型响应式- reactive对象类型响应式- readonly只读响应式- shallowRef/shallowReactive浅响应式- toRef/toRefs将响应式对象的属性转换为ref- isRef/isReactive/isReadonly响应式判断- unref获取ref的值- 响应式原理Proxy实现生命周期钩子- 选项式API生命周期beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted- 组合式API生命周期onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked, onRenderTriggered2. Vue 3进阶组合式API- setup()函数组合式API的入口- ref和reactive的使用- computed和watch的使用- provide/inject依赖注入- readonly创建只读代理- watchEffect自动追踪依赖的副作用- computed计算属性- ref和reactive的转换toRef, toRefs, unref自定义钩子- 自定义钩子的定义useXxx命名规范- 钩子的复用提取逻辑到自定义钩子- 常见自定义钩子useCounter, useApi, useLocalStorage等组件通信- Props/Emits父子组件通信- provide/inject跨组件通信- 事件总线mitt库- Pinia全局状态管理- 插槽默认插槽, 具名插槽, 作用域插槽插槽和动态组件- 插槽v-slot, #default, #name- 作用域插槽向插槽传递数据- 动态组件component :is- 异步组件defineAsyncComponent阶段三生态系统1. Vue Router路由配置- 路由定义createRouter, createWebHistory- 路由配置path, name, component, props- 嵌套路由children- 动态路由path: /user/:id- 路由别名alias- 路由重定向redirect导航守卫- 全局守卫beforeEach, beforeResolve, afterEach- 路由守卫beforeEnter- 组件守卫beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave- 守卫的参数和next函数路由懒加载- 动态导入() import(/views/Page.vue)- 路由分块webpackChunkName- 预加载router.preload()2. Pinia状态管理- Store定义defineStore- State状态定义和访问- Getters计算属性- Actions异步操作- 模块化多个StoreStore设计- 单一状态树集中管理状态- 模块化按功能划分Store- 命名规范useXxxStore- 状态持久化localStorage模块化- 模块拆分按业务逻辑拆分- 模块组合跨模块访问- 模块命名空间避免命名冲突3. Element Plus组件使用- 基础组件Button, Input, Select, Radio, Checkbox- 容器组件Container, Header, Aside, Main, Footer- 表单组件Form, FormItem, Input, Select, DatePicker- 表格组件Table, TableColumn, Pagination- 对话框组件Dialog, MessageBox, Message- 导航组件Menu, Tabs, Breadcrumb- 数据展示Card, Badge, Avatar, Tag- 其他组件Upload, Tree, Carousel, Collapse表单验证- 内置验证规则required, email, url, number- 自定义验证规则validator- 表单验证触发blur, change, submit- 表单验证方法validate, resetFields#### 主题定制- 主题变量--el-color-primary, --el-color-success等- 主题配置element-plus/dist/index.css- 按需引入unplugin-vue-components- 自定义主题通过SCSS变量覆盖阶段四网络和构建1. Axios#### 基础请求- axios.get()GET请求- axios.post()POST请求- axios.put()PUT请求- axios.delete()DELETE请求- 请求参数params, data- 请求头headers#### 拦截器- 请求拦截器axios.interceptors.request.use()- 响应拦截器axios.interceptors.response.use()- 拦截器的应用添加认证信息, 统一错误处理#### 错误处理- 错误捕获try/catch, catch()- 错误类型网络错误, 服务器错误, 业务错误- 错误处理策略重试机制, 错误提示2. Vite#### 项目搭建- 初始化项目npm create vitelatest- 项目结构src, public, index.html- 配置文件vite.config.js- 开发服务器npm run dev#### 配置优化- 别名配置resolve.alias- 插件配置plugins- 构建配置build- 开发服务器配置server- 环境变量.env文件#### 构建部署- 构建命令npm run build- 构建产物dist目录- 静态资源处理public目录- 部署策略CDN, 服务器部署阶段五实战项目1. 项目结构- 目录结构src/api, src/components, src/views, src/router, src/store- 命名规范组件名, 文件名, 变量名- 代码风格ESLint, Prettier- 模块化按功能划分模块2. API集成- API封装统一API调用方法- 接口文档Swagger, Postman- 数据模型TypeScript接口定义- 错误处理统一错误处理- 认证授权Token管理3. 性能优化- 代码分割动态导入- 懒加载图片懒加载, 组件懒加载- 缓存策略浏览器缓存, 本地存储- 首屏优化SSR, 预渲染- 网络优化HTTP/2, CDN4. 测试- 单元测试Jest, Vitest- 组件测试Vue Test Utils- 端到端测试Cypress, Playwright- 测试覆盖率coverage- 测试策略TDD, BDD学习建议1. **系统性学习**按照上述知识点顺序系统学习每个技术点2. **实践为主**每学习一个知识点立即动手实践3. **项目驱动**通过实际项目巩固所学知识4. **代码阅读**分析优秀开源项目的代码结构5. **调试技巧**学习使用浏览器开发者工具6. **文档查阅**养成查阅官方文档的习惯7. **社区参与**加入技术社区交流学习经验8. **持续更新**关注前端技术的最新发展通过系统性学习这些知识点你将能够掌握现代前端开发的核心技能为成为一名优秀的前端开发者打下坚实的基础。