web前端
走_开
这个作者很懒,什么都没留下…
展开
-
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 · 700 阅读 · 0 评论 -
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 · 326 阅读 · 0 评论 -
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 · 1394 阅读 · 0 评论 -
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 · 11943 阅读 · 6 评论 -
react脚手架配置代理总结
文章总结来源于尚硅谷老师的讲解假设请求地址是"http://localhost:5000",网页发出请求的地址是"http://localhost:3000"方法一在package中追加如下配置"proxy":"http://localhost:5000"说明:1.优点:配置简单,前端请求资源时可以不加任何前缀。2.缺点:不能配置多个代理。3.工作方式:当请求了3000不存在的资源时,那么该请求会转发给5000(优先匹配前端资源)方法二1.第一本:创建配置代理文件原创 2021-03-24 10:33:27 · 141 阅读 · 0 评论 -
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 · 2055 阅读 · 0 评论 -
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 · 12861 阅读 · 9 评论 -
chrome调试hover后出现的元素
当鼠标在bottom上时就会显示下面的气泡。1、打开调试窗口(F12),使用元素选择选中bottom2、然后按照下图点击(:hov),再勾选(:hover)就????了。就可以看到下面的气泡一直显示着。原创 2020-11-26 17:34:05 · 2121 阅读 · 0 评论 -
Webpack4之SplitChunksPlugin一些参数的理解
http://www.qiutianaimeili.com/html/page/2019/10/u3c9rzngly9.html转载 2020-11-24 10:01:34 · 134 阅读 · 0 评论 -
图片懒加载从简单到复杂
图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍,逐步增加复杂度,希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法,也希望对你有所帮助。为什么要做图片的懒加载假设在用户访问某个页面时就加载这个页面全部的图片(即使这些图片并不处在用户的当前的视窗中),在弱网环境或者网速较慢的环境下,这些“冗余”图片的下载会占用用户本来就非常有限的带宽,伤害用户体验(比如影响其他资源的下载)。所以对于网站的图片,理想的做法是懒加载(按需加载)。图片懒加载的原理在浏览器内转载 2020-11-18 09:08:04 · 95 阅读 · 0 评论 -
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 · 3864 阅读 · 0 评论 -
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 · 6925 阅读 · 1 评论 -
10个Vue开发技巧
https://mp.weixin.qq.com/s/xjmv86HwWOP5LlfbfdYZ5w转载 2020-09-07 11:23:04 · 302 阅读 · 0 评论 -
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 · 647 阅读 · 0 评论 -
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 · 923 阅读 · 0 评论 -
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 · 658 阅读 · 0 评论 -
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 · 566 阅读 · 0 评论 -
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 · 585 阅读 · 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 · 2052 阅读 · 0 评论 -
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 · 1027 阅读 · 0 评论 -
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 · 599 阅读 · 0 评论 -
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 · 971 阅读 · 0 评论 -
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 · 5322 阅读 · 2 评论 -
vue 父子组件中同时使用window.onresize时,子组件中的不起作用,解决办法
将 window.onresize 替换成 window.addEventListener("resize",()=>{})原创 2020-07-10 16:58:45 · 1427 阅读 · 0 评论 -
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 · 465 阅读 · 0 评论 -
元素居中的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 · 448 阅读 · 0 评论 -
使用i18n对vue项目进行国际化
一、安装组件npm install vue-i18n二、定义原创 2020-05-15 11:30:18 · 333 阅读 · 0 评论 -
js实现中文简体繁体转换
一、先定义一个中文简体繁体对应文件(cntc.js)const lang = { zh_cn: '啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏百摆佰败拜稗斑班搬扳般颁板版扮拌伴瓣半办绊邦帮梆榜膀绑棒磅蚌镑傍谤苞胞包褒剥薄雹保堡饱宝抱报暴豹鲍爆杯碑悲卑北辈背贝钡倍狈备惫焙被奔苯本笨崩绷甭泵蹦迸逼鼻比鄙笔彼碧蓖蔽毕毙毖币庇痹闭敝弊必辟壁臂避陛鞭边编贬扁便变卞辨辩辫遍标彪膘表鳖憋别瘪彬斌濒滨宾摈兵冰柄丙秉饼炳病并玻菠播拨钵波博勃搏铂箔伯原创 2020-05-14 17:22:45 · 3678 阅读 · 0 评论 -
v-for中使用ref属性
在v-for循环中使用ref会用一个问题,如果使用绑定 :ref 会发现,使用js是无法对绑定的元素进行操作的,原因在vue官网中有说明。但是还是希望能够在v-for中使用ref并且能够使用js对每个元素进行操作,这里就不要使用绑定的方式。下面给出了v-for中使用两种不同方式的实验结果,使用绑定的方式会报错,不使用绑定的方式可以操作成功。1、v-for中使用ref,绑定的方式<template> <div> <div class="main" @clic原创 2020-05-12 09:45:53 · 10608 阅读 · 1 评论 -
使用documentElement.classList.add()给元素添加动画或样式
1、代码<template> <div class="main" @click="test"> <div id="animateDiv" class="normal"></div> </div></template><script>export default { name: "H...原创 2019-12-08 14:07:53 · 2905 阅读 · 0 评论 -
geo组件中添加roam和zoom对散点图的影响(已解决)
1、在配置geo组件的roam=true或者zoom放大倍数(不等于1)后,窗口放大缩小会是散点图的坐标错位。贴上代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 ech...原创 2019-12-03 09:04:09 · 1902 阅读 · 0 评论 -
使用弹性盒子(flexbox)进行页面布局
1、直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-11-27 14:30:59 · 754 阅读 · 0 评论 -
vue2项目中点击按钮实现echarts放大缩小动画(Element.classList.add()方法和Element.classList.remove()方法)
1、html部分<div id="productivities" class="em-vs-charts" style="margin-top:10px;"> <div> <div> <img style="margin:auto 15px;" src="../assets/venderstatisticsicons/icon_Ne...原创 2019-11-25 18:14:40 · 1646 阅读 · 0 评论 -
echarts图标添加标线markLine(点到点的方式)
option = { xAxis: {}, yAxis: {}, series: [{ symbolSize: 20, data: [ [10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], ...原创 2019-11-20 18:42:01 · 2303 阅读 · 0 评论 -
el-table头部添加元素
1、html部分: <el-table ref="PendingTable" :data="projectsInfo" style="border-radius:5px;" :header-cell-style="{'border-bottom':'solid 1px #d2d3da'}"> <el-table-column fixed="left...原创 2019-07-08 08:55:08 · 1196 阅读 · 0 评论 -
vue2 添加enter按钮事件
1、原生的input,使用 @keyup.enter;原生的按钮也使用@keyup.enter;2、element-ui的el-input,使用 @keyup.enter.native;因为element-ui把input进行了封装,原事件就不起作用了。<input type="text" placeholder="手机号" v-model="phoneNumber" @keyup...原创 2019-07-01 15:58:02 · 2866 阅读 · 0 评论 -
vue2报错 Cannot read property '__ob__' of undefined
报错如下:vue.esm.js?efeb:1897 TypeError: Cannot read property '__ob__' of undefined at VueComponent.Vue.$destroy (vue.esm.js?efeb:3998) at destroy (vue.esm.js?efeb:3168) at invokeDestroyHook...原创 2019-06-12 09:44:46 · 5834 阅读 · 2 评论 -
npm inatall 报错解决办法
1、npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.需要更新npm,更新命令:npm install -g npm接着:npm install查看npm版本: npm -v2、尝试一...原创 2019-06-04 10:17:38 · 775 阅读 · 0 评论 -
vue-router路由元信息详解
原文链接:https://www.cnblogs.com/goloving/p/9074410.html转载 2019-05-29 10:45:56 · 712 阅读 · 0 评论 -
vue-router刷新页面显示404
参考:https://blog.csdn.net/u011025083/article/details/80352301转载 2019-06-12 19:55:21 · 1827 阅读 · 0 评论