- 博客(75)
- 收藏
- 关注
RSS订阅原创 getActivePinia was called with no active Pinia
如果你是从vuex转向使用pinia，那么你可能遇到这个问题getActivePinia was called with no active Pinia. Did you forget to install pinia?。明明已经安装了pinia，为什么会有这个提示呢？原因是你可能在setup的组件之外使用了useStore根本原因是组合式api需要在setup中执行，把useAuthStore()拿到带有setup的组件中使用就好了。
2024-08-17 21:43:44
247
原创 nginx在同一域名下部署多个vue项目
本文介绍使用nginx服务器在下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。
2024-08-11 23:15:31
687
原创 滴滴出行高级Node.js开发工程师笔试题2024
今天参加了一个滴滴出行的Node.js岗位面试，一面为腾讯视频面试，俩个面试官。面试官比较深入问一些你过去做个的项目，问你解决了哪些棘手的问题。还有就是他们比较关注性能优化，会问你们现在项目的峰值QPS是多少，如何进行优化等等最后会在聊天窗口发你两道笔试题，让你在自己本地IDE编写代码调试，但是要开启屏幕共享，方便让他们欣赏你编码的过程。下面贴一下原题。
2024-03-26 22:14:14
536
原创 Vue3+Element Plus+TS开发企业管理后台(一)
系列文章，讲述一个企业管理后台的前后端设计，持续集成常见的页面功能和服务端设计思路。
2024-03-25 13:45:15
907
原创 2024华为OD机考面试经验分享
华为OD因为还是外包性质，相对正编来说要轻松一些。（前提是你不想去卷A绩效），一般情况可以八九点就溜下班。然后工作环境的话，和正编一样。很多小伙伴其实都是从大城市想回老家，所以才选的华为OD吧，东莞/西安/成都 这几个地方超级卷。
2024-03-12 17:54:44
3449
原创 一篇搞定前端面试的性能优化
可以使用各种工具进行性能分析，如Chrome DevTools的Performance面板、Lighthouse、WebPageTest等，它们可以帮助我们检测页面加载时间、DOMContentLoaded事件触发时间、Time to Interactive(TTI)等关键性能指标，并给出针对性的优化建议。指的是页面的主要内容和界面已经足够稳定，用户可以开始与页面进行交互的时间点，这是一个综合性的性能指标，反映了页面的初步加载和执行JavaScript后达到稳定状态所需的时间。
2024-03-12 16:29:13
1001
原创 一篇搞定面试中的跨域问题
CORS（Cross-Origin Resource Sharing）是一种机制，允许网页从不同的域访问服务器上的资源。在同源策略下，浏览器限制了跨域访问，CORS允许服务器指定哪些源可以访问其资源。
2024-02-16 11:21:55
740
原创 当你在浏览器中输入网址后发生了什么？
这是一个高频的前端面试题，这个问题可以考察面试者对互联网基本原理的了解，包括域名解析、HTTP请求、服务器响应等方面的知识。
2024-02-15 21:16:21
438
原创 onMounted is called when there is no active component instance to be associated with 已解决
这个是因为在这个组合式onMounted之前调用了store.dispatch(‘initMenus’) 内部包含async/await。
2023-05-19 10:42:07
14475
原创 【彻底搞懂】vite proxy如何解决跨域问题
这样前端就是从相同的host 并且相同的port发起的请求，代理通过前缀"/api"匹配的你要转发的请求，转发到’http://localhost:3000’真正的后端服务，并且把多余的前缀给你替换掉。关于这个问题，网络上充斥着大量的错误方法，一不小心就会被误导。关键的点来了，你的前端发起请求的baseUrl应该是 http://localhost:5173/api。场景描述：本地起了两个服务。
2023-05-11 10:12:01
2379
2
原创 vue项目部署后提示用户有新版本
你可能在浏览器见到过上面这种UI，这是在vue项目重新build在服务端部署后，浏览器刷新页面弹出的提示，这时如果用户点击更新就会重载页面，清除之前的缓存获取最新内容。这是怎样发生的呢？通过观察截图左下角的红框，可以看出这个网站采用方式是 注册了。当刷新页面后之前注册的 service worker 的 updated(){} 生命周期中监听到有新的内容可供更新，触发更新弹框，提示用户更新。这种方式只需前端处理，不需要服务端做任何工作。
2023-05-09 11:26:26
3192
原创 vue项目引入pwa使网页应用可安装
最近在使用vue项目时看到一个这样的效果，如图：现在其实有很多网站都支持把网页安装到电脑或手机（IOS Safari支持较好），如下图安装后的效果：这些都是网页应用。接下来介绍一下如何让你的vue2项目变得可以安装。
2023-05-09 11:00:01
1530
原创 css变量实现动态改变主题色
最近思考了一下如何实现网站主题颜色切换，解决方案就是使用css变量。如今网站开发过程中css变量被使用到的频率越来越高，而且 Element plus 也是用 css 变量来重构了几乎所有组件的样式系统。CSS 变量是一个非常有用的功能，几乎所有浏览器都支持。这篇文章就来说一下css变量的使用方式。
2023-04-25 09:15:08
1034
原创 Property ‘context‘ does not exist on type ‘NodeRequire‘.ts(2339)
在项目根目录找到tsconfig.vitest.json，在"types": [“node”, “jsdom”]中加入"webpack-env"但是发现，开始的报错并没有消失。
2023-04-13 14:05:20
1497
原创 Element Plus按需引入图标
自从使用了vue3就需要升级element ui到plus了。而相应的图标库也需要单独引入，这篇文章来记录一下和的方法。
2023-04-06 15:31:06
1945
原创 The client-side rendered virtual DOM tree is not matching server-rendered content（已解决）
Vue从服务端接管静态的HTML文件并且把它转换为响应式数据的过程。
2023-04-03 18:30:04
876
原创 nuxt3使用markdown-it
使用markdown语法记录博客是一个高效的方式，前端加载时需要解析markdown字符串。在nuxt3框架中vue3解析markdown语法可以直接使用markdown-it来解析。之前在vue2中使用过vue-markdown这样的依赖，但是vue升级后就无法使用了，而markdown-it不受vue版本影响。搭配上highlight.js，很轻松就实现代码块高亮了。
2023-04-03 15:50:36
1707
原创 Nuxt使用@element-plus/icons-vue
Element Plus 的图标使用和Element UI的略有区别，需要单独引入。
2023-04-03 15:10:27
2556
1
原创 监听div滚动高度
前端开发经常会遇到监听滚动事件的情况，检测到页面滚动距离做一些操作。有时候也会监听一些容器的滚动如：div，与前者有一些差别，本文会先后介绍这两种情况如何实现。
2023-03-24 16:18:05
1967
原创 JavaScript获取img的原始尺寸
在前端开发中我们几乎不需要获取img的原始尺寸，因为只要你不刻意设置图片的宽高它都会按照最佳比例渲染。但是在微信小程序开发时，它的image标签有一个默认高度，这样你的图片很可能出现被压缩变形的情况，所以就需要获取到图片的原始尺寸对image的宽高设置。
2023-03-24 10:40:28
995
原创 小程序启动页动画实现
微信小程序刚被加载时是有自己默认动画的，但是这个千篇一律。我们其实可以做个性化的加载，带来一点不一样的感觉。在小程序首页，onLoad方法中添加代码，页面加载时触发。这样就赋予了小程序一些游戏的感觉，你学废了吗😄。
2023-02-21 17:13:06
5927
5
原创 微信小程序分类及开发成本
首先要搞清楚自己小程序的分类，如：电商、家政、社区团购、租车、餐饮、知识付费等等…主体类型为个人的小程序账号，不能接入微信支付，也会在获取用户信息时收到限制（比如：获取手机号，头像、昵称等信息作为登录信息使用）。如果你看到这些感到头疼，完全可以把这些事情交给第三方去做，到时候只管交钱就好了，不过他们价格可能也比较贵。，只要把它集成到自己的小程序，就可以完成整个电商流程的业务逻辑了，大大节约了开发者的开发成本。同时你想学习更多的小程序知识，了解最新的小程序开放的能力，可以到。
2023-02-20 09:59:55
408
原创 开发小程序需要什么技术？
小程序是一种新的开发能力，相比于原生APP 开发周期短，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
2023-02-17 17:54:07
5470
原创 Assertion failed: (thread_id_key != 0x7777)
使用npm run build时报了这个错误：Assertion failed: (thread_id_key!= 0x7777), function find_thread_id_key, file …上面的错误出现原因是因为node-fibers在 nodejs >=16.x 的版本已经被弃用了。我编译的是一个nuxt.js的项目，这个项目有个依赖 “fibers”: “^5.0.0”,查看本地node版本 node/16.16.0 果然是这个问题。
2022-11-08 13:38:52
2470
原创 react项目热更新自动插入了iframe
最近使用create-react-app创建了前端项目，热更新触发后，查看DOM元素发现在整个页面插入了一个iframe，层级很高，会影响查看其他元素。这样重新启动项目，热更新后发现就不会再出现那个烦人的iframe了。
2022-09-25 23:12:31
1309
1
原创 使用OpenSSL生成自签名证书
OpenSSL 用于传输层安全(TLS)协议的开源工具包，以前称为安全套接字层(Secure Sockets Layer)协议。
2022-09-15 15:11:42
364
原创 浏览器媒体设备接口介绍
开发直播类的网页应用时，往往需要在开播前检测摄像头和麦克风是否正常，本文介绍一下浏览器如何获取到可用的摄像头和麦克风设备列表。
2022-09-13 22:09:18
847
1
原创 CSS Grid Layout(网格布局)
网格布局是二维的布局系统，和过去常用的布局方式相比完全改变了我们设计UI的方式。Grid Container(网格容器)，Grid Item(网格容器子元素)。Grid Line(网格线)，Grid Cell(网格单元格)。Grid Track(网格轨道)，Grid Area(被网格线分开的区域)。图例参考定义一个网格布局的容器设置网格行、列通过上面的方式就声明了一个 3行5列 的网格容器。结果图：可以看出对应的item已经被放在网格指定的位置。想象一下如果没有网格布局，你将会怎样实现这个布局
2022-09-12 13:45:34
504
原创 网站SEO效果分析
关注了 SEO 的关键点并应用于我们的网站，后期搭配SEO效果分析工具，可以为我们带来可观的流量。在付费流量性价比 逐步下降的今天，依靠SEO获取更多的 自然流量 应该受到每个企业的关注。
2022-09-09 15:53:10
599
原创 使用Promise.race()实现控制并发
知道Promise.race()的人很多，这样的面试题也很多，但是能运用到实践中解决实际的问题却不是很多。希望本文可以帮到你。文章首发于IICOOM-技术博客 《使用Promise.race()实现控制并发》
2022-09-06 16:49:14
859
原创 JavaScript阻塞与非阻塞
JavaScript 的代码是运行在单线程上的，也就是说同一时刻只能有一个操作被执行。这样的好处是不用考虑并发问题，只需关注写得代码不要阻塞线程。通常情况，大多数浏览器当你打开一个tab就会开启一个Event Loop，而且每个网页之间是隔绝的，可以避免出现阻塞线程时导致整个浏览器卡死。如果你对之前提到的异步、同步还有印象，那么我们可以这样认为：阻塞的方法是以同步执行（synchronously），非阻塞方法以异步形式执行（asynchronously）。
2022-09-06 15:31:38
1006
原创 CSS设置高斯模糊效果
高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果，通常用它来减少图像噪声以及降低细节层次。这种模糊技术生成的图像，其视觉效果就像是经过一个毛玻璃在观察图像。
2022-09-04 10:15:05
596
原创 Google Fonts 谷歌字体的使用
优势：英文字体齐全，所有 Google Fonts 字体都是开源且免费。这样你的页面上使用了这些字体的文字就会变得优雅起来。文章到此就结束了，希望可以帮到你。
2022-08-31 14:14:08
4357
原创 RangeError: Array buffer allocation failed
通过一个 RangeError: Array buffer allocation failed 的错误，认识到了内存合理使用的重要性。解决了这个问题，我们的大文件分片上传功能运行更加稳定。如果你有更高明的方法，欢迎到评论区讨论。文章首发于IICOOM-个人博客 《RangeError: Array buffer allocation failed》...
2022-08-30 09:28:36
9644
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人