手摸手，带你优雅的使用 icon
演进史
首先我们来说一下前端 icon 的发展史。
远古时代 在我刚开始实习时，大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分，所以为了优化有了image sprite 就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 background-position 定位显示不同的 icon 图标。但这个也有一个很大的痛点，维护困难。每新增一个图
前端
OAuth 2.0 的一个简单解释，一看就懂
【转载】原文链接
OAuth 2.0
OAuth 2.0 是目前最流行的授权机制，用来授权第三方应用，获取用户数据。
这个标准比较抽象，使用了很多术语，初学者不容易理解。其实说起来并不复杂，下面我就通过一个简单的类比，帮助大家轻松理解，OAuth 2.0 到底是什么。
一、快递员问题
我住在一个大型的居民小区，小区有门禁系统，进入的时候需要输入密码。
我经常网购和外卖，每天都有快递员来送货。我必须
js实现数据的双向绑定
js实现数据的双向绑定
数据的双向绑定
双向绑定指的是视图和数据两个之间双向绑定！
在页面中绑定两个或者多个元素，比如一个input框和一个p标签，当在input框输入值时，p标签也会自动更新文本。只关注数据的操作，减少对DOM的操作。
一、直接赋值
也就是将input框的值赋值给p标签的文本
html代码块
<p id="txt"></p>
<
react hooks深拷贝后无法保留视图状态
在使用useState做数据操作更新的时候，有一些复杂数据类型，一个对象数组里包含，函数，dom等等复杂数据类型，想要进行数据更新，并且视图更新的情况下，因useState的特性就必须进行深拷贝赋值。
方式
1、JSON.stringify配合JSON.parse 这个有限制，我们的数据类型包含，函数。它会丢失
2、Lodash 里的深拷贝方法
3、递归实现
我这里通过递归直接写的方法，发现拷贝
vite + vue3多页面配置记录references,loadEnv等
目的：使用vite创建vue3项目记录细节点
上篇vue2/vue3 + webpack多页面遇到的问题和思考我们使用vue-cli搭建项目都是使用webpack打包的，现在对比一下vite感受一下极速开发体验
增：下一篇vite + vue3 多页面实战优化续集：eslint+lint-staged+husky+stylelint
第一部分：项目基础配置ts相关: lib, references
vue3.x的setup语法糖
什么是setup语法糖
vue3.0时setup的变量需要return暴露出来，template才能获取。到3.2之后只需要在script标签中添加setup，例如<script setup>，组件中不在需要特殊注册，直接引入，属性和方法便不需返回，在<script setup>中自定义的属性、指令可以直接在template使用。
setup参数
使用 setup 函数时，
vue项目打包优化--提高首屏加载速度
1、移除 preload 与 prefetch
vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，这个就成了首屏加载的最大元凶了。先简单了解一下 preload 与 prefetch。
1、preload 与 prefetch 都是一种资源预加载机制；
2、preload 是预先加载资源，但并不执行，只有需要时才执行它；
3、prefetch 是意图预获取一些资源，
vite+vue3+ts+pinia+element-plus搭建项目（三）
现在进入页面开发，组件库选择Element Plus，考虑到前端写样式每个人的写法都不同，这样维护起来也是比较麻烦的，所以选择 Tailwindcss ，这样开发过程不用去想很多的类名，不用再去写css代码
element-plus 按需引入
yarn add unplugin-vue-components --save-dev
// vite.config.ts
import { defin
阻止移动端 touchmove 与 scroll 事件冲突
在移动端开发过程中，如果要实现一个元素或按钮的拖动定位，会出现很多坑。例如：元素上下移动过程中，会触发 body 的 scroll 事件，导致整体的位置偏移，这时就需要 阻止移动端 touchmove 与 scroll 事件冲突 。
DOM Touchmove Scroll
一、解决思路
当移动端 touchmove 与 scroll 事件冲突时，首先想到的就是在 touchmove
【JS 】让浏览器支持<style scoped>
1. HTML style scoped 属性
今天无意中发现居然还有这么一个神仙属性 HTML style scoped 属性
他的作用主要是将 style的作用域控制在他自身的父元素之内。
例如：
<div>
<style type="text/css" scoped>
h1 {color:red;}
p {color:blue;}
</s
