m0_50864962的博客

原创 前端大文件分片上传

前端大文件上传

原创 webpack到vite的改造之路

本文介绍了前端项目从Webpack迁移至Vite的技术升级历程。针对开发效率低下和架构瓶颈，团队重点优化了构建工具、组件通信机制和渲染逻辑。并且在迁移过程中解决了多项兼容性问题

原创 Mac 使用 Charles代理生成https服务

通过上述步骤，你就可以使用Charles软件通过代理生成HTTPS服务，让手机访问电脑的开发地址。

原创 [超细] npm 版本号规范升级流程

npm版本号规范升级的流程

原创 [超细讲解]使用ohttps自动部署ssl证书

ohttps自动部署ssl证书

原创 使用 Nginx 将 HTTP 重定向到 HTTPS

注意，这里的服务器名字（server name）是个通配符_：也就是无论 URL 中包含什么域名，当请求到达 Nginx 服务器以后，都会被重定向到 HTTPS。比如说，无论是 http://h5.1024bugs.top 还是 http://www.1024bugs.top，都会被重定向到它们相应的 HTTPS 链接。HTTP 流量在 80 号端口被监听。这里我们将全部 HTTP 的流量都永久重定向到 HTTPS（301）。重定向时，保留原有的主机（host）和请求 URI。

原创 使用 Nginx 将部署多个子域名&http服务重定向到https服务

使用nginx来实现子域名部署多个项目

原创 yarn install 提示 Error: certificate has expired

问题大概率是因为开了代理服务器访问。

原创 vite+vue3 打包后本地预览（不需要起服务）

打包本地预览,不需要起服务

原创 开发问题记录

vant开发的组件库初次渲染没问题,只要跳转至其他页面再进来设置的label-align属性就会丢失不生效。原因: 进入其他页面加载了主项目的vant库的css优先级层级高,然后就把组件本身的样式覆盖了,解决思路: 使用渗透把主项目的样式给重写覆盖。

原创 BroadcastChannel 实现浏览器tab无刷新通讯

【代码】BroadcastChannel 实现浏览器tab无刷新通讯。

原创 IntersectionObserver 实现懒加载

数组里的每一项中的 isIntersecting: true 表示该元素与设置的目标元素有交叉。target 是监听的 dom 卸载时可使用。打印 entries 得到一个数组,rootMargin 图解。

原创 js 获取dom宽高和位于浏览器的位置

【代码】js 获取dom宽高和位于浏览器的位置。

原创 vue 实现水波进度条和环形进度条效果

vue 实现水波进度条和环形进度条

原创 Naive 组件库 动态渲染icon图标

vue3 Naive 动态渲染icon图标

原创 vue 自定义组件实现v-mode

有时候我们需要对自定义的组件实现v-model的双向绑定。v-model实际是v-bind和v-on的语法糖的写法。所以我们封装自己的组件就可以利用这点来封装。首先我们得知道v-model的原理。语法糖v-model的写法。

原创 vue 利用 screenfull 实现全屏

其实我们可以利用 screenFull 的监听事件, 来实现屏幕的全屏和退出全屏的监听,当然使用原生的api也是可以实现的, 不过代码会显得有点臃肿。有时候我们实现的全屏点击的时候icon图标可以正常切换, 但是如果按 esc 键退出的话就不能监听到退出全屏导致icon展示不正确。

原创 git常用操作

git 版本回退, stash储藏等

原创 vue+vite+ts添加eslint校验和代码提交校验

vue+vite添加eslint校验和代码提交校验

原创 vue2项目 使用 svg

vue中使用svg图标并注册svg组件

原创 echarts formatter无法正常解析＜（小于号，会解析成标签的左右箭头＜＞）

echarts

原创 node-sass 安装失败

node-sass安装失败

原创 vscode 快速生层vue模板

vscode用户代码片段

原创 项目添加eslint配置

添加eslint项目配置

原创 变为可以输入的div标签

可直接输入的div

原创 Unocss(原子化css) 使用(vue3 + vite + ts)

Unocss 原子化css

原创 vue h5自适应屏幕

h5 屏幕尺寸自适应

原创 使用html5-qrcode 扫描二维码(vue3)

vue3 扫描识别二维码

原创 Element ui 表单动态去掉某一项的校验

// 方式一this.$refs.ruleForm.clearValidate('input2')// 方式二this.$refs.ruleForm.fields.map(i => { if (i.prop === 'input2') { i.clearValidate() }})

原创 vscode格式化

安装这三个插件1. 第一步ESLintPrettier - Code formatterVetur2. 第二步找到setting.js文件文件->首选项->设置替换 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 4, // #每次保存的时候自动格式化 "editor.formatOn

原创 rem适配

js适配!function (window) { /* 设计图文档宽度 */ var docWidth = 750; var doc = window.document, docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resiz

原创 字节手写面试题

1.获取字符出现的次数let str = 'aaaauedawwwwa'function getStr(str) { let o = {} for(let i = 0; i < str.length; i++) { let key = str.charAt(i) if (o[key]) { o[key] ++ } else { o[key] = 1 } } return o}console.log(getStr(str)) // {a: 6, u: 1, e

原创 js 手写 深拷贝, 数据扁平化, 柯里化

1. 深拷贝let arr = [1, [{name: '张三'}, [18, 22], undefined], null, 'hello']function deepClone(target) { let result; if (typeof target === 'object') { if (Array.isArray(target)) { result = [] for (let i in target) { // 递归克隆数组中的每一项

原创 js replace的使用

replace可以传入两个参数replace(‘要替换的值’, ‘替换成的值’)replace两个参数中的第一个参数可以是一个字符串,也可以是一个正则表达式如果第一个参数是一个字符串, 则遇到匹配的字符就会执行替换,就不会再继续执行替换后面的字符let str = 'Hello _小明'str.replace('l', '**') // 'He**lo _小明'第一个字符可以是一个正则表达式来进行全部匹配替换let str = 'Hello _小明_ll_18'str.replace

转载 浏览器协商缓存or强缓存

地址: https://github.com/amandakelake/blog/issues/41

原创 css变量的使用

原创 vue3兄弟组件传值方式mitt.js

vue3中兄弟组件传值的方式mitt下载mittyarn add mitt 或者npm install mitt方式一: 在main.js中注册挂载到全局import { createApp } from 'vue'import { createPinia } from 'pinia'import App from './App.vue'// 导入mittimport mitt from 'mitt'const app = createApp(App)// vue3挂载到全局ap

原创 Pinia的使用

1. Pinia 是什么?Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案Pinia 支持 Vue2 和 Vue3 相比vuex去掉了mutations,操作数据更简单灵活方便2. Pinia 优势简单易于学习轻量化， 仅有 1 KB模块化设计，便于拆分状态3. 安装 Pinia使用 npmnpm install pinia使用 yarnyarn add pinia4. 使用1.在main.js中注册并使用import

原创 toLocalString()妙用

toLocalString()的妙用1. 可以直接得到钱的分割效果let num = 1000000num.toLocalString() // '1,000,000'2.上面方法或许你还要自己再拼接 ¥ 来达到 ¥1,000,000.00 的效果用以下方法可以直接得到 ¥1,000,000.00 的效果let num = 1000000num.toLocaleString('zh',{ style: 'currency', currency: 'cny' }) // '¥1,000,0

原创 react常用生命周期

react的生命周期1.初始化过程constructor()接收参数只会触发一次！！2.挂载过程(Mounting)componentWillMount在组件即将被挂载到页面的时刻自动执行。render()将组件挂载到页面。componentDidMount组件被挂载到页面之后立即执行请求一般放在这里componentWillReceiveProps在组件接收到一个新的 prop(更新后)时被调用。这个方法在初始化render时不会被调用。shouldCo