front-Sun项目知识点梳理

组件分析 三种样式，priamry，error，info->三种样式->三种类名 无需事件。 组件特殊性：其他组件引用该组件时一般是用js调用，该组件调用后需要销毁。 代码 message/index

变更主题色思路 写两套css样式 设置html的class，当html的class为light，就是浅色模式。当html的class是dark，就是深色模式 对应渲染不同的CSS，（后续用tailwi

JS实现监听屏幕尺寸变化 最原始的rem适配，屏幕宽度小于1024，进入rem响应式。最大fontSize为40 再说说媒体查询，下面是nav，该nav有三个对应样式，在不同屏幕尺寸下显示不同样式 也

安装引入 npm CDN 通过命名方式引入driver 通过CDN引入并使用 示例代码 driver.js官网

search组件分析 聚焦input时会显示弹出层，点击按钮会触发事件 代码 知识点： vue3.4的defineModel绑定input emits事件search暴露出去 下拉菜单用插槽展示出口

分析组件 button组件只需要一个事件处理，就是点击事件。除此之外都是样式处理。 代码 该代码的button支持纯图标组件、是否有loaing、size。

组件分析 popover组件有两个部分构成，一个是触发弹出层弹出的显示层。一个是弹出层。 一个插槽对应一个插槽。 弹出层绑定鼠标移入和移出事件 代码 后续完善 加入动画、加入控制弹出层显示位置的方法。

1.组件分析： 这是一个移动端常用的组件，一般是用户点击一个按钮，从屏幕底部弹出一个弹出层。下图展示uniapp的popup组件 组件只需要一个和父组件双向绑定的值，用于控制popup的显示和隐藏。p

1.安装插件 2.创建目标文件夹，存放本地的svg 3.创建svg组件 分析：svg组件主要有两个属性，svg的名字，svg的样式。名字由组件的props的name决定，样式有多种思路去创建props