vue-cli4之手撸webpack骨架屏插件
一、实现webpack骨架屏 书接上文，由于在vue-cli4里面直接使用 vue-skeleton-webpack-plugin插件失败 （插件基于vue2开发），而项目是vue3开发，这就导致了不兼容，于是乎就开始了手撸…
二、骨架屏的由来：123单页面应用在现在的前端页面开发是越来越常见了。它的好处很多，坏处也很明显：就是首屏加载往往很慢，呈现一片空白的页面，这给用户的体验感是很差的。可资源的加载我们除了尽量地优化，也没有其他很好的办法了。为了解决这个体验感的问题，骨架屏应运而生。
三、骨架屏原理：12345678<html lang="en"><head> <meta charset="UTF-8"></head><body> <div id="app"></div></body></html>
单页面应用其实就是一个html文件，html结构里面有一个div#app，当js加载完毕并且执行完成 ...
温故，重新记录一次vue-cli4打包优化
vue-cli4打包优化一、 配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：
12345678910111213141516171819202122232425module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 hotOnly: false, // 热更新 overlay: { // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层 warnings: false, errors: true }, proxy: { //配置跨域 '/api': { target: 'https://www.test.com', // 接口的域名 ...
禁止打开开发者工具
禁用开发者工具的尝试与思考 在如今web盛行的时代，确保网页安全是一个至关重要的主题，涉及到用户隐私、数据保护、防范攻击等方面, 我们时常会遇到需要保护代码免受未经授权访问和复制的情况。一些开发者可能尝试通过禁用浏览器开发者工具来实现这一目标。在这篇文章中，我们将介绍一种使用 disable-devtool 库的尝试，并讨论相关的思考。
为什么要禁用开发者工具？
代码安全性： 一些开发者希望通过禁用开发者工具来增强其代码的安全性，防止被未授权的用户查看、修改或复制。
防止调试： 有时，开发者可能希望防止用户对其网站进行调试，以保护敏感信息或增加一些控制。
功能介绍npm库名称：disable-devtool，
github地址：github.com/theajack/disable-devtool。从f12按钮，右键单击和浏览器菜单都可以禁用Web开发工具。
一行代码搞定禁用web开发者工具
该库有以下特性:
支持可配置是否禁用右键菜单
禁用 f12 和 ctrl+shift+i 等快捷键
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
开发者可以绕过禁用 (url参数 ...
基于vite ts 封装 axios
封装request和config请求信息抽离处理
先安装axios，毕竟请求是基于axios的。
npm: npm install axios
yarn: yarn add axios
在src的同级目录下，创建shims-axios.d.ts。用于做axios的ts声明
123456789101112131415161718192021222324252627282930313233import { AxiosInstance, AxiosRequestConfig, AxiosPromise } from "axios"declare module "axios" { export interface AxiosRequestConfig { /** * @description 设置为true，则会在请求过程中显示loading动画，直到请求结束才消失 */ loading?: boolean isDialog?: boolean } ...
CSS布局系列：Flex 和 Grid 布局详解
前言在现代前端开发中，CSS 布局是构建网页界面的基础技能。随着 Web 技术的发展，CSS 布局方式也经历了从传统的浮动布局、定位布局到现代的 Flexbox 和 Grid 布局的演进。这两种现代布局方式极大地简化了复杂布局的实现，提供了更直观、更强大的布局能力。
在之前的CSS 基础温故一文中，我们简单介绍了几种常见的布局方式，本文将深入探讨 Flexbox 和 Grid 这两种现代布局方式的各种参数和使用场景。
Flexbox 布局Flexbox（弹性盒子布局）是一维布局模型，旨在提供一种更加有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小是未知的或动态的。
基本概念Flexbox 布局由两个主要组件构成：
Flex 容器（Flex Container）：通过设置display: flex或display: inline-flex创建
Flex 项目（Flex Items）：Flex 容器的直接子元素
Flex 容器属性1. display123.container { display: flex; /* 或 inline-flex */ ...
10分钟教你如何拥有属于自己的马赛克萌妹
前言这么可爱的萌妹子不想拥有一个吗。学起来，自定义一个抱回家
一、前期准备初始化HTML，利用通配符 * 去除默认样式
1234567891011121314151617181920<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="divport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *,*::before,*::after{ padding: 0; margin: 0; box-s ...
javascript 事件循环
事件循环
学习事件循环 首先就要了解一下浏览器的进程模型
浏览器的进程模型何为进程?
如果要运行一个程序 就要属于他自己的内存空间 可以把这块内存空间简单理解为进程
什么对象,函数啥啥啥的 都是放在内存里面的 所以就需要开辟一块内存空间让这个程序自己去使用
总结 : 进程 == 开辟出的这块内存空间
每一个应用 至少也要有一个进程 进程之间相互独立 即使要通讯 也需要双方同意才行比如qq进程崩溃了 肯定是不会影响到微信的 所以每一个进程是完全独立的
何为线程?
有了进程后 就可以运行程序的代码了
运行代码的人称之为线程
一个进程至少有一个线程 所以在进程开启后会自动创建一个线程来运行代码 该线程称之为主线程
如果程序需要同时执行多块代码 主线程就会启动更多的 线程来执行代码 所以一个进程中可以包含多个线程
浏览器有哪些进程和线程浏览器是一个多进程多线程的应用程序
浏览器内部工作极其复杂
为了避免相互影响 为了减少连环崩溃的几率 当浏览器启动后 它会开启多个进程
可以在浏览器的任务管理器中查看当前的所有进程
其中最主要的进程有
浏览器进程 : 主要负责页面的显示 用户 ...
vue3.0 + ts 生成带二维码的海报
生成带有二维码的海报 背景需求：生成一个带二维码的海报，可实现分享助力。
插件
qrcodejs2 或者 qrcode.vue （生成二维码）
html2canvas （生成海报图）
安装使用
qrcodejs2
12345678910111213141516// 安装插件 npm install --save qrcodejs2// 页面引入import QRCode from "qrcodejs2";// 方法调用 <div id="qrcode" ref="qrcode"></div> const createQrCode = (dom: any, width: number, height: number， qtext: string) => { return new QRCode(dom, { width: width, height: height, text: qtext, colorDark: ...
vue路由传参的几种方式
路由跳转的两种方式1. 声明式导航123456789101112131415161. 使用router-link的to属性进行路由跳转 to的值是要跳转到的那个路由// 1.1 to后直接跟路由<router-link to="/home">to home</router-link> // 1.2 to后跟一个配置对象path属性是要跳转到的那个路由<router-link :to="{ path: '/home' }">to home</router-link> // 1.3 to后跟一个配置对象，使用命名路由的name进行跳转<router-link :to="{ name: 'homeIndex' }">to home</router-link>2. 查询字符串形式 路由传参 to的值是一个配置对象 以查询字符串形式携带 url?id=123// 2.1 以 url?i ...
前端面试分享
盒子模型包括内容区域、内边距区域、边框区域和外边距区域。
box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。
box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。
IE5.x和IE6在怪异模式中使用非标准的盒子模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
如何实现左侧宽度固定，右侧宽度自适应的布局1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162<div class="box"> <div class="box-left"></div> <div class="box-right"></div></d ...
