Vue项目打包、合并及压缩优化网页响应速度

目录前言一.请求内容太大
解决方案:CDN引入压缩请求资源一.http请求次数太多
解决方案:总结前言影响网页响应速度的因素有很多,例如:请求内容太大、http请求次数太多、服务器本...

JavaScript数组reduce()方法的语法与实例解析

前言reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从...

关于Vue 消除Token过期时刷新页面的重复提示问题

token过期时,刷新页面,页面如果加载时向后端发起多个请求,会重复告警提示,经过处理,只提示一次告警。1、问题现象  页面长时间未操作,再刷新页面时,第一次弹出“token...

Ant Design Blazor 组件库的路由复用多标签页功能

最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨。于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 `Tabs` 组件的 `ReuseTabs` 组件。最近,在 Ant...

使用vue项目配置多个代理的注意点

在Vue项目的开发过程中,为了本地调试方便,我们通常会在 vue.config.js 中配置 devServer 来在本地启动一个服务器,在这个选项中,我们会配置proxy 属性来将指向到本地的请求(例如...

基于事件冒泡、事件捕获和事件委托详解

事件冒泡、事件捕获和事件委托在javascript里,事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制,我先来解释一下事件冒泡和事件捕获:事件冒泡会从当前触发的...

利用Node.js创建一个密码生成器的全步骤

目录一、 准备工作
二、 编写命令行
2.1 添加版本和描述
2.2 配置密码长度命令
2.2 密码长度添加默认值:82.3 配置保存密码命令2.4 配置密码格式: 没有数字2.5 配置密码格式:...

Vue拖动截图功能的简单实现方法

拖动鼠标进行页面截图(也可指定区域拖动截图)一、安装html2canvas、vue-croppernpm i html2canvas --save //用于将指定区域转为图片npm i vue-cropper -S...

一篇文章弄懂ECMAScript中的操作符

目录一元操作符
布尔操作符
乘性操作符
加性操作符
关系操作符
相等操作符
条件操作符
赋值操作符
逗号操作符
总结一元操作符
只能操作一个值的操作符叫做一元操作符递增和...

iview 权限管理的实现

目录iview-admin2.0自带的权限管理
根据权限控制组件展示
自定义auth指令
自定义auth组件
总结
iview-admin2.0自带的权限管理
iview-admin2.0自带权限管理,可以通过设置路由...

微信小程序实现简单手写签名组件的方法实例

目录背景:需求:效果一、思路
二、实现
1. 页面与样式
2. 初始化
3. 点击时
4. 签名时
三、总结
背景:在做项目过程中,需要在微信小程序中实现手写签名组件。在网上找了微信小程...

Vue 两个字段联合校验之修改密码功能的实现

目录1、前言2、方案实现2.1、实现代码2.2、代码说明2.3、校验效果1、前言  本文是前文《Vue Element-ui表单校验规则,你掌握了哪些?》针对多字段联合校验的典型应...

教你使用vscode 搭建react-native开发环境

问题代码没有提示:
许多刚接触RN开发的非前端同学,都会问“哪个编辑器有智能提示?”。。。而对于前端同学来说,现在的日子已经好很多了,要什么自行车。低级代码错误:
这里的错误...

Vue3.0中Ref与Reactive的区别示例详析

目录Ref与Reactive
Ref
ReactiveRef与Reactive的区别
shallowRef 与shallowReactive
toRaw ---只修改数据不渲染页面
markRaw --- 不追踪数据toRef --- 跟数据源关联 不修改...

vuex 中辅助函数mapGetters的基本用法详解

mapGetters辅助函数mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:1、在组件或界面中不使用mapGetter调用映射vuex中的getter  1.1 调用映射根部store...

vue $set 实现给数组集合对象赋值

vue $set 数组集合对象赋值在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值。// data定义一个集合对象responseData:[ {'id':'1','name':'女装','pr...

解决vue前后端端口不一致的问题

vue前后端端口不一致在config index.js文件中引入如下代码即可proxyTable: {'/api': {target: 'http://localhost:3000',//要访问的后端接口changeOrigin: true,pathRewrit...

vue开发移动端使用better-scroll时click事件失效的解决方案

最近使用vue学习开发移动端的项目,使用了better-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click、v-bind:click、@click.native...

如何利用node实现静态文件缓存详解

目录缓存
缓存位置分类缓存设置headernode实现静态文件缓存
强缓存
思路代码实现
效果展示协商缓存
思路代码实现
效果展示
总结缓存
浏览器缓存(Brower Caching)是浏览器对...

关于var在for循环遇到的问题解决

前言var是ES5定义变量的一种声明方式,一直听说var声明变量,存在循环变量泄漏为全局变量问题,但总是想不明白这个“全局”有什么影响,还有,到底什么时候输出的结果是递增/减的值,什...

uniapp封装小程序雷达图组件的完整代码

效果图:实现代码如下view<canvas id="radar-canvas" class="radar-canvas" type="2d"></canvas>style.radar-canvas width 550rpx height 550rpx margin 0 autoscri...

Vue实现Dialog封装

目录Vue2 写法
Vue3 插件版写法
Vue3 动态组件写法
一些比较 hack 的写法
在写业务的时候很常见的一个场景就是需要在不同的页面调用同一个表单,常用的交互就是把表单以弹窗...

基于visual studio code + react 开发环境搭建过程

开发环境 windows开发工具 visual studio codenode 安装和 npmwindows 安装node 可以直接在 node官网 直接下载直接当作普通软件安装即可。
安装完成可以在控制台中运行node...

element-ui 上传图片后标注坐标点

什么是element-ui element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库,而手机端有对应框架是 Mint UI 。整个ui风格简...

尤大大新活petite-vue的实现

目录前言
简介上活
简单使用
根作用域
指定挂载元素
生命周期
组件
全局状态管理
自定义指令
内置指令不支持
总结
前言
打开尤大大的GitHub,发现多了个叫 petite-vue 的东西...

vue_drf实现短信验证码

目录一、需求1,需求二、sdk参数配置  1,目录结构三、代码实现1,后端代码2,前端代码一、需求1,需求  我们在做网站开发时,登录页面很多情况下是可以用手机号接收短信验证码,然...

移动端H5唤起APP的写法实例(IOS、android)

IOS
1.url scheme这个方案基本上就是针对微信、qq内置浏览器,qq浏览器等之外的其余浏览器,从native那边要一个scheme ,然后放在a标签里或者location.href跳一下就行了用一个ifr...

Vue3使用路由VueRouter4的简单示例

路由
vue-router4保持了大部分API不变,我们只关注变化部分即可。安装yarn add vue-router@4引入
cdn<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-...

vuex数据持久化的两种实现方案

目录业务需求:
方案一:vuex-persistedstate方案二:vuex-persist总结
业务需求:
在基于vue开发SPA项目时,为了解决页面刷新后数据丢失的问题,我们一般都是将数据存储在localstorage...

vuex实现简单的购物车功能

本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下文件目录如下:购物车组件<template> <div> <h1>vuex-shopCart</h1> <div class=...

使用vue-cli创建项目并webpack打包的操作方法

1.准备环境(nodejs下载和设置环境变量)
2.全局安装vue-cli,提供vue命令进行创建vue项目npm install -g @vue/cli关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如...

小程序开发实现access_token统一管理

目录TOKEN 定时刷新器一、背景二、access_token的内部设计2.1 access_token的时效性2.2 access_token 的逐渐失效性三、access_token的统一管理参考文档TOKEN 定时刷新器一...

Vue封装全局toast组件的完整实例

目录前言
一. 借助 vue-cli
1. 定义 Toast 组件2. 在 main.js 里面配置3. 在其他组件内使用二、不借助 vue-cli
1. 注册 toast 组件2. 注册 toast 插件3. 在其他组件内使用...

详细谈谈NodeJS进程是如何退出的

目录前言主动退出
Exceptions, Rejections 和 Emitted Errors
信号
小结
前言有几种因素可以导致 NodeJS 进程退出。在这些因素中,有些是可预防的,比如代码抛出了一个异常;有些...

js与css的阻塞问题详析

目录DOMContentLoaded和load
js 阻塞了什么
css 阻塞了什么
优化总结DOMContentLoaded和load
我们先了解两个事件,有助于后面的分析。load事件:load 应该仅用于检测一个完全加...

iOS微信H5页面橡皮回弹效果的踩坑记录

业务需求
近期开发的项目有一部分是与微信公众号相关的H5页面,在Android端微信上页面效果展示无异常,但是在 iOS端 微信多多少少会出现一些意想不到的bug。此次主要针对移动端...

vue中正确使用jsx语法的姿势分享

目录前言
虚拟DOM
什么是虚拟DOM
虚拟DOM的优点渲染函数是什么
jsx
在vue3中编写jsx的两种方式
用法最后
参考前言
又到了愉快的摸鱼时间,我觉得不能荒废,H5页面我一直用的v...

Node.js+express+socket实现在线实时多人聊天室

本文实例为大家分享了Node.js+express+socket实现在线实时多人聊天室的具体代码,供大家参考,具体内容如下文件结构如下:前端部分:登录页面Login部分:login.html<!DOCTYPE html>...

微信小程序实现简单聊天室

本文实例为大家分享了微信小程序实现简单聊天室的具体代码,供大家参考,具体内容如下cha.js// pages/chat/chat.js// 获取小程序实例let app = getApp();Page({ /** * 页面...

微信小程序webView嵌入H5的方法实例

前言微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个<web-view>组件来链接我们的HTML页...

Vue 页面监听用户预览时间功能的实现代码

最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed...

ES6扩展运算符的使用方法示例

目录什么是spread 和rest运算符
数组的扩展运算符
rest运算符(收集作用)
spread运算符(展开作用)
对象的扩张运算符
浅克隆
深克隆
总结什么是spread 和rest运算符
spread和rest...

JavaScript中new操作符的原理示例详解

new的用处new的作用是通过构造函数来创建一个实例对象,该实例与原型和构造函数之间的关系如下图所示:先来总结一下 创建一个空对象 空对象的内部属性 __proto__ 赋值为...

JavaScript中的AOP编程的基本实现

AOP 简介AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出...

vue 集成腾讯地图实现api(附DEMO)

目录写作背景项目说明前期准备工作
注意点写作背景.之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大部分都是原生js,且比较基础,并且很多高级Api分布比较分散,不利于...

基于Vue实现自定义组件的方式引入图标

前言在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标。搭建环境
这里通过@...

Next.js入门使用教程

目录简介创建Next.js项目
手动创建Next.js项目creact-next-app快速创建项目
Pages
路由
Link
Router
参数传递与接收
动态路由
钩子事件
获取数据
getStaticProps
构建时请...

React中refs的一些常见用法汇总

目录什么是Refs
一、String 类型的 Refs
二、回调 Refs三、React.createRef()四、useRef五、Refs 与函数组件总结什么是Refs
Refs 提供了一种方式,允许我们访问 DOM 节点或在...

Vue登录页面的动态粒子背景插件实现

目录动态粒子效果如下:
安装插件动态粒子效果如下:
安装插件npm install vue-particles --save-dev在main.js文件中全局引入import VueParticles from 'vue-particles' Vue.u...

React实现导入导出Excel文件

目录表示层
业务层
核心插件xlsx
excel 导入
excel 导出
excel 导出插件(js-export-excel)
实现效果结语
表示层
这里我是使用的是antd的Upload上传组件
引用antd部分代码
imp...

返回顶部
顶部