自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(74)
  • 问答 (15)
  • 收藏
  • 关注

原创 “React学习之旅:从入门到精通的点滴感悟“

2. 列表渲染3.JSX 语法规则3.1 插入内容jsx 中的注释JSX 嵌入变量作为子元素情况一:当变量是 Number、String、Array 类型时,可以直接显示情况二:当变量是 null、undefined、Boolean 类型时,内容为空;如果希望可以显示 null、undefined、Boolean,那么需要转成字符串;转换的方式有很多,比如 toString 方法、和空字符串拼接,String(变量)等方式;情况三:Object 对象类型不能作为子元素(not

2023-12-25 22:10:53 543

原创 webpack配置分离(详细)

💅 想寻找共同学习交流、共同成长的伙伴,文章最后有作者l联系方式(备注进群)当我们实际项目的开发过程中,webpack.config.js文件中的某些配置只是在开发环境中有依赖,并不想让其打包到生产环境中去,比如webpack-dev-server,有些配置是开发环境不需要,生产环境需要,比如压缩js代码的配置,因此对这里的配置做一个分离。

2023-05-21 14:00:00 610

原创 webpack性能优化方案(详细)

因为该插件webpack已经默认安装和集成,所以我们并不需要单独安装和直接使用该插件;只需要提供SplitChunksPlugin相关的配置信息即可;Webpack提供了SplitChunksPlugin默认的配置,我们也可以手动来修改它的配置:比如默认配置中,chunks仅仅针对于异步(async)请求,我们可以设置为initial或者all;SplitChunks自定义配置解析常用配置解析默认值是async另一个值是initial,表示对通过的代码进行处理。

2023-05-20 10:45:00 9434

原创 vite和webpack的区别(多层面分析)

webpack是基于Node的构建,JavaScript是毫米级别。vite是基于esbulid预构建依赖,esbulid是采用go语言编写的,go语言是纳秒级别。vite不需要经过打包,之前的浏览器不支持 ES module,在开发阶段不需要将代码打包成单个文件,而是通过预构建的方式直接加载模块。在生产环境中,Vite使用Rollup进行打包,生成优化的代码文件。Webpack使用了模块打包策略,将项目中的所有模块打包成一个或多个文件,需要打包转es5然后给浏览器运行。webpack:模块以及模块依赖的模

2023-05-16 17:04:26 876

原创 webpack开发服务器配置

比如在index.html中,我们需要依赖一个 abc.js 文件,这个文件我们存放在 public文件 中;在index.html中,我们应该如何去引入这个文件呢?✓ 比如代码是这样的:< script src="./public/abc.js">;但是这样打包后浏览器是无法通过相对路径去找到这个文件夹的;会报错解决:所以代码是这样的:< script src="./abc.js">< /script>;设置static即可;

2023-05-15 14:37:15 740 1

原创 快速上手Vite 配置指南

💅 想寻找共同学习交流、共同成长的伙伴,文章最后有作者l联系方式(备注进群)

2023-05-12 10:56:44 680

原创 webpack高级-babel的使用

💅 想寻找共同学习交流、共同成长的伙伴,文章最后有作者l联系方式(备注进群)

2023-05-09 16:38:43 514

原创 云函数中无法调用axios请求失败问题。

今天写了微信云函数调用axios发现请求不来,报错。今天又是踩坑的一天。通过一波猛如虎的操作,考虑到axios版本问题,尝试降低版本。目前最新的axios应该是没兼容到node版本更新,所以才出的问题。然后点击按钮发送请求,竟然请求失败。💅 想寻找共同学习交流、共同成长的伙伴,文章最后有作者l联系方式(备注进群)这是我写的简单的发个请求。然后安装运行竟然可以了。

2023-05-07 13:49:18 551

原创 浅谈webpack devtool里的Source Map

💅 想寻找共同学习交流、共同成长的伙伴,文章最后有作者l联系方式(备注进群)

2023-05-02 16:35:09 1308

原创 webpack基础笔记,后续有高阶笔记。

💂 个人网站:【紫陌】【笔记分享网站,进群就有】💅 想寻找共同学习交流、共同成长的伙伴,【前端学习交流群】

2023-04-17 17:34:32 420

原创 使用Vue3自定义指令,让你的应用更具交互性

在Vue的模板语法中我们学习过各种各样的指令:v-show、v-for、v-model等等,除了使用这些指令之外,Vue 也允许我们来自定义自己的指令。这篇文章主要讲Vue3指令,想看Vue2指令看我另一篇文章,Vue2自定义指令。文章最后有对比vue2和Vue3的指令区别自定义指令可用于定义复杂的行为或公用的行为。当你想要在多个组件中重用某个复杂的行为或逻辑时,就可以考虑使用自定义指令。自定义局部指令组件中通过 directives 选项,只能在当前组件中使用;自定义全局指令。

2023-03-29 18:02:04 1147 4

原创 类式与函数式封装原生wx.request,你更喜欢哪种方式?

💂💅原生的wx.request()存在以下缺点:回调函数嵌套过多:原生wx.request()是异步请求,需要使用回调函数获取响应结果。如果请求嵌套较多,回调函数嵌套层数会比较深,导致代码难以维护和阅读。错误处理繁琐:原生wx.request()返回的结果并不一定是正确的响应数据,还可能包含网络错误、超时、认证失败等错误信息。如果不进行错误处理,这些错误信息可能导致应用程序出现异常,而原生wx.request()并不提供方便的错误处理机制。

2023-03-25 11:47:27 483 1

原创 vant tabbar解决路径问题(根据路径显示高亮tabbar)

💂💅url路径匹配tabbar高亮问题。vant中的tabbar组件,遇到到url路径匹配tabbar高亮问题。

2023-03-20 17:22:28 830 1

原创 微信小程序详细登录流程(图解+代码流程)

💂💅微信小程序的登录和web端的登录有一点是不同的,小程序需要和微信的服务通信验证。微信小程序详细教程

2023-03-19 14:26:43 27667 18

原创 TypeScript中的interface和type区别

总结: 如果是非对象类型的定义使用type, 如果是对象类型的声明那么使用interface。interface 可以重复的对某个接口来定义属性和方法;但是使用interface就不可以定义非对象类型(语法错误)type类型使用范围更广, 接口类型只能用来声明对象。在声明对象时, interface可以多次声明。interface支持继承的,type不支持。interface可以被类实现。

2023-03-07 12:02:57 1619 1

原创 移动端适配的理解和各种方案解析(详解)

自适应:根据不同的设备屏幕大小来自动调整尺寸,大小。响应式:会随着屏幕的实时变动而自动调整,是一种自适应。

2023-02-24 11:05:24 8673 2

原创 Typescript中type和typeof的区别

在 TypeScript 中,type和typeof都是用于类型定义的关键字,但它们的作用不同。

2023-02-20 17:31:07 443

原创 CSS中的BFC详细讲解(易懂)

一个BFC区域只包含它的子元素,不包含其子元素的子元素。成为一个BFC区域要满足一定的条件。不同的BFC区域相互独立,互补影响。BFC是属于普通流的,我们可以把BFC看成页面的一块渲染区,他有自己的渲染规则,简单来说就是BFC可以看做元素的属性,当元素有了BFC这个属性,这个元素可以看做隔离了的容器,容器里面的元素不会在布局上影响到外面的元素。

2023-02-16 10:04:32 7735 3

原创 权限管理实现的两种方式(详解)

第一种:基于角色Role的动态路由管理。登录:登录验证通过之后后台会返回一个token给前端,前端会保存在vuex和本地(防止刷新丢失登录状态),然后拿token去后台请求一个userInfo的接口获取用户信息(用户名,权限信息等等)权限验证:通过token获取用户role信息,然后根据用户role算出对应应有权限信息的路由,最后用router.addRotes动态挂载计算出的路由。

2023-02-10 15:04:05 12582 6

原创 Vue中作用域插槽solt详解

作用域插槽:子组件的数据来源于父组件,子组件是决定不了自身结构与外观的

2023-02-01 06:45:00 1063

原创 Vue中的$children与$parent讲解

$children与$parent

2023-01-31 21:37:59 1681

原创 Vue中组件通信-$attrs与$listeners

listeners与$attrs(组件通信方式的一种)他们两者都是组件实例的属性,可以获取到父组件给子组件传递的props与自定义事件。

2023-01-31 20:36:29 5035 2

原创 ElementPlusError:[ElPagination] 你使用了一些已被废弃的用法,请参考 el-pagination 的官方文档

控制台说我分页器组件语法有问题,然后我就去看我的代码,反复看也没有问题,和文档都是一样的语法。后面我一个一个删除运行,当我删除total就没有了警告。total是是后台接口的数据的。我看看是不是数字类型。然后用typeof检查竟然不是Number类型。

2023-01-31 14:15:03 13294 10

原创 Vue中的sync属性修饰符(父子数据同步)

属性修饰符sync父子组件数据同步的一种,和v-model差不多可以实现父子组件数据同步:money.sync,代表父组件给子组件传递props['money'],给当前子组件绑定一个自定义事件(update:money)

2023-01-30 23:18:41 873

原创 深入Vue中v-model(详解)

这样就实现了v-model实现父子组件数据同步 (实现父子组件通信)组件上可以理解为v-model是 :value="msg" @input="msg = $event" 的语法糖

2023-01-18 12:15:00 1483

原创 Vue中自定义事件的深入

原生btn按钮-- 使用Event1组件:底下这个组件 @click.native 原生DOM事件,利用事件的委派-->-- 自定义事件对于原生DOM没有任何意义 -->-- 原生的btn

2023-01-17 08:45:00 332

原创 Object.asign实现对象拷贝

针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。文章有写的不当的地方,欢迎指正修改。Object.assign()方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

2023-01-15 14:45:00 727

原创 swiper插件实现轮播图

即使这样也还是无法实现轮播图,原因是,我们轮播图的html中有v-for的循环,我们是通过v-for遍历bannerList中的图片数据,然后展示。注意:在创建swiper对象时,我们会传递一个参数用于获取展示轮播图的DOM元素,官网直接通过class(而且这个class不能修改,是swiper的css文件自带的)获取。但是这样有缺点:当页面中有多个轮播图时,因为它们使用了相同的class修饰的DOM,就会出现所有的swiper使用同样的数据,这肯定不是我们希望看到的。文章有写的不当的地方,欢迎指正修改。

2023-01-14 08:30:00 3473

原创 mock的基本使用

mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发,mockjs可以拦截ajax请求,返回设定好的数据。注意:在server.js文件当中对于banner.json||floor.json的数据没有暴露,但是可以在server模块中使用。mock需要的数据|相关mock代码页书写完毕,关于mock当中serve.js需要执行一次,注意:mock(模拟数据)数据需要使用到mockjs模块,可以帮助我们模拟数据。**第六步:**回到入口文件,引入mockServe.js。

2023-01-13 04:30:00 1546

原创 多次执行相同的push、replace问题(重写push、replace)

||undefined}})时,如果多次执行相同的push,控制台会出现警告。注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。文章有写的不当的地方,欢迎指正修改。由于vue-router最新版本3.5.2,引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象。原因:push是一个promise,promise需要传递成功和失败两个参数,我们的push中没有传递。这种异常,对于程序没有任何影响的。

2023-01-12 20:02:15 1418

原创 Vue中路由传参的方式(含有一些问题)

​ 业务:路由跳转,home模块跳转search模块,home的数据带上给search上使用。home.vue${this${thissearch.vue 获取传递过来的参数

2023-01-11 21:03:12 499

原创 error when starting dev server:Error: The package “@esbuild/win32-x64“ could not be found, and is n

启动npm run dev时报错。failed to load config from C:\Users\PC3803\Desktop\Vue3+TS\vue3_ts_cms\vite.config.tserror when starting dev server:Error: The package "@esbuild/win32-x64" could not be found, and is needed by esbuild."--no-optional" or "--omit=option

2022-12-23 14:05:15 9356 4

原创 vue3路由切换过渡动画实现(含有一些坑)

今天写项目的准备收尾的时候,想给路由组件切换给一个过渡效果。在开发的过程中遇到一些坑。

2022-12-23 13:56:06 6078 5

原创 Vue3中的pinia使用(收藏版)

pinia官方文档Pinia 的优点更多查看文档…在main.js中引入pinia并创建容器挂载到根实例上创建stores文件夹和index.js文件(这个文件以后基本不用管了)在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。(类似vuex的模块化)defineStore 是需要传参数的,然后再组件中使用:运行效果: 可以用vue3的调试工具看pinia案例需求,点击按钮加一:一个不解构,一个不解构看看区别。运行结

2022-12-08 12:04:18 22559 15

原创 Vue3.x中的vue-router4.x的使用

路由跳转及参数的使用在vue3.x setup中 , useRouter、useRoute通常用来:vue-router 3.x中 获取路由参数:通配符 * 被取消keep-alive使用可利用keep-alive的 include 或 exclude 属性(include 和 exclude 包含的name 是组件的name不是router name)来设置缓存:vue2写法:vue3写法:注意:keep-alive 必须用在 router-view 内部文章有写的不当的地方,欢迎指正修

2022-12-06 11:25:59 725

原创 Vue3.2中的setup语法糖(易懂)

使用setup语法糖后,不用写setup函数;组件只需要引入不需要注册;属性和方法也不需要再返回,可以直接在template模板中使用。父组件:子组件:运行结果:script setup 是 vue3.2 的新语法糖,并不是新增的功能模块,主要好处有:因为没有了setup函数,那么props,emit怎么获取呢?setup script语法糖提供了新的API来供我们使用。父组件:子组件:运行结果:直接打印父组件传过来的值。defineEmits 子组件向父组件事件传递子组件:父组件:运行后

2022-12-05 17:59:06 2745

原创 若依框架RuoYi项目运行启动教程【傻瓜式教程】

若依官网若依在线文档首先去官网下载代码链接到码云下载,要么用git下载要么压缩包下载。然后再IDEA打开项目想要运行就要搭建好环境按照文档要求配置环境这些准备好了就可以开始运行了然后导入数据SQL文件位置创建数据库并且导入导入成功就有很多表,mysql就配置完毕下载Redis开启服务有着图标就是开启成功打开客户端管理工具数据库就配置完成了。在这个文件运行就可以了出现这个表示后端运行成功了在浏览器运行,这也表示后端运行ok的。切换到ruoyi-ui目录的终端运行 npm i 下载所有依赖我改了后端端口

2022-12-03 11:28:43 52985 21

原创 Vuepress项目打包出现样式丢失,黑白效果。

今天部署vuepress项目时,出现了样式丢失,网页打开黑白。

2022-11-24 14:34:36 2013 3

原创 Promise的理解与使用(收藏版)

Promise入门理解

2022-11-04 11:46:39 1207 2

原创 axios发送get请求,node后台接收不到参数(已解决)

params是添加到url的请求字符串中的,用于get请求带参数。data是添加到请求体(body)中的, 用于post请求带参数。

2022-10-29 10:50:17 3537 4

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除