不想学习的打工人的博客

SVG是可缩放矢量图形（Scalable Vector Graphics）的缩写，它是一种基于XML的矢量图形格式，可以无损地缩放和变换，不会失真。SVG图像可以在任何分辨率下显示清晰，因此非常适合用于响应式设计和移动设备。另外，SVG图像可以通过CSS和JavaScript进行动态修改和交互，比如动画效果、鼠标悬停等。

Monorepo 是一种将多个项目存放在同一个代码库中的开发策略。”mono” 表示单一 ，“repo” 是”repository”的缩写，意为多个项目共用一个代码库来管理依赖关系，同一套配置文件，统一构建部署流程等

Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）Pinia最初是为了探索Vuex的下一次迭代会是什么样子，结合了Vuex 5核心团队讨论中的许多想法。最终，团队意识到Pinia已经实现了Vuex5中大部分内容，所以最终决定用Pinia来替代Vuex

网格布局（Grid）是CSS中最强大的布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

跨域是指浏览器在向一个服务器发送请求时，该请求的地址与当前页面的地址不同，即协议、域名、端口号中至少有一个不同，导致浏览器出于安全考虑，阻止了页面与请求之间的交互。

postcss-px-to-viewport是一个 PostCSS 插件，用于将 CSS 中的 px 单位转换为 vw 或 vh 单位。它可以帮助我们实现在不同屏幕尺寸下的自适应布局，以提高页面的响应性和可用性。

之前做项目的时候要实现echarts图表随浏览器窗口大小变化而改变，echarts本身提供了一个resize()方法，然后我们需要用一个函数实现浏览器窗口监听，最初我选用的是方法，当页面只有一个图表时可以实现，但当页面多个图表时window.onresize会被覆盖从而导致失效，最后我选用了方法解决了这个问题。

nvm全名叫做，是一个非常棒的nodejs的版本管理工具，主要是通过命令行实现nodejs版本的安装、切换当前使用的nodejs版本。nvm可以实现电脑安装和管理多个版本的node.js，在公司的新旧项目中需要使用到不同的 node 版本进行开发，通过nvm可以实现直接下载nodejs、随时切换nodejs版本，大大减轻了前端程序员切换nodejs版本的时间成本。

调用获取年月日等时间函数后封装到自己写的获取当前时间的getDate函数中，getDate函数会将获取到的函数重新复制给在data中定义的变量nowDate，然后设置定时器一秒调用一次getDate函数，再把定时器放入生命周期函数created中，最后用插值语法把nowDate放到指定的位置即可

之前完成的vue项目文件夹在移动以后，想要重新运行下，在删除项目里的文件夹之后，执行命令时出现上述报错，导致包无法正常安装在安装内容的命令后面加上，即就可以顺利进行下载安装包的操作。

防抖和节流是两种应对web页面中频繁触发事件的优化方案，可以在JavaScript库Lodash中的_.debounce()以及_.throttle方法实现

当项目中如果出现了发请求，则网页中的进度条会开始向前走，当服务器的数据返回成功以后，那么进度条则会消失。在配置axios二次封装的request.js文件中，首先引入进度条以及相关进度条的样式。经过以上配置，在发出请求之后即可在网页上方看到。如果后续中想要更改颜色等样式，在。拦截器添加进度条开始的代码。拦截器添加进度条开始的代码。

用canvas生成gif图，在渲染的时候不断将canvas转成png图片，再将它们添加到gif的每一帧，设置每隔多长时间进行添加

移动端图标 SVG、flexbox、preload/prefetch、预渲染、windowing、骨架组件

资源压缩、资源缓存、Service Worker、HTTP2、SSR

webpack4 引入了 mode 模式，可以配置开发和生产模式，就可以使用一些已经默认好的插件帮我们达到想做的效果

在项目开发或者测试的过程中，由于没有上线，我们在公网上无法访问我们的网站，但同时我们又需要查看浏览器性能，这样我们就需要在本地部署WebPageTest工具以协助进行性能测试访问Docker官网文档，按需下载对应版本安装注册docker 账号3.安装后点击Docker图标，使用注册的docker id登录，并在dos中用如下命令登录。

在项目开发过程中，用浏览器测试时很多时候会被浏览器自带的缓存搞得很头疼，那么下面会介绍几种方法实现Chrome浏览器清空缓存并强制刷新页面。

以前我们要对图片进行取色，模糊等处理必须使用Photoshop等工具，而css3滤镜的出现使我们在网站中轻松实现这些效果变为可能。本次网站页面变为黑白色就是使用css3滤镜filter的grayscale属性实现的

Vue.js配置时可能会出现神奇报错，使得程序不能够正常运行，这时只需要关闭语法检查即可。

打开echars官网，​echarts CDN by jsDelivr - A CDN for npm and GitHub，选择dist/echarts.min.js，右键点击并保存为echarts.min.js文件

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。采用，称为，简称"容器"。它的所有自动成为容器成员，称为，简称"项目"。

H5+CSS3实现官网首页--视频全屏背景

json-server 是一款小巧的接口模拟工具，用于模拟服务端接口数据，可以根据json数据在一分钟内搭建一套 Restful 风格的 api，非常适合前端接口测试使用。

CSS是(CascadingStyleSheets)的简称.CSS是也是一种标记语言，其主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式等。选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等属性和属性值之间用英文“”分开多个“键值对”之间用英文“;”进行区分上方。...............

HTML 全称为 HyperText Markup Language，译为超文本标记语言。在 VS Code 中，新建 html 文件，输入html:5后，按Tab键或回车后，可以快速生成HTML5的骨架：1.其中，第一行的声明是HTML5标准2.lang指定页面的语言类型，一般常见的有两种：en：定义页面语言为英语 zh-CN：定义页面语言为中文3.head头标签表示的是页面的配置，其内部的常见标签主要有、、等作用：使网页.........