- 博客(62)
- 收藏
- 关注
RSS订阅原创 vite+ts项目中如何设置alias
// vite.config.tsimport { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';// node.js不是内置对象的一部分,如果想用typescript写Node.js,则需要引入第三方声明文件vue无法识别require// 执行命令:npm install @types/node --save-devconst path = require('path');// https://vite.
2022-04-06 22:28:28
977
原创 umi搭建的react项目——如何mock数据
umi搭建的react项目——如何mock数据1、本地配置打开本地配置umirc.local.ts中的mock配置打开。export default defineConfig({ mock: {},});2、配置接口在项目配置接口的文件中添加接口例如：在./src/api/user.js中添加获取用户列表的接口import request from '@/utils/request'; // axios实例// 获取用户信息export function getUserList
2022-03-11 14:36:06
4077
4
原创 husky 7.0.4 使用记录
husky-githubhusky7.0.4——提交信息规范1、安装npm install -D husky2、添加script命令在package.json文件中添加一个命令，使之在执行npm i安装依赖后，执行husky install{ "scripts": { "prepare": "husky install" }}3、运行命令npm run prepare执行完命令之后，项目根目录会出现一个.husky文件夹4、添加git hook添加commit-m
2022-03-08 20:01:12
865
原创 angular项目初始加载时，样式失效问题
angular项目初始加载时，样式失效问题ng-cloak定义和用法ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生。解决方法：在 html标签上加 ng-cloak...
2022-01-27 12:27:25
1597
原创 Umi创建react项目之配置额外的 postcss 插件。
步骤1：安装插件：npm i lib-flexible -Dnpm i postcss-pxtorem@5.1.1 -D步骤2：在.umirc.ts文件中添加import { defineConfig } from 'umi';const pxtorem = require('postcss-pxtorem')export default defineConfig({ extraPostCSSPlugins: [ //配置额外的 postcss 插件。 pxto
2022-01-25 15:05:40
2854
原创 Navigator.getBattery()获取设备电池状态
1、MDN参考网址Navigator.getBattery() - Web API 接口参考 | MDNBatteryManager（电源管理） - Web API 接口参考 | MDN//在浏览器控制台执行下列语句navigator.getBattery().then((res)=>{console.log(res)});// 返回 BatteryManager BatteryManager {charging: true //一个布尔值，说明当前电池是否正在充电。ch..
2021-12-20 17:23:17
1478
原创 react中引用swiper
npm i swiper@7.3.2// Import Swiper React componentsimport { Swiper, SwiperSlide } from "swiper/react/swiper-react";// Import Swiper stylesimport "swiper/swiper-bundle.min.css";export default function App() { return ( <Swiper className=".
2021-12-14 15:52:07
1159
原创 react hook之useRef, useImperativeHandle, forwardRef的使用方法
弹窗组件可以由此实现父组件 ------ `pages/Test/index.tsx`import { useRef } from 'react';import RefCom from '@/components/RefCom'const TestCom: React.FC = (props) => { const refCom = useRef<any>(); return ( <> <button onClick={(
2021-12-09 18:22:26
497
原创 react hook之useEffect
import { useState，useEffect } from 'react';const TestCom: React.FC = (props) => { const [loading, setLoading] = useState<boolean>(false); // 1、页面加载时触发，只会执行一次 // useEffect(() => { // // 执行的事件 // }, []) // 2、仅在 loading 更改时执行 .
2021-12-09 18:15:16
209
原创 react hook 之useState
react hook 之useState此为typescript版本import { useState } from 'react';const TestCom: React.FC = (props) => { const [loading, setLoading] = useState<boolean>(false); // setLoading就是改变loading值的方法 return ( <div> <button.
2021-12-09 18:13:52
278
原创 react hook 之组件内样式
组件内样式实现组件内样式，className={styles[‘btn’]}import styles from './index.less'const TestCom: React.FC = (props) => { return ( <div> <button className={`${styles['btn-red']}`}>按钮</button> </div> )}实现多个样式...
2021-12-09 18:06:54
731
原创 git之如何使提交在一条线上
参考文章：git cherry-pick 教程 - 阮一峰的网络日志Git 使用规范流程 - 阮一峰的网络日志Rebase - 廖雪峰的官方网站（1）rebase篇
2021-12-09 17:50:10
668
原创 git基于远程分支创建新分支
步骤一：基于远程分支创建本地新分支，并切换到新分支git checkout -b 要创建的分支名origin/要基于远程的分支步骤二：注意！！！需要先把分支推送到远程，不然提交记录会提交到基于远程的那个分支上！！！git push --set-upstream origin 新创建的本地分支步骤三：提交推送代码...
2021-11-10 10:10:52
4820
原创 axios中断请求cancelToken
偶然了解到cancelToken，记录一下。原文链接：axios 之cancelToken原理以及使用 取消上一次请求原理篇（取消ajax请求的，一般原生的话用的是abort()这个方法）：axios 之cancelToken原理以及使用为什么使用当我们在vue项目中切换频繁切换路由时，当上一个路由尚未有响应时，会对当前路由的页面信息渲染产生一定影响，对我们的性能会造成一定影响。因此，我们要做的就是在路由切换时取消上一路由未响应的请求，从而提高性能。使用步骤1、在项目中创建一个can
2021-11-09 11:07:48
896
原创 vue项目中使用wangeditor富文本编辑器
wangEditor - 轻量级 web 富文本编辑器案例图片遇到的问题：问题1：在同一个页面，实现多个文本编辑器。解决方案：有多少个字段需要富文本编辑器，就new多少个富文本编辑器对象。问题2：富文本编辑器菜单功能区域的功能按钮z-index太大。解决方案：z-index设置合适的值，并且加上 !important 提高权重。问题3：第一次鼠标全选删除不触发onchange事件。解决：通过监听input事件，当没有内容时，主动触发onchange事件.
2021-10-28 11:47:23
1195
1
原创 vue项目实现分片上传及断点续传
参考博客链接：基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件 - 夏大师 - 博客园效果图代码部分项目框架：vue+elementUI 、vue-simple-uploader、spark-md5 <!-- 上传器 --> <uploader ref="uploader" :options="options" :auto-start="false"...
2021-10-25 11:12:45
2131
3
原创 canvas的rotate属性旋转原点探究
canvas中绘制的图片旋转原点是画布的左上角，而不是绘制图形的左上角。未旋转时<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2
2021-10-21 18:03:52
843
原创 vue实现锚点跳转
<div id="box1">我是模块一</div><div id="box2">我是模块二</div><div id="box3">我是模块三</div>// 锚点跳转到模块三this.$el.querySelector('#box3').scrollIntoView()
2021-10-20 13:05:36
1254
原创 js内存的数据存储与回收
内存的数据存储栈：后进先出值类型变量：栈里存储的是 变量的key以及对应的value。方法、对象、数组等引用类型：栈里面存的 变量的key以及对应的存放数据的内存地址。V8内存的管理V8引擎：执行js的引擎。V8大小：64位下是1.4G，32位下是700M，不同浏览器，不一样。1.4G对于浏览器脚本来说完全够用js的执行是阻塞式的，代码回收没结束不会向下继续执行，（回收2G，会阻塞2s）所以设计1.4G，就可以就不会因为代码回收而阻塞太久。新生代和老生代空间
2021-10-14 21:56:21
274
原创 vue项目vant图片上传总结
页面 <!-- 上传照片 --> <van-field name="uploader"> <template #input> <van-uploader ref="uploadImg" v-model="images" :before-delete="beforeDel" :before-read="beforeRead"
2021-04-24 22:14:48
1165
原创 vue项目使用腾讯地图定位
1、public文件夹下的index.html加上 <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>2、vue页面 data () { return { address: { addr: '' }, } },method
2021-04-24 21:41:07
700
1
原创 vue项目html页面生成PDF预览、下载及生成页面水印
html2canvas官方文档jspdf官方文档概述因为生成的PDF内还有富文本，后端不好生成PDF，故有前端完成。原理html2canva生成截图，jsPDF利用图片生成PDF。代码<template> <div class="app-container"> <div id="pdfDom"> <!-- 封面 --> <div id="cover"> <div class="
2021-04-24 21:16:55
3412
4
原创 vue移动端项目实现定位
vue移动端项目实现定位腾讯地图官方地址<template> <div> <!-- 定义地图显示容器 --> <div id="container"> <iframe id="geoPage" width="100%" height="20%" frameborder=0 scrolling="no" allow="geolocation" src="https://apis.map.qq.com/tools/
2021-03-03 17:04:43
1168
1
原创 menu组件 控制台报错：Maximum call stack size exceeded
路由配置中最后加了这个 { path: ‘*’, redirect: ‘/404’, hidden: true } ，但是跳转到/404的路由（如下）没有加 { path: '/404', component: () => import('@/views/404'), hidden: true },
2021-01-07 17:47:05
136
原创 文件导入导出
导出Excel文件，responseType设置了blob，没下载成功时，后台实际返回了JSON格式的错误信息downloadClaimOrPrepaymentInfo(this.form).then(res=>{ if (res.type == 'application/json') { // json信息展示 const fileReader = new FileReader(); fileReader.onload = (ev)
2020-12-23 14:05:45
173
原创 elementUI输入框后面带有单位
添加 slot=“append” <el-input style="width: 180px" placeholder="请输入" clearable > <template slot="append">元</template> </el-input>示例图
2020-11-04 15:58:16
2959
原创 react项目问题记录_antd-mobile_轮播图问题
antd-mobile组件库使用问题01- 轮播图组件问题问题原因： 需要请求后台数据，所以一开始数据设置为空；但设置了autoplay，导致冲突现象： 一开始不自动播放，当你手动滑动一张后会自动播放问题截图：解决方案：组件属性绑定到state中的isPlay,数据请求完毕之后，在setState回调函数中进行修改isPlay//获取轮播图数据 async getSwiper() { const {data,status} = await getSwiper() i
2020-09-25 19:02:59
461
原创 正则表达式
正则表达式创建和测试正则表达式符号用法说明边界符^ : 表示匹配行首的文本（以谁开始）$：表示匹配行尾的文本（以谁结束）如果^和$同时使用的话，就变成精确匹配字符类[]中括号的意思是，一系列字符匹配其中之一即可[]多选一，^$同时使用的话就是精确匹配量词类*：出现0次或者更多次+：出现1次或者更多出>=1?:重复0次或1次{n}重复n次{n,} 重复n次或更多次{n,m} 重复n到m次小括号预定义类正则表达式中的替换几种常用的正则表达式：创建和测试正则表达式 // 第一种 var reg =
2020-09-22 11:52:43
69
原创 小程序——less
小程序中使用less安装vscode插件：easy less配置插件的输出文件的扩展名称"less.compile": { // "compress": true, // 是否删除多余空白字符 // "sourceMap": true, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件 "outExt": ".wxss" // 输出文件的后缀,默认为.css}写好less文件后直接保存，那么自动编译为wxss文件...
2020-09-15 16:07:09
211
原创 小程序——npm echarts
echarts官网说明下载echarts依赖包并拷贝到指定位置 components导入echarts自定义组件{ "usingComponents": { "ec-canvas": "/components/ec-canvas/ec-canvas" }}模板中wxml添加标签组件必须提供一个容器view 并且指定高度ec-canvas 标签需要设置样式：宽度和高度<view class="container"> <ec-canv
2020-09-15 15:06:58
1004
原创 小程序-npm vant
vant官方文档1.进入小程序根目录，打开cmd，输入：npm init输入命令后一直点回车2.输入命令：npm i miniprogram-sm-crypto --production执行命令完之后，然后再去微信开发者中点工具-构建npm，然后就成功了，如下图：# 通过 npm 安装npm i vant-weapp -S --production# 新版本npm i @vant/weapp -S --production// app.json"usingCompone
2020-09-15 14:41:44
167
转载 VUE中路由传参
原文链接一、使用router-link进行路由导航，传递参数=> 父组件中：使用标签进行导航child是子页面路由路径，123是需要传递的参数=>子组件中：使用this.$route.params.num来接收路由参数此时，页面上渲染出路由传递过来的参数num，呈现123=>路由配置文件中：num用来为参数占位=>地址栏中：在地址栏中显示传递的参数num,即123, ，刷新页面，参数不丢失二、直接调用$router.push 实现携带参数的跳转=>
2020-08-30 11:14:53
176
原创 Windows快捷键
Windows系统的常用快捷键Windows键组合键组合键功能Windows+D显示桌面Windows+M最小化所有窗口Windows+Shift+M还原最小化的窗口Windows+E开启“资源管理器”Windows+F查找文件或文件夹Windows+R开启“运行” 对话框Windows+L切换使用者(电脑锁屏)Ctrl键的组合键组合键功能Ctrl+S保存Ctrl+W关闭程序Ctrl+N新
2020-08-25 15:32:18
89
原创 vscode快捷键
vscode快捷键合集按键功能Ctrl + Shift + P，F1显示命令面板Ctrl + P快速打开Ctrl + Shift + N新窗口/实例Ctrl + Shift + W关闭窗口/实例基础编辑按键功能Alt+ ↑向上/向下移动行Shift+Alt + ↓向上/向下复制行Ctrl+Shift+K删除行Ctrl+Enter在下面插入行Ctrl+Shift+Enter在上面插入行Ctrl+
2020-08-25 15:26:30
165
原创 vue2-VS-vue3数组
vue2版本直接根据下标添加或者修改数组 <div id="app"> <ul> <li v-for='item in list'>{{item}}</li> </ul> <button @click=addObj>点我添加</button> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/
2020-08-20 06:24:07
1123
原创 Vue2—VS—vue3对象
vue2vue2版本需要使用set方法才能实现修改对象响应到视图 <div id="app"> <ul> <li v-for='(value,key) in obj'>{{key}}={{value}}</li> </ul> <button @click=addObj>点我添加属性</button> </div> <script src="https:/
2020-08-20 06:15:21
268
原创 proxy——获取负数做下标的数组数据
<script> var arr = [1,2,3] var arr1 = new Proxy(arr,{ get: function(target,prop){ if(isNaN(prop)){ return target[prop] }else{ if(prop<0){ let idx = Number(prop) idx = arr.leng..
2020-08-20 06:04:09
409
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人