- 博客(19)
- 收藏
- 关注
RSS订阅原创 Nest.js中间件进一步理解
在中,可以用中间件干非常多东西,比如验证所有前端接口的token是否过期,或者如要进行统一的方法,都可以进过中间件。
2024-08-20 01:26:39
686
原创 使用vite导入public下面的图片
想在vue文件中去使用public下的图片,但是显示不出来,在浏览器上看是请求到图片的，但是不知道为什么el-image却显示不出来，但是img却显示出来,终端报错。翻译了一下就是让你把@@/public/xxxxx转为/xxxx 不需要前面的@@/public/，去vite官网找，看到。所以在以后如果在public下的图片可以直接请求,不需要使用@来转了。我在vite.config.ts中配置。
2024-07-23 22:08:09
191
原创 Nuxt3和Vue3在处理scoped时的区别
nuxt3即使父组件和子组件写了一样的.box，但是子组件他并不会受到父组件的影响,这个就是问题所在点，为了避免这样的问题，在使用vue3的时候，需要设置跟组件css的时候，要设置与父组件所设置css不同的class类,在使用nuxt3时，这些顾虑就没有了。就是说即使你加了scoped，子组件的根节点.box还是会受到父组件的影响,从而使用父组件的样式,那么为什么nuxt3没有呢，官网是这样说的。这些东西并没有设置在我的子组件css .box上，但是他却出现了,一看这不是我在父组件上设置的吗?
2024-07-23 17:45:09
368
原创 解决el-select无论如何都没办法显示数据问题
设置css，结果可以显示了，如果小伙伴们el-select无法回显数据，可以试一下这个方法，看看是不是莫名其妙隐藏了，但愿这个方法能对你们有效。
2024-07-15 01:09:16
430
原创 图片删除了但是运行在浏览器上还是有
今天在写代码的时候，因为要更改两个图片的名称，让他们反过来，但是改完之后浏览器并没有什么变化，把本地的图片删除了浏览器上还是存在图片，这时，我们打开浏览器。看到网络上的图片是通过缓存在内存中的，于是我打开电脑任务管理器把浏览器的内存全删除了，但是依然存在，于是我把电脑关机了，开机启动项目还是存在，然后看到。把他关掉，在启动项目，让自己的图片存在缓存中去替换之前的就行了。网址，浏览器上可以设置关闭缓存。
2024-07-13 21:32:15
202
原创 vue3中watch和nextTick的区别和使用
最近在写项目的时候遇到一个问题在父组件中调API取后端的数据,然后将这些数据父传子放到我封装好的el-pagination中,自定义total等分页属性,如下图项目目录封装好的子组件父组件。
2024-07-02 02:12:31
441
原创 Vue3使用defineprops丢失响应式的解决方法
今天写代码的时候,父组件传给子组件的数据,然后修改数据去调取后端的接口,结果数据一直对不上,然后发现终端中打印的。但是在别的地方写需要props.id来使用id传来的值,有些人觉得这样不太优雅,于是这样写。这就是问题的所在,这样会使id丢失响应式。比如我们平时写代码父传子是这样的。如果非要使用结构式,可以这样玩。点击进入发现尤大大发的文章。
2024-06-13 20:58:28
411
原创 webpack源码地图的作用
打包之后运行在浏览器上的代码,如果我们想要去调试的话,就需要打断点,如果没有源码地图,看到的是我们打包之后的代码，不方便调试。如果有了源码地图,就可以在调试的时候,看到自己开发的时候写的源码,从而方便调试,在movit-list下可以找到我们写的源码。webpack打包之后存在.map为后缀的css,js代码,这些就称为源码地图。
2024-06-10 18:47:19
115
原创 webpack打包时,文件指纹的作用
在浏览器中,浏览器首次会访问服务器请求css,js等代码(浏览器不会缓存html代码),放到浏览器缓存中,从而下次不在请求服务器,而是直接在浏览器缓存中拿到css,js等代码,如果不加上文件指纹,那么浏览器不知道css,js等代码已经发生改变,从而继续使用缓存中没有变化的css,js等代码,这就出现严重的问题。当文件发生变化的时候,文件指纹也会发生变化,反之文件没有发生改变,文件指纹也不会变化。可以在webpack中配置不生成文件指纹,如果不生成文件指纹的话,会导致一个大问题。这就是使用文件缓存的好处。
2024-06-10 18:35:57
310
原创 Webpack等打包工具是怎么实现启动本地服务器,并且实时预览并更新的
而实时更新是当我们的代码发生变化,webpack帮我们在打包一次,浏览器是怎么知道我们更改了代码呢?这时webpack就会用到websocket来进行通知浏览器我们代码发生变化了,重新运行新的代码,在运行在重新运行时,更新分为两种模式,第一种是吧浏览器真正的刷新一遍,第二种是热更新(HMR)
2024-06-10 18:16:45
364
原创 CommonJS和Ecmascript Module的区别
这样对比的话,Ecmascript Module是比CommonJS更好的,因为不需要运行就确定好依赖关系,可以在运行前就确定好,这样可以更好的优化代码。CommonJS和Ecmascript Module都是前端模块化的一个标准。如以上代码,只有在运行过后才会确定依赖的是什么，使用动态导入也是可以的,
2024-06-10 16:13:31
465
原创 解决element-plus的el-dialog弹出框的时候会多出width:calc(100% - 8px)问题
打开会莫名其妙的el-dinalog出现位移，并且body上出现 style="width:calc(100% - 8px)"只要加上:lock-scroll="false"即可,在官网上是这样写的。只要设置为false即可。
2024-05-23 15:20:32
464
1
原创 解决element-plus的Dialog对话框的遮罩层无法全屏遮罩
最近在使用element-plus中的Dialog对话框的时候,我放在el-card中,造成了打开对话框的遮罩层无法全屏显示,在github上找很多解决方法,最后在看官方文档的时候,官方有这一个属性。这个属性加到el-dialog上即可,然后就可以实现遮罩层全屏遮罩。
2024-05-16 15:53:28
360
1
原创 在Nuxt中使用复制粘贴功能
看了github还有很多平台,上面都需要下插件才可以使用复制或者粘贴功能,但是Nuxt中已经设置好了这些api可以直接调用即可。这个是将内容复制到剪贴板上,返回一个promise对象,可以使用.then和.catch在判断失败或者成功的回调,他也返回一个promise对象,同样使用.then和.catch。将剪贴板中的内容粘贴到页面上,用。
2024-05-16 13:47:02
403
1
原创 Xterm报错Self is not defined的解决方法
Xterm类似的插件都可以这样使用,然后代码就可以跑起来了！偶尔在一个网站上看到一位大佬，说修改一下源码就可以了。有人在vue3或者Nuxt3中使用Xterm报错。我在git或者别的平台找了很多也没有解决。
2024-05-13 20:56:20
385
原创 Pinia在Nuxt3中使用,不在setup()中使用,Pinia报错的解决方法
虽然可以解决报错,但是出来之后在ts中并不能使用在组件中传给store的数据。这时候看Nuxt或者别人的csdn是这样写的。pinia如果不在组件中使用会报错。这个问题困扰了我整整两天半！只需要在导出之内使用就可以了。最后的解决方法非常简单。
2024-05-11 14:38:20
572
原创 Vue3新特性defineModel在Nuxt3中的实现
父组件可以使用watch来监听子组件修改之后的值,可以做出相应的操作,不得不说defineModel真是太好用了！在nuxt.config.ts中配置。
2024-05-10 15:44:24
749
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人