- 博客(152)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vue-loader 结合 esbuild-loader 使用报错，error: Do not know how to load path xxx/xxx.vue
vue-loader 结合 esbuild-loader 使用报错，do not know how to load path
2023-03-18 19:46:47
172
1
原创 export default 在 webpack 和 vite 中 treeshaking 效果实践
webpack 和 vite treeshaking 效果
2023-03-17 20:43:35
738
原创 Vite 创建项目后 eslint 提示错误 HelloWorld.vue has no default export
vite 创建项目 eslint 报错
2023-03-03 22:08:17
490
原创 什么是代理服务器
代理服务器扮演一个中间人角色，其中，代指的是代表，理就是转发处理，也就是发送和接收数据。因此，。有代理服务器和无代理服务器，如下所示。从图中，我们可以看到，代理服务器是作为信息中转的工具，那它有什么作用呢？...
2022-07-24 19:07:24
4219
原创 【Promise 规范】resolve 和 then 方法主要逻辑
Promise 表示一个异步操作的状态和结果。掌握 Promise，有利于我们更好的运用异步编程。通过学习规范，能让我们更准确地理解 Promise 的底层逻辑。resolve 的主要逻辑如果 resolve 的参数是非 thenable 对象，则直接then 的主要逻辑如果 Promise 是 pending 状态，将 then 的 onFulfilled 方法追加到 Promise 的 onFulfilledCallback 列表后边。将 then 的 onFulfilled 方法追
2022-05-17 11:53:04
1286
7
原创 【express】使用 express 返回 gzip 的两种方式
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2022-03-03 21:34:44
1085
2
原创 vue create 报错 Cannot find module ‘C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js‘
问题描述执行 npm install -g @vue/cli执行 vue create project 报错 Cannot find module vue\cli\bin\vue.js解决方法定位到目录 C:\Users\AppData\Roaming\npm\删除以下文件原因可能用户以前安装过 vue cli，重新安装时旧文件还在导致新版本安装失败。...
2021-12-28 16:35:58
5900
1
原创 【antd-vue】 a-tree 点击节点文字展开或收缩子节点
问题描述a-tree 组件默认点击切换图标展开或收缩，如何做到点击节点文字也展开或收缩。解决方法在 onSelect 方法中调用 onExpand 方法<template> <a-tree @select="onSelect" /></template><script>export default { methods: { onSelect(selectedKeys, {node}) { node.onExpan
2021-11-18 00:45:47
3380
12
原创 四个字记住 js 数组 sort 的排序规则
比较函数compareFunction：用来指定按某种顺序进行排列的函数sort(compareFunction(a, b) {...})返回值规则如果返回值 < 0 ，a 排在 b 前如果返回值 = 0 ，位置不变如果返回值 > 0 ，b 排在 a 前前升后降前升后降的意思是：假如前一个参数 a 在计算表达式的前边，则为升序；假如后一个参数 b 在计算表达式前边，则为降序参数 a 在计算表达式的前边为升序sort(compareFunction(a, b) { retu
2021-10-27 11:18:34
127
原创 Vue 的 data 函数里的 this 用法
代码示例const app = new Vue({ el: '#app', props: { id: { type: String, default: '10000' } }, data(vm) { console.log('data', this) // ==> #1. 当前 Vue 实例 console.log('data', vm) // ==> #2. 当前 Vue 实例 return { ne
2021-10-26 00:11:16
7935
2
原创 【css】css 实现填充剩余高度
自动填充高度.html<div class="box"> <div class="header">头部</div> <div class="auto-fill">自动填充</div></div>使用 flex（推荐）兼容性好；只需关注自动填充的 div，无需考虑其他 div 的高度.box { display: flex; flex-flow: column; height: 100%;}.h
2021-10-11 21:21:56
8319
原创 【vue-router】push 方法对应的路由组件传参方式
params 方式this.push({name: 'user', params: {id: 'abc'})this.push({path: 'user/${id}')组件const User = { props: ['id'], template: '<div>User {{ id }}</div>'}路由{ path: '/user/:id', components: User, props: true }增加额外的静态参数{
2021-09-28 16:35:57
226
原创 【antd-vue】修改对话框 modal 的样式
问题描述antd-vue 修改对话框 modal 的样式解决方法template 中添加添加一下<div ref="yourModal"></div>:getContainer="() => $refs.yourModal"css 中在类名前加 /deep/代码示例<div ref="yourModal"></div><a-modal v-model="visible" :title="name" @ok="handleOk"
2021-09-27 14:48:44
2703
原创 一图看懂 offsetX，clientX，pageX，screenX 的区别
offsetX vs clientX vs pageX vs screenX
2021-05-21 15:32:31
612
原创 一行 css 实现竖直间隔线
效果图html<div class="container"> <a href="#">收藏</a> <a href="#">评论</a> <a href="#">点赞</a> <a href="#">分享</a></div>css.container { display: flex; font-size: 14px;}a { text-deco
2021-05-11 00:10:22
298
原创 解决 andoird 和 iphone 微信浏览器h5页面收起软键盘后页面留空白问题
android 版本function windowResize() { var originalHeight = document.documentElement.clientHeight || document.body.clientHeight; window.onresize = () => { var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight //键盘弹
2021-05-10 00:35:33
915
2
原创 Flex 布局的自适应子项内容过长导致其被撑大问题
问题还原flex 布局中，把其中一个子项设置 flex-grow: 1，可以使它自动占据所有剩余空间，但是当该子项内容过长时，子项长度会被长内容给撑开而出现滚动条。<div class="box"> <div class="item-1">xxxx</div> <div class="item-2"> long content - long content - long content - long content - long conten
2021-02-25 19:47:41
2880
1
原创 妙用 max 和 calc 函数实现元素居中两端等宽自适应
在 css 世界中，有时一句 css 就能实现很强大的功能，这是因为有了函数的存在。底下这句 css 就能够很轻松的实现元素两端等宽自适应padding: 1em max(1em, calc(100vw - 70ch)/2);70ch 表示元素的 width 为 70个字母长度。元素两端的补白宽度为 （屏幕宽度 - 元素宽度）/ 2 ，当补白宽度小于 1em，用 1em 代替。用 max 就是为了指定 1em 为最小补白宽度，防止元素两端宽度消失。div { height: 100px;
2021-02-23 11:53:06
305
原创 img 图片加载错误时显示默认图片
有时我们项目里的图片加载错误时（比如 404），为了友好体验，我们可以用一张默认图片来替代。方法一：用 background 遮住原图片<img src="no-such-pic.png" />img { position: relative; height: 200px; width: 200px;}img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height:
2021-02-09 20:18:38
1898
原创 利用 linear-gradient 函数实现炫酷的动态进度条
linear-gradient 函数linear-gradient 是可以用来创建颜色线性渐变效果的一个函数语法：background-image: linear-gradient(deg, color...)第一个参数为渐变的方向或角度，第二个参数为渐变颜色颜色百分比background-image: linear-gradient(to right bottom, red 25%, blue 75%)0 - 25% 为纯红色，25% - 75% 为红色渐变到蓝色，渐变中心在50%，75
2021-02-07 00:06:16
564
1
原创 不定高度元素实现高度自适应动画
问题如果元素高度确定情况下，实现动画并不是什么难事。但是如果是不定高度的元素呢？可能很多人第一反应是，给元素加个 ：height: auto可惜的是，这并不会起作用。用 max-height 代替 height思路：先将需要做动画的元素设置 max-height: 0px，overflow: hidden;在事件中给元素添加 max-height: 固定高度（>= 元素的实际高度）<!DOCTYPE html><html lang="en"><
2021-01-21 09:50:35
1099
原创 【编程规范】编程中常见中英文词汇对照
中文英文备注添加add/插入insert/创建create, new强调从无到有保存save/缓存cache/删除delete, remove/修改modify不要使用 change更新update不要使用 change替换replace/提交submit/搜索search常用于搜索框查找find比如查找字符串查找query常用于数据库获取get/...
2021-01-15 16:21:48
623
翻译 【编程规范】命名变量的艺术
There are only two hard things in Computer Science: cache invalidation and naming things. — Phil Karlton给各种东西命名着实有难度，但合理地命名得到的回报是值得我们付出心思的。你是否曾经见过类似这种代码？const convertObj = (x, y, z) => { const k = Object.keys(x); return k.map((key) => { .
2021-01-05 15:13:56
194
原创 【echarts】使用 echarts 实现中国新冠疫情实时数据地图
效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中国新冠疫情实时数据地图</title> <style> #myEcharts {
2020-09-13 21:17:04
5604
5
原创 【echarts】中国地图 china.js 在线引用地址
旧版本的 china.js 链接在 官网 已经失效。经过一番搜索，找到了 echarts 中国地图的例子，打开 F12 network 果然看到了 china.js 的链接…官网使用 china.js 的链接：https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045注：目前链接有效。如果失效，F12 看下 network 里边的链接是否已修改…...
2020-09-13 19:27:52
7601
6
原创 如何理解闭包？带你揭开闭包的面纱
如何理解闭包引言什么是闭包？闭包有什么用？通过计数器理解闭包其他引言闭包是 Javascript 一个重要的概念，也是 Javascript 难理解的一个特性。在实际开发中，有很多高级功能和第三方 API 都使用到闭包，所以，掌握闭包的概念和使用，是前端开发必不可少的技能。什么是闭包？在 JS 中，我们可以把闭包理解为一个可以访问并持有外部函数变量和参数的内函数。为什么这么说？如下图，我们在 outter 函数中定义内函数 inner，并把 inner 函数打印出来，从打印结果我们发现，在 inn
2020-06-25 01:56:05
544
原创 JS 遍历对象所有的属性和值（包括子属性）
代码：let person = {isHuman: true}let user = { name: 'john', age: 17, date: new Date(), date1: null, order: { id: 123, price: '19yuan' }}user.__proto__ = person; //指定对象的原型func...
2020-04-07 23:19:00
4956
原创 滚动加载图片实现图片懒加载
基本思路页面的每个 img 标签的 src 属性都设置为一张 loading 图片；接着为 img 加一个 data-src 属性装图片的真正地址，再加一个 data-isloaded 属性来标记 src 是否以被 data-src 给替换过；为 window 添加 scroll 监听事件，当滚动时，判断图片是否以被替换，如果没被替换，则判断是否在可见，如果可见，则替换，并把 isload...
2020-04-04 18:06:25
428
原创 【精简你的Vue代码】用class封装替换Vue的methods
介绍我们用购物车为例来说明用 class 封装业务逻辑，去掉methods的方法。Vue的实例：script.js我们在data中创建购物车对象 cart 时，不是用 cart: { } 来初始化购物车，而是通过 cart : new ShoppingCar() 我们在这里无需写任何 Methods。但是对于一些计算属性，我们仍然要明确写出来，不过可以调用 cart 对象的方法。impo...
2020-04-03 19:11:18
1713
原创 如何去掉 html 的空白文本节点 text
为什么会有文本节点html 中的空白文本节点 text，是由于标签的换行而产生的。下面的例子可以证明这一点<div id="wrapper"> <span>abc</span> <span>abc</span></div>打印 div 的所有子节点（包括文本节点 text），我们发现：第一个 text 是 div...
2020-03-31 00:36:39
1359
谷歌跨域插件 Allow-Control-Allow-Origin
2020-11-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人