温故，重新记录一次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部署成功，通知用户刷新界面 实践
使用场景 当我们成功部署web应用之后，由于页面没有及时刷新，导致数据存在差异 无法体验到最新的功能等问题。
代码实现12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576interface Options { timer?: number}export class Updater { oldScript: string[] // 存储第一次值也就是script 的hash 信息 newScript: string[] // 获取新的值 也就是新的script 的hash信息 dispatch: Record<string, Array<() => void>> // 小型发布订阅通知用户更新了 timer: NodeJS.Timeout | null = null constructor(op ...
禁止打开开发者工具
禁用开发者工具的尝试与思考 在如今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 } ...
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进程崩溃了 肯定是不会影响到微信的 所以每一个进程是完全独立的
何为线程?
有了进程后 就可以运行程序的代码了
运行代码的人称之为线程
一个进程至少有一个线程 所以在进程开启后会自动创建一个线程来运行代码 该线程称之为主线程
如果程序需要同时执行多块代码 主线程就会启动更多的 线程来执行代码 所以一个进程中可以包含多个线程
浏览器有哪些进程和线程浏览器是一个多进程多线程的应用程序
浏览器内部工作极其复杂
为了避免相互影响 为了减少连环崩溃的几率 当浏览器启动后 它会开启多个进程
可以在浏览器的任务管理器中查看当前的所有进程
其中最主要的进程有
浏览器进程 : 主要负责页面的显示 用户 ...
构建发布一个npm
前提
下载 Node.js 和 NPM。
12node -v npm -v
选一个好的包名。包名必须是 pascal-case 并且全部小写。因为 NPM 上有 700k+ 的包，所以你需要在构建之前先去 www.npmjs.com/ 查询你的包名有没有被使用。在本文中，我取了 irene-awesome-gretter。
基本构建
选择一个合适的名字创建包文件夹。
1mkdir irene-awesome-greeter && cd irene-awesome-greeter
新建
1.gitignore
文件并写入 node_modules，新建
1README
文件。
12echo "node_modules" >> .gitignoreecho "# Irene Awesome Greeter" >> README.md
Git 初始化包并关联远程仓库。下面 Git Repository Url 是远程仓库的 Url。
1234git initgit add . && ...
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 ...
