ScssSass使用Ruby语法 : *没有花括号，没有分号，具有*严格的缩进
基础使用1pnpm install -D sass sass-loader
语法define.scss （一般放在src中的styles文件夹中）
12$--primary-color: #123456;$white-color:$--primary-color-green !default;//这个默认值的优先级降到了最低，当没有其它地方赋值时候，才会选择默认值
vue组件
1234567<style scoped lang="scss">@import '@/styles/define.scss'; .box{ color:$--primary-color; background-color:$white-color; }</style>
@mixin可以定义一段代码作为模板样式
123456789@mixin border-radius($radius: 5px, $bor ...
CSS定位元素
grid网格布局新的长度单位：fr
1一般来说 1fr 的意思是“100%的剩余空间”, .25fr 意味着“25%的剩余空间”。当时当 fr 大于 1 的时候，则会重新计算比例来分配。
grid布局1display: grid;
1grid-template-columns: 1fr 1fr 1fr 1fr;
等价于（repeat）
12grid-template-columns: repeat(4, 1fr);grid-template-columns: repeat(4, .25fr);
一般都建议使用 **fr>=1 的情况
响应式设计这里 A 和 D 都是固定的 50px，C 是占总宽度的 20%，剩余空间就可以分配给 B。
1234.grid-container { grid-template-columns: 50px 1fr 20% 50px; column-gap: 10px;}
船新用法3*3的网格
12345678910//网格布局.face { display: grid; gri ...
grid+transform实现页面3D骰子回顾transform1transform-style: preserve-3d;/*所有子元素在3D空间中呈现*/
偏移1transform: translateX(90px) translateY(90px) translateZ(90px);/*左右 下上 前后*/
旋转1transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)
实战效果HTML12345678910111213141516171819202122232425262728293031323334353637<div class="container"> <div class="wrap" id="dice"> <div class="face face-grid first-face"> <span class="dot cc-dot red& ...
CSS搭建页面3D空间重磅CSS属性
transform1transform-style: preserve-3d;/*所有子元素在3D空间中呈现*/
偏移
1transform: translateX(90px) translateY(90px) translateZ(90px);/*左右 下上 前后*/
旋转
1transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)
大前端
未读元素区分块元素 div / p / h / ul / li
行内元素 a / span /br
行内块元素 img / input / td
高度塌陷就是外边距margin塌陷
只会发生在垂直方向，只出现在块级元素上
解决：子绝父相
浮动塌陷元素一旦****浮动后，脱离标准流，朝着向左或右方向移动，直到自己的边界紧贴包含块(一般是父元素)或者其他浮动元素的边界为止
clear
12345678div -> display:float span //float: left span //若未设置高度，则span浮动于父元素上方，产生高度塌陷 span span span p -> clear: bothdiv
创建BFC
BFC原理详情见文章 “格式化上下文–BFC与IFC”
1http://154.40.44.42:8090/archives/ge-shi-hua-shang-xia-wen--bfcyu-ifc
1234567d ...
WebRTC 实现本地视频通话 | 全流程详解源码见仓库 Breezli/WebRTC_Demo: 基于 WebRTC 技术实现的本地网页端视频通话
分为前后端两个文件夹
webrtc-client (客户端)
webrtc-server (服务端)
预先准备webrtc-client前端页面绘制
依赖下载
123pnpm create vite@latest webrtc-client -- --template vue-tspnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p
package.json直通
12345678910111213141516171819202122232425{ "name": "webrtc-client", "private": true, "version": "0.0.0", "type": "modul ...
TS + NodeJS 实现 axios1git clone https://github.com/alexjoverm/typescript-library-starter.git ts-axios
需求
在浏览器端使用 XMLHttpRequest 对象通讯
Promise API
请求响应拦截器
请求数据和响应数据转换
请求的取消
JSON 数据的自动转换
客户端防止 XSRF
框架工具
请求代码axios 最基本的操作
12345678axios({ method: 'get', url: '/simple/get', params: { a: 1, b: 2, },})
创建入口文件
index.ts
123function axios(config) {}export default axios
xhr.ts
xhr 函数用于发送 HTTP 请求的工具函数，基于 XMLHttpRequest API 实现，并提供了一个简单的接口来配置和发送请求。
...
源码探究 runtime-core 模块
接下来我们将对这行核心代码的源码进行全流程追踪
1createApp(App).mount('#root')
注：在此之前我们已经通过
1const rootContainer = document.querySelector('#app')
拿到 rootContainer ：
拆分成两个步骤
createApp(App)
.mount(“#root”)
createApp(App)关于 App我们先来看用户这边的操作
App.js
1234567891011121314151617export const App = { render() { // UI逻辑 return h( // Vue 中的创建虚拟 DOM 的辅助函数,用于创建虚拟 DOM 节点,接收三个参数： 'div', // type：要创建的 HTML 标签名或组件选项对象. { id: 'root', class: ['red ...
