- 技术的共同点，使用
vue、react、小程序举例
- 创建项目：配置别名、代码格式化、接口请求；
- 页面逻辑处理：判断、循环、变量、方法；
- 样式处理：动态内联样式、动态class；
- 生命周期：单个组件加载、多个组件同时加载；
- 父子组件交互：交互值、交互方法；
- 表单处理：文本、日期框、单选、多选，以及必输、输入范围等校验；
- 路由处理：跳转传值、路由过滤器；
- 全局变量：store存储值、store改变自动更新相关组件；
一、创建项目
- 包括
创建项目、配置别名、代码格式化、配置接口请求。
4-1、创建
- 前端项目创建有两种，一种开发工具搭建，比如
android、ios、小程序，另一种时通过命令生成比如web。 - web主要通过三种工具命令生成项目：
webpack、vite和官方脚手架，2024年以后建议使用vite； - 代码实现（react、小程序、vue）
4-2、配置别名
- 让引入文件的目录更清晰(@/utils/...)；
- 代码实现（react、小程序、vue）
4-3、配置代码格式化（比如eslint）
- 使代码变整洁，对齐；
- 代码实现（react、小程序、vue）
4-4、配置接口请求
- 前端技术与后端交互的常用方法;
- 能向后端发出get/post等类型请求;
- 能自定义头部（token等）
- 请求过滤、返回过滤；
- 代码实现（react、小程序、vue）
二、页面逻辑处理
变量、判断、循环+方法
- 所有模板语言必备的功能
- 代码实现（react、小程序、vue）
三、样式处理
动态内联样式和动态class
- 内联样式使用变量；
- class名称使用变量；
- 代码实现（react、小程序、vue）
四、生命周期
2-1、单组件
- 生命周期是前端组件化必备的功能，无论安卓、vue、react、小程序组件都有自己的生命周期；
- 常用的两个周期函数：
加载时+请求数据、卸载时+清除长任务； - 代码实现（react、小程序、vue）
2-2、父子组件
- 父子组件在
加载、更新、卸载时的生命周期执行顺序； - 性能优化的时需要关注的三个生命周期；
- 代码实现（react、小程序、vue）
五、父子组件交互
2-1、互相传值
- 前端组件互相传值功能；
- 父给子传值，子给父传值；
2-2、互相调用方法
- 前端组件化必备的调用方法功能；
- 父调用子组件方法，子给父组件方法；
六、表单处理
创建和逻辑控制
- 人机交互的重要入口；
- 使用技术对应的UI框架进行表单封装；
- 必须包含
输入范围、必输等控制； - 代码实现（react、小程序、vue）
七、路由处理
3-1、安装和配置
- 前端自主控制路由，完全脱离后端；
- 实现路由过滤 、互相传值等功能；
3-2、跳转传值
- 任何路由技术必备的传值功能；
- 代码实现（react、小程序、vue）
3-3、路由过滤器
- 复杂场景中必要的功能，可以实现“权限控制、登录状态判断”等功能；
- 代码实现（react、小程序、vue）
八、全局变量
全局变量安装和配置
- 组件化技术的必要功能，可实现全局变量存储，值变动时，相关页面自动更新；
- 主要用在多组件引用的值，存储接口请求的值；
- 基本只使用
更新操作； - 代码实现（react、小程序、vue）