- 博客(103)
- 收藏
- 关注
RSS订阅原创 Vue3 + vite 按需引入vant报错 Failed to resolve import “vant/es“ from “xxx“. Does the file exist?
学习 vue3 + vite 的时候，做一个demo项目，其中用到了vant。按照vant官网按需引入组件的时候。在vite配置中，自己配置了extensions时，没有配置 .mjs，导致找不到文件。vant的入口文件是 .mjs 后缀的，痛苦面具。
2023-10-13 15:35:24
2856
2
原创 React antd Select 无法在disabled状态下选择并复制输入框内的内容情况分析及解决方案
例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。一顿框框的看之后，意识到了问题的所在，我们想要复制的是span的内容，但是在他的上层有一层div，我们关于的鼠标事件就被div遮盖了。我们通过控制台可以看到，antd的Select实现并非传统的使用原生select来改动，而是自己通过div和span通过代码组合来组装成的组件。首先，通过打开控制台的方式，来看这个Select的Dom是怎么样的。
2023-09-21 15:52:13
1598
1
原创 网络协议从入门到底层原理学习（三）—— 路由
路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程在不同网段之间转发数据，需要有路由器的支持默认情况下，路由器只知道跟它直连的网段，非直连的网段需要通过静态路由、动态路由告诉它静态路由管理员手动添加路由信息适用于小规模网络动态路由路由器通过路由选择协议（比如RIP、OSPF）自动获取路由信息适用于大规模网络路由器中维护的路由条目的集合。
2023-09-06 14:00:21
611
原创 网络协议从入门到底层原理学习（二）—— Mac地址/IP地址
设备在转发报文时，根据报文的目的MAC地址查询MAC地址表，如果MAC地址表中包含与报文目的MAC地址对应的表项，则直接通过该表项中的出接口转发该报文；如图中，PC1发往PC3的报文，在到达交换机Switch时，根据报文中的目的MAC地址MAC3和VLAN10查询交换机的MAC地址表，获取出接口Port3，然后报文直接从接口Port3转发到PC3，完成数据的转发。组播MAC地址：除广播地址外，第8bit为1的MAC地址为组播MAC地址（例如01-00-00-00-00-00），用来代表LAN上的一组终端。
2023-09-05 10:11:29
3595
2
原创 网络协议从入门到底层原理学习（一）—— 简介及基本概念
什么是网络协议?网络协议是由定义网络上两个或多个设备之间通信的规则、过程和格式组成的正式标准和策略它们确保计算机网络设备可以使用一种通用语言传输和接收数据，而不管它们的设计、硬件或基础设施如何。网络协议管理及时、安全、管理的数据或网络通信的端到端过程。它们可以内置到硬件或软件中，而且它们是如此重要，以至于在实践中，每个网络的使用都依赖于网络协议来进行通信和连接。简单来讲：网络协议的定义：为计算机网络中进行数据交换而建立的规则、标准或约定的集合。网络协议是由几个组织根据某些行业标准开发和发布的。
2023-09-04 15:18:13
3212
原创 await Promise内部执行setTimeout定时器，提前clearTimeout，导致卡死的情况分析及解决方案
在我们日常开发中，我们常常需要在某个地方暂停某个动作一段时间。这个时候，我们的通常做法是使用setTimeout，配合promise实现。也就是如下代码。}, ms);});// 等待Promise的resolve操作完成但我们偶尔需要提前终止这个定时器。这时候我们会需要使用JavaScript 自带的clearTimeout方法，这个方法要求我们传入 timeoutId，也就是这个定时器的Id}, ms)
2023-08-27 14:52:43
728
原创 Vue 不加载字体包 导致elementUI的icon显示为正方形小框框问题解决
在一次开发任务中遭遇的一个问题正常使用 element-ui的icon时却发现不知道为什么显示都为正方形小框框于是，我就将element-ui 版本由 2.12.0 提升为 2.15.2但是无法解决这个问题失败Vue.config.js 配置问题也就是 webpack的配置问题通过将vue-cli预设配置弹出的操作，我查看了一下 Vue-cli 预设Webpack配置，和我自己的webpack配置，没看出问题来。感觉一切正常...
2022-06-08 17:31:13
5849
2
原创 Vue3+TypeScript从入门到进阶（八）——项目打包和自动化部署——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l
2022-05-29 18:37:47
1358
1
原创 Vue3+TypeScript从入门到进阶（七）——项目实战——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l
2022-05-29 18:28:07
3231
原创 Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l
2022-05-29 18:18:29
2940
原创 Vue3+TypeScript从入门到进阶（五）——Vue3基础知识点（下）——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l
2022-05-29 18:07:38
895
原创 Vue3+TypeScript从入门到进阶（四）——Vue3基础知识点（中）——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l
2022-05-29 17:37:52
802
原创 Vue3+TypeScript从入门到进阶（三）——Vue3基础知识点（上）——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l
2022-05-29 17:05:52
2390
1
原创 Vue3+TypeScript从入门到进阶（二）——Vue2和Vue3的区别——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l
2022-05-10 09:31:53
2871
原创 Vue3+TypeScript从入门到进阶（一）——Vue3简介及介绍——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l
2022-05-07 21:03:05
4691
原创 vue3 watch监听props内属性的值的变化 无响应情况分析
前言在学习Vue3的时候，在项目实战中，需要用到watch监听props内属性的值的变化但是却出现了无响应的现象虽然让他可以响应只需要对watch的监听对象做一点小小的修改，但是我们还是需要研究一下具体为什么某些做法无法传值...props: { testData: { type: Object, default: () => {} }}......setup(props) { // 这种写法属于会有响应的情况 watch( () => props.t
2022-04-28 17:53:28
37419
7
原创 Vue3 + TypeScript axios处理拦截器interceptors中requestInterceptor存在config.headers存在未定义的可能（自定义header没有值）
前言在Vue3 + TypeScript 学习时，学习到用typescript封装axios时，出现了一个问题那就是如下图所示的config.headers的对象可能未定义问题所在地方一开始我非常的不理解为什么会出现这个问题。因为我的代码是写的也没有问题啊。别人的案例代码也是这样写的。然后我就想，会不会是版本问题。于是开始查看axios的源码果然如此这是axios 0.26.1版本的AxiosRequestConfig里面的headers的类型定义这是0.21.0版本的AxiosRequ
2022-04-14 16:55:20
7366
13
原创 Vue3 + TypeScript处理ESLint和Prettier冲突时，Failed to load config “@vue/prettier/@typescript-eslint“
前言在 Vue+TypeScript 项目中，配置 ESLint 和 Prettier，在一开始会有冲突。于是我们需要在 项目内 .eslintrc.js配置一些额外的东西module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'
2022-04-11 17:20:49
13639
13
原创 Vue3源码 安装依赖时ERROR: Failed to download Chromium r722234 Set “PUPPETEER_SKIP_CHROMIUM_DOWNLOAD“
前言：在进行Vue3源码学习的时候，安装对应项目依赖时，出现的一个安装依赖问题由于Vue3使用的是yarn于是使用yarn install进行依赖安装，于是报下述错误解决方案//设置淘宝镜像下载npm config set puppeteer_download_host=https://npm.taobao.org/mirrorsyarn install给我整无语了...
2022-03-10 16:56:06
3279
1
原创 JavaScript中使用RequestAnimationFrame优化动画效果和性能学习
一、概述1、介绍进入web2.0时代，在网页中实现动画已经不再局限于一种方法你可以用CSS3的animattion+keyframes;你也可以用css3的transition;你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。reque
2022-03-05 14:11:14
3092
原创 Webpack从入门到进阶（三）---附沿路学习案例代码
文章目录Webpack从入门到进阶（三）---附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段2、前端三个框架的脚手架3、Webpack是什么？4、webpack和vite5、vue-cli-service运行过程6、Webpack的官方文档7、Webpack的依赖和安装8、webpack默认打包9、Webpack配置文件10、Webpack依赖图二、Webpack知识点七、DLL1、DLL认识、打包和使用2、Terser3、Tree Shaking4、HTTP压缩八、打包分析和webpack
2022-03-02 09:43:54
880
原创 Webpack从入门到进阶（二）---附沿路学习案例代码
文章目录Webpack从入门到进阶（一）---附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段2、前端三个框架的脚手架3、Webpack是什么？4、webpack和vite5、vue-cli-service运行过程6、Webpack的官方文档7、Webpack的依赖和安装8、webpack默认打包9、Webpack配置文件10、Webpack依赖图二、Webpack知识点四、Babel的深入解析1、认识Babel2、polyfill3、React和Typescript的支持4、ESLint5、
2022-03-01 09:29:26
641
原创 Webpack从入门到进阶（一）---附沿路学习案例代码
Webpack从入门到进阶（一）—附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段无论是作为专业的开发者还是接触互联网的普通人，其实都能深刻的感知到Web前端的发展是非常快速的对于开发者来说我们会更加深有体会；从后端渲染的JSP、PHP，到前端原生JavaScript，再到jQuery开发，再到目前的三大框架Vue、React、Angular；开发方式也从原来的JavaScript的ES5语法，到ES6、7、8、9、10，到TypeScript，包括编写CSS的预处理器
2022-02-28 11:34:45
1435
原创 Chrome浏览器无法手动添加Cookie(手动添加报红且刷新消失)
在某日的日常开发时，Chrome默认更新版本到了98.0.4758.102（正式版本） （64 位）这个版本不知道为什么对某些个属性进行了默认配置的修改。这次的版本更新导致了我们无法通过F12打开控制台在application里面手动进行cookie的设置解决办法：1、Chrome中访问地址chrome://flags2、搜索Partitioned cookies将设置项改为Enabled即可，3、重启浏览器，手动添加cookie将会保留，且不会标红...
2022-02-23 10:49:36
3659
原创 Webpack使用ReactRefreshWebpackPlugin对JSX文件进行本地热更新解析时 $RefreshSig$ is not defined
前提最近在进行Webpack5学习时，学习到HMR，也就是模块热替换，也叫模块热更新的时候，遇到了一个问题。问题在进行开发环境内模块热更新的时候，React是借助于React Hot Loader来实现的HMR，目前已经改成使用react-refresh来实现了。于是乎，我进行了以下代码的编写// webpack.config.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin
2022-02-19 00:10:15
2430
原创 Webpack5 file-loader、url-loader打包url引入一张图片生成两个图片，一个无法加载
最近在学习webpack5Webpack5 file-loader、url-loader打包url引入的图片生成两个图片，一个无法加载。但是页面引入的却是这个无法加载的图片就算是使用了file-loader的outputPath，也会发现，生成的无效图片并不会进入到outputPath中指定的路径里面。问题原因：css-loader版本不同。css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由c
2022-02-16 12:04:28
2010
5
原创 npx postcss 执行报unexpected identifier错误
最近在学习webpack的postcss的内容时，在命令行窗口执行下述语句时出现一些错误npx postcss --use autoprefixer -o result.css ./src/css/test.css这是一条利用postcss的autoprefixer插件输出一个给css加上各式浏览器前缀的语句。属于一条简单到再简单不过的命令行操作了，但是居然报错了！一开始，我以为是因为淘宝镜像引起的问题，因为一开始我通过npm安装依赖报错了，就直接用cnpm 安装依赖了结果npm安装依赖之后的
2022-02-15 15:30:42
715
原创 数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
数据可视化-echarts入门、常见图表案例及项目案例一、简介一、数据可视化简介什么是数据可视化？数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析；主要是借助于图形化手段，清晰有效地传达与沟通信息。二、echarts简介ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备
2022-02-13 01:29:29
5049
3
原创 SingleSpa及qiankun入门、源码分析及案例
SingleSpa及qiankun入门及案例一、简介1、微服务为了解决庞大的一整块后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices）：微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理然而，越来越重的前端工程也面临同样的问题，自然地想到
2022-01-12 16:25:55
3469
1
原创 Vue 用createElement 自定义列表头
文章目录Vue 用createElement 自定义列表头一、前言二、需求实现效果三、知识点1、createElement 参数深入 data 对象2、createElement 创建元素过程四、具体实现及代码1、第一步：创建需要自定义列表头的table二、第二步：创建自定义组件封装el-popover三、局部注册组件并手写createElement五、扩展知识点1、Vue源码9个基础方法Vue 用createElement 自定义列表头一、前言最近产品有需求，想要把一个搜索框放入到列表头中，一般的属
2021-07-01 12:29:35
1907
1
原创 前端面试题总结（5）
一、问题1、以下代码执行后，console 的输出是？let x = 10;let foo = () => { console.log(x); let x = 20; x++;}foo(); A、抛出 ReferenceError B、10 C、20 D、212、以下代码的执行后，str 的值是：var str = "Hellllo world";str = str.replace(/(l)\1/g, '$1');3、以下哪个语句打印出来的结果时false？A、ale
2021-06-25 16:47:03
3822
1
原创 前端面试题总结（4）
一、题目1、以下代码执行后，console 输出的信息是？for(let i = 0; i < 5; i++){ requestAnimationFrame(() => console.log(i));} 2、以下代码中文字的最终颜色是<style> div > #title{color: blue;} div > h3#title.title{color: red;} [lang="en"] h3.title{color: g
2021-06-21 17:42:02
8584
原创 前端面试题总结（3）
一、题目1、关于 BFC (block formatting context)，以下说法错误的有： A、display 的值为 table-cell , table-caption和 inline-block 中的其中一个时，可触发 BFC B、postion 的值为 relative 和 static 时可触发BFC C、overflow-hidden 可作为常用 BFC 布局属性使用 D、只要元素可以触发BFC，就无须使用 clear:both 来清除浮动的影响2、根据栅格系统的标准
2021-06-18 14:41:58
3186
1
原创 前端面试题总结（2）
文章目录一、题目二、解答1、C2、B3、B4、A5、B6、B7、CD8、D9、b和strong10、4、411、C12、AD13、BC14、BD15、ABCD16、D一、题目1、下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度 A、display:inline B、display:none C、display:block D、display:inherit2、新窗口打开网页，用到以下哪个值（）。 A、_self B、_blank C、_top D、_parent3、元素的alt和ti
2021-06-17 18:00:08
1616
原创 前端面试笔试题刷题（1）
前端面试刷题又到了一年一度跑路季。话不多说，赶紧刷起来。一、题目1、在HTML 音频/视频DOM中，___设置或返回音频/视频播放的默认速度？ A、currentTime B、duration C、defaultPlaybackRate D、playbackRate2、哪个元素表示预格式化文本? A、<main> B、<dir> C、<dd> D、<pre>3、以下哪个标签用于表示HTML5中不同类型输出的结果 A、output B、p
2021-06-15 17:25:20
4030
1
原创 JavaScript 几种数组去重的性能测试及高性能方法推荐
前言之前在写一个需求的时候，需要大量调用数组去重的方法。我一开始的简单想法过于粗略，然后自然而然的就不太OK了。于是乎，我在网上寻找到了大量的数组去重方法。一、测试模版数组去重是基本上每个人都会遇到的问题。网上的方法也是特别的多为了测试这些解法的性能，我写了一个测试模版，用来计算数组去重的耗时// distinct.jslet arr1 = Array.from(new Array(100000), (x, index)=>{ return index})let arr2
2021-06-02 19:34:48
684
2
原创 分享一个看起来挺酷眩的canvas做的粒子漩涡
如题。上班摸鱼途中逛B站看到的（笑）直接上效果和代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>首页</title> <style> html, body { margin: 0px; width: 100%; hei
2021-05-06 17:23:13
773
1
原创 emmet语法简介及在Vscode中使用Emmet快速编辑代码
文章目录Emmet语法一、Emmet语法简介1、什么是Emmet？二、基础用法1、元素(Elements)2、文本操作符(Text)3、属性操作符(Attribute operators)4、嵌套操作符(Nesting operators)5、分组操作符(Grouping)6、乘法(Multiplication)7、自动计数(numbering)三、常见用法及举例1.生成后代元素：>2.生成兄弟元素：+3.生成上级元素：^4.生成多个元素：*5.生成类名和id：. 和#6.生成文本内容：{}7.生成属
2021-04-25 23:47:08
1270
1
原创 JavaScript设计模式浅析
JavaScript设计模式浅析JavaScript设计模式浅析一、工厂模式1、简单的工程模式2、工程模式实例二、建造者模式1、建造者模式例子三、单体模式1、普通创建对象方式2、单体模式创建对象四、装饰器模式1、装饰器模式例子五、组合模式1、组合模式例子JavaScript设计模式浅析一、工厂模式工程模式是一种比较简单的设计模式，主要用来创建对象用的1、简单的工程模式//1.简单的工程模式.html<!DOCTYPE html><html lang="en"><
2021-04-25 16:48:06
2046
8
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人