- 博客(102)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 mockjs在vue项目中使用
项目中引入npm install mockjs在main.js中引入// mockjsif(process.env.NODE_ENV === "development") { require("./mock");}在src文件夹下创建mock文件夹，并创建index.js文件import Mock from "mockjs";// URL中共同地址段const baseURL = "/api/kpiManBack";Mock.mock(baseURL + "/coreWorks"
2021-10-16 11:29:49
677
原创 js日期和时间
// 获取当前日期，格式 yyyy-MM-ddexport function date() { return new Date().toJSON().split("T")[0];}// 获取当前时间，格式 hh:mm:ssexport function dateTime() { return new Date().toTimeString().split(" ")[0];}/** * @description: 获取当前时间，格式为yyyy-MM-dd hh:mm:ss *.
2021-07-24 09:20:59
310
原创 webpack5 配置css兼容和压缩
1、安装插件npm install postcss-loader postcss-preset-env -D2、配置{ test: /\.css$/i, use: [ MiniCssExtraactPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [
2021-07-20 10:58:33
1323
原创 vue3中使用ts全局声明文件
1、创建全局声明文件globle.d.ts（模板样例），注意：文件必须是以（.d.ts）结尾；关键字declare；declare const NUM = 10;2、文件存放位置，在src目录或者src下的其他目录，一般新建types目录，将所有下声明文件放在其目录下3、使用，这里要注意，在vue文件中不能使用，只能在ts文件中使用。...
2021-07-19 11:32:07
11335
6
原创 vscode给vue3添加模板片段
vscode给vue3添加模板片段{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible varia
2021-04-27 11:07:30
545
原创 BrowseRouter与HashRouter的区别
1.底层原理不一样：BrowseRouter使用的时H5的history API，不兼容IE9及以下版本。HashRouter使用的时URL的哈希值。2.url表现形式不一样BrowseRouter的路径中没有#，例如：localhost:3000/demoHashRouter的路径中包含#，如localhost:3000/#/demo3.刷新后对路由state参数的影响BrowseRouter没有任何影响，因为state保存在history对象中HashRouter刷新后会导致路由st
2021-03-26 10:30:51
356
原创 antd按需引入+自定义主题
1.安装依赖npm i react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject"}
2021-03-26 10:06:58
269
原创 路由的基本使用
1.明确好界面中的导航区、展示区2.导航区的a标签改为Link标签 <Link to="/xxx" >Demo</Link>3.展示区写Route标签进行路由的匹配 <Route path="/xxx" component={Demo} />4.的最外侧包裹一个<BrowserRouter>或者<HashRouter>...
2021-03-25 11:00:24
76
原创 路由组件与一般组件
路由组件与一般组件1.写法不同： 一般组件：<Demo/> 路由组件：<Route path="/Demo" component={Demo} />2.存放文件夹位置不同： 一般组件：components 路由组件：pages3.接收到的props不同（根本区别）： 一般组件：组件标签写什么值就传什么值 路由组件：一定会接收到路由的信息（history、location、match等），也可以传自定义的属性值...
2021-03-25 10:51:53
910
原创 路由的严格匹配与模糊匹配
尚硅谷老师笔记1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）2.开启严格匹配：例<Route exact path="/about" component={About} />3.严格匹配不要随便开启，需要时再开，有些时候开启会导致无法继续匹配二级路由...
2021-03-25 10:38:11
651
原创 解决多级路径刷新页面样式丢失的问题
尚硅谷老师笔记1.public/index.html中引入样式时将“./” 改成 “/” （常用）2.public/index.html中引入样式时将“./” 改成 “%PUBLIC_URL%” （常用）3.使用HashRouter
2021-03-25 09:12:49
205
原创 react脚手架配置代理总结
文章总结来源于尚硅谷老师的讲解假设请求地址是"http://localhost:5000"，网页发出请求的地址是"http://localhost:3000"方法一在package中追加如下配置"proxy":"http://localhost:5000"说明：1.优点：配置简单，前端请求资源时可以不加任何前缀。2.缺点：不能配置多个代理。3.工作方式：当请求了3000不存在的资源时，那么该请求会转发给5000（优先匹配前端资源）方法二1.第一本：创建配置代理文件
2021-03-24 10:33:27
131
原创 js获取数据类型的方法
/** * @description: 获取数据类型 * @param {any} obj 基本数据对象 * @return {string} 返回的数据类型 */export const rawType = (obj) => { return Object.prototype .toString .call(obj) .slice(8, -1);};
2021-03-05 08:56:35
306
1
原创 js箭头函数需要注意的三个点
1.this问题，this指向定义函数所在的对象，不再是运行时所在的对象2.箭头函数里面没有arguments，用剩余参数'...'3.构造函数，箭头函数不能当作构造函数第2点举例：let show = (...args)=>{ console.log(args)}show([1,2,3]} // 输出[1,2,3]...
2021-02-23 15:12:21
162
原创 echarts堆叠柱形图设置最小高度无效
一、记录问题：1、echarts的配置项如下：option = { tooltip: { trigger: 'axis', axisPointer: { // Use axis to trigger tooltip type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' } }, le
2021-02-19 10:37:30
3961
1
原创 vue3引入全局less Variables和Mixins
一、首先在src/less文件夹下新建variables.less和mixins.less两个文件1、variables.less文件@primary: red;@bg: blue;.tt-test { color: @primary; background-color: @bg;}2、mixins.less文件/** * @description: 文本溢出（多行） * @param {number} lineNumber 文本溢出的行数 */.more(@lin
2020-12-26 09:45:45
1992
原创 vue3引入echarts
main.js文件import { createApp } from "vue";import App from "./App.vue";import "./registerServiceWorker";import router from "./router";import store from "./store";import * as echarts from 'echarts'const app = createApp(App)app.use(store)app.use(ro
2020-12-17 16:12:41
12690
9
原创 chrome调试hover后出现的元素
当鼠标在bottom上时就会显示下面的气泡。1、打开调试窗口（F12），使用元素选择选中bottom2、然后按照下图点击（:hov），再勾选（:hover）就????了。就可以看到下面的气泡一直显示着。
2020-11-26 17:34:05
1958
转载 Webpack4之SplitChunksPlugin一些参数的理解
http://www.qiutianaimeili.com/html/page/2019/10/u3c9rzngly9.html
2020-11-24 10:01:34
111
转载 图片懒加载从简单到复杂
图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍，逐步增加复杂度，希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法，也希望对你有所帮助。为什么要做图片的懒加载假设在用户访问某个页面时就加载这个页面全部的图片（即使这些图片并不处在用户的当前的视窗中），在弱网环境或者网速较慢的环境下，这些“冗余”图片的下载会占用用户本来就非常有限的带宽，伤害用户体验（比如影响其他资源的下载）。所以对于网站的图片，理想的做法是懒加载（按需加载）。图片懒加载的原理在浏览器内
2020-11-18 09:08:04
81
转载 Linux操作系统下/etc/hosts 配置主机和IP地址的映射的作用（部署程序需要注意的问题）
1、关于/etc/host，主机名和IP配置文件 Hosts - The static table lookup for host name（主机名查询静态表） hosts文件是Linux系统中一个负责IP地址与域名快速解析的文件，以ASCII格式保存在“/etc”目录下，文件名为“hosts”（不同的linux版本，这个配置文件也可能不同。比如Debian的对应文件是/etc/hostname）。hosts文件包含了IP地址和主机名之间的映射，还包括主机名的别名。在没有域名服务器的情况下，系统
2020-11-17 11:06:38
3189
原创 echarts渐变色
一、使用echarts内置的渐变色生成器echarts.graphic.LinearGradient和echarts.graphic.RadialGradientimport echarts from 'echarts'/** * @description: echarts线性渐变色 * @param {string} startColor 开始处颜色 * @param {string} endColor 结束处颜色 * @return: */export function line
2020-11-12 11:43:24
4830
原创 解决点击浏览器窗口最大最小化时echarts的resize问题
window.onresize = () => { // myChart为echarts的实例 myChart.resize() setTimeout(() => { myChart.resize() }, 10) }
2020-11-11 17:25:33
398
2
原创 vue子组件echarts图表resize问题
1、父组件和单个子组件中使用window.onresize问题子组件中的会没有作用，解决办法：在子组件中使用addEventListener("resize",callback)替代（可参考https://blog.csdn.net/believet93/article/details/107255405）2、父组件和多个子组件时，方案1的办法也不能奏效解决办法：在父组件中监听window.onresize方法，并设置一个变量（resize），然后在子组件中监听变量（resize）的变化/
2020-11-04 11:47:39
3310
原创 vue2中使用less，添加全局less样式文件
一、vue2中安装less并使用1. 安装依赖包npm install less less-loader@5 --save-dev注意：请使用less-loader@5安装less-loader 5.0.0版本，最新版本在vue2中可能无法使用，会报错哦2、在style标签中添加lang="less"就可以使用less了<template> <div class="hello"> <h1>Welcome to Your Vue.js A
2020-10-29 10:29:04
6475
1
转载 JS遍历DOM 节点树的实现
本文将分享 DOM 节点树深度遍历、广度遍历代码。假定我仅遍历 body 且其结构如下：<body> <section class="container"> <div class="left"> <div class="menu"></div> </div> <div class="right"> <.
2020-08-31 10:09:20
628
原创 vue.js中实现在弹框外有鼠标点击事件时隐藏弹框
功能描述：点击按钮popBtn实现弹框pop的显示和隐藏交替；在弹框pop外有鼠标点击事件时需要隐藏弹框pop,但是要除开按钮popBtn。<div id="pop" v-if="isPop"> <!-- 其他html元素 --></div><button id="popBtn" @click="isPop=!isPop">显示或隐藏弹框pop</button>mounted() { // 监听页面的点击事件，如果鼠标
2020-08-28 11:40:20
889
原创 axios封装及使用
一、新建文件夹axios，在文件夹中新建文件index.js和http.js(1) index.js// 倒入所有接口import apiList from './http'const install = Vue => { if (install.installed) return install.installed = true Object.defineProperties(Vue.prototype, { // 注意哦，此处挂载在 Vue 原型的 $a...
2020-08-28 11:10:26
631
原创 vue.js中使用animate.css
1、安装npm install animate.css --save2、在main.js文件中引入import animated from 'animate.css'Vue.use(animated)3、使用实例（1）基础用法 <h1 class="animate__animated animate__rotateOutDownRight animate__infinite animate__delay-2s">An animated element<
2020-08-28 09:08:29
549
原创 websocket封装，有心跳和断开重联功能
一、新建文件夹websocket，在文件夹中新建index.js文件。index.js文件如下import store from '../store'const socket = { $ws: null, // websocket对象 lockReturn: false, // 重连锁 timeout: 60 * 1000 * 5, // 5分钟重连 timeoutObj: null, // setInterval()定时器id timeoutNum: null, //
2020-08-27 11:45:59
557
1
原创 vue.js移动端touch事件左右滑动与uc浏览器冲突的解决办法，并解决滑动页面有垂直滚动条时无法滚动的问题
主要在touchmove事件中阻止事件的默认行为，if(disX > disY) {e.preventDefault()}事件是关键。另外，如果子元素中不存在滚动条的话，是可以直接在touch事件后加 .prevent 的，而不用在touch事件处理方法中去阻止默认事件。<div @touchstart="start($event,key)" @touchmove="move($event,key)" @touchend="end($event,key)" ref="tab
2020-08-27 09:41:21
1950
转载 ajax异步请求图片blob转base64并显示出来
转载：https://www.jianshu.com/p/cc9d2a1bd833 methods: { tapCaptcha(){ var that=this; Request.get('captcha', { responseType: 'blob', }).then(res => { var a = new FileReader();
2020-08-24 14:49:09
1005
原创 vue中图片不存在时使用默认图片
<img :src="imgPath">try { this.imgPath = require('./1.png');} catch(err) { this.imgPath = require('./default.png');}
2020-08-20 14:04:46
613
原创 js中给函数参数设置默认值
function exam(a,b) { let aDef = a ? a : 'def' let bDef = b ? b : 'def' console.log(aDef, bDef)}
2020-08-08 11:25:27
579
原创 web前端开发常用网站（vue.js）
1、vue.jshttps://cn.vuejs.org/2、elementUIhttps://element.eleme.cn/2.0/#/zh-CN3、echartshttps://echarts.apache.org/zh/index.html4、Animate.csshttps://animate.style/5、lesshttp://lesscss.cn/6、sasshttps://www.sass.hk/guide/7、Awesomes-Web前端
2020-07-30 14:44:25
910
原创 vue强制刷新dom（使用v-if）（添加key）
最近在一个项目中遇到一个问题，点击按钮后，只能通过子组件向后端请求数据，但是点击按钮并不能重新加载子组件，因此无法向后端请求数据。这里我们的子组件为 childComponent，实现刷新的方法如下：<childComponent v-if="refresh"></childComponent><button @click="handleClick"></button>handleClick() { this.refresh = fa
2020-07-10 17:26:00
5126
2
原创 vue 父子组件中同时使用window.onresize时，子组件中的不起作用，解决办法
将 window.onresize 替换成 window.addEventListener("resize",()=>{})
2020-07-10 16:58:45
1392
原创 vue中引入并使用字体图标
1、去阿里图标库（https://www.iconfont.cn/）将需要的图标加入购物车，选择好之后选择下载代码2、将下载的文件解压放到vue项目中3、在浏览器打开demo_index.html文件，文件中有三种使用方法，本文使用font class方式，本文使用此方式是因为web服务器处于内网，是无法访问外网的4、在vue项目中使用，使用如下方式代替第一步的方式，在需要用到字体图表的vue文件中使用<style scoped>@import url('../i
2020-06-06 10:17:56
452
原创 元素居中的2种方法（可以忽略父元素和子元素的宽高）
先放一下效果图 1、使用弹性盒子（万能）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .parent { width: 400px;...
2020-05-29 09:53:33
423
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人