前端
关注
分享
扫一扫
揭小宏
未来是属于全人类的
展开
-
react hook + umi脚手架环境下使用缓存组件
react hook + umi脚手架下使用缓存组件原创 2022-07-12 14:17:33 · 759 阅读 · 0 评论 -
flex 布局子元素高度设置100%无效没有被自动拉伸高度
felx布局子元素高度自动拉伸原创 2022-06-14 16:07:37 · 3699 阅读 · 1 评论 -
优化：vue2 打包压缩gz文件，nginx 传输压缩包，提高网络传输速度
config 下的index.js下， productionGzip设为true，如果打包发现没有安装 compression，先安装npm install --save-dev compression-webpack-plugin@1.1.2执行打包 nmp run build好了有gz压缩包了接下来配置nginx，到配置文件添加以下配置 #是否启动gzip压缩,on代表启动,off代表开启 gzip on; #需要压缩的常见静态资源 gzip_types原创 2022-04-26 17:54:35 · 1798 阅读 · 0 评论 -
vue diff 算法（原理什么的最烦了）
https://blog.youkuaiyun.com/weixin_50786692/article/details/120399959转载 2022-04-19 18:07:40 · 106 阅读 · 0 评论 -
vue打包自动化发布部署
一、安装 scp2，用ssh链接到服务器上npm install scp2 --save-dev二、新建js文件，例如 upload.js ，位置和 package.json平级即可。upload.js'use strict'// 引入scp2var client = require('scp2');// 下面三个插件是部署的时候控制台美化所用 可有可无const ora = require('ora');const chalk = require('chalk');const sp原创 2022-04-16 16:17:35 · 2097 阅读 · 2 评论 -
js图片懒加载
这里默认让它显示加载中的图片，把需要显示的图片放到制定义属性上，通过监听滚动条和当前图片的位置，当前图片出现在可视区时显示回图片<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>小小菜鸟</title> <style> img{ height: 500px; widt原创 2022-04-16 14:34:38 · 313 阅读 · 0 评论 -
js 多线程Worker
多线程处理多个任务，这里假设5个任务循环了80亿，如果按之前js单线程执行是不是5*80亿，想必处理速度相当慢，开启多线程执行分开执行新建一个测试的html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>小小菜鸟</title></head><button onclick="click_w()">点击</butt原创 2022-04-16 10:46:28 · 4147 阅读 · 0 评论 -
js 宏任务和微任务
这里作者写的很到位了，我就不转载了原作者跳转链接https://www.jianshu.com/p/bfc3e319a96b转载 2022-04-11 15:44:20 · 107 阅读 · 0 评论 -
uni-app 微信小程序开发到发布流程
安装好HBuilder+微信开发工具，准备发车1：新建一个uni-app 项目2：发行微信小程序3：微信开发者平台的微信小程序appid 复制进来（点击发行）4：小程序开发工具就可以点击发行版本了5：到开发者平台发布审核是不是很简单，哈哈哈哈，这里咋们在看一下uni-app项目发生了什么变化可见打包后，将vue文件编译成了微信小程序的文件格式了，和原生写的微信小程序是不是就一样了小小笔记...原创 2022-04-11 15:37:16 · 5607 阅读 · 0 评论 -
js 图片预加载，失败和中断处理
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>小小菜鸟</title></head><body> <img class="load_img" src="https://img0.baidu.com/it/u=4217284373,243829174&fm=253&fmt=auto&a原创 2022-04-06 11:30:37 · 1049 阅读 · 0 评论 -
vue 异步组件
异步组件，这样子就可以简单优化一下界面渲染速度，防止同步一下子加载太多文件浏览器可以观察异步加载出文件原创 2022-01-17 17:16:32 · 293 阅读 · 0 评论 -
Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with the document
谷歌浏览器控制台报错Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.挺纳闷有时候可以有时候不行的，后来才发现，谷歌推出的防骚扰，页面打开不能自动播放音频和视频，页面加载js触发也不行，页面加载玩必须要用户鼠标或者键盘触发一次页面。（个人状态–无解）...原创 2022-01-03 18:21:54 · 2390 阅读 · 0 评论 -
js染色十六进制转rgba+透明度输出
主要根据主题色获取对应的透明度做对比色 /** *主题色透明度获取 * @param opacity 透明度 * @param web_color 主题色(#666666) * @returns rgba */ web_color_opacity(opacity,web_color) { return "rgba(" + parseInt("0x" +web_color.slice(1, 3)) + "," + parseInt(原创 2022-01-03 18:04:19 · 882 阅读 · 0 评论 -
VUE监听元素高度宽度变化element-resize-detector --save
下载插件npm i element-resize-detector --save引用import elementResizeDetectorMaker from “element-resize-detector”;写一个使用的函数 watchSize() { const _this = this; var erd = elementResizeDetectorMaker(); erd.listenTo(this.$refs.原创 2022-01-03 17:56:46 · 2762 阅读 · 0 评论 -
vue mvvm源码原理学习
对着视频敲一遍，慢慢理解，大概大概理解就OK了嘿嘿这里哔站老哥的讲解视频https://www.bilibili.com/video/BV1s44y1E7K5HTML<html><head></head><body><div id="app"> <h2>{{person.name}}--{{person.age}}</h2> <h3>{{person.rav}}</h3>原创 2022-01-03 15:32:27 · 511 阅读 · 0 评论 -
vue2 过一过Vue Router哈
模式有三种的哈源代码大概瞄一下哈https://unpkg.com/vue-router@3.5.3/dist/vue-router.js看看这里大概2924行开始这里，呐三种模式重新new出对应的对象（老婆老公）简单瞄了一下，大概就是监听地址改变事件进行重写window.history和window.location常用两种模式1、Hash模式：hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是原创 2021-12-14 15:20:33 · 1222 阅读 · 0 评论 -
vue2 打包后文件过大设置productionSourceMap
根目录config文件下的index.js，productionSourceMap转载 2021-12-13 18:53:16 · 426 阅读 · 0 评论 -
vue2+el 动态表单
这里只单纯的使用哈，复杂的可以自己在这里原基础做修改和添加，开冲吧<template> <div class="top_from_select" ref="top_from_select"> <el-form ref="form" :model="form" label-width="80px"> <div v-for="(item,index) in view_form_list" :key="index"原创 2021-12-09 15:17:20 · 712 阅读 · 0 评论 -
vue2 项目启动控制台输出
webpack.dev.conf.js 文件下的compilationSuccessInfo,messages添加你想打印的东西，数组格式哦！做出最后的轻语messages: [Your application is running here: http://${devWebpackConfig.devServer.host}:${port},Network: http://${require('ip').address()}:${port}],...原创 2021-12-01 11:29:51 · 1411 阅读 · 0 评论 -
VUE2 axios进行封装使用
装好你的axios 和element-ui 上车创建request.js文件token放请求头Authorization这里request给后端，后端也会response回来Authorization携带token，这里看自己需不需要vuex 定义token，根据自己的需求哈import axios from "axios";import store from '../../store/index';import {Loading,Notification} from 'element-ui';原创 2021-11-25 11:42:47 · 987 阅读 · 0 评论 -
vue2+element ui制定义主题色
添加插件npm i element-ui -S新建一个scss 文件elementui-variables.scss文件elementui-variables.scss 代码/* theme color */$--color-primary: #4593ff;//默认主题色$--color-success: #13ce66;$--color-warning: #FFBA00;$--color-danger: #ff4949;// $--color-info: #1E1E1E;$-原创 2021-11-25 11:14:45 · 1546 阅读 · 2 评论 -
veu2 启动添加本地ip访问
项目根目录package.json文件dev 后面添加上**--host 0.0.0.0**重新启动项目就ok了原创 2021-11-25 10:35:50 · 1508 阅读 · 0 评论 -
前端安卓低版本不兼容ES6
安卓低版本不兼容ES6，使用babel.js。低版本不兼容es6，那就让es6变成es5就行了babel.js帮忙转换这里有官网介绍的一套JS:https://www.babeljs.cn/cdn使用下载：https://www.bootcdn.cn/babel-core/引入js <script type="text/javascript" async> document.write("<scr"+"ipt src=\"/js/babel.min.js\"&翻译 2020-09-14 10:09:38 · 2127 阅读 · 2 评论 -
windows mac谷歌浏览器跨域
windows 49版本以上的谷歌浏览器跨域49版本以后的设置： 1.在电脑上新建一个空的文件夹（可以再桌面什么地方都可以复制新建目录路径），例如：C:\MyChromeDevUserDa 我这里桌面建的文件夹 然后重命名2.在桌面应用找到谷歌浏览器.exe右键点击属性-目标-目标添加 --disable-web-security --user-data-dir=这里第一步新建...原创 2019-11-11 10:05:52 · 246 阅读 · 0 评论