日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

代码

省略了一些代码，但应该都看得懂吧~就是两条线添加 mousedown 事件，记得 mousemove 要挂载到 document 上！鼠标移动上去可以拖拽容器宽度和高度。

【代码】解决 Nuxt3 控制台一直报错：nuxt Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0...

报错原因的网络不通，需要你添加本地 hostping 下可以使用的地址然后在修改 host记得刷新下 host然后再重新执行安装命令就行成功安装！😀。

它主要用于配置 JavaScript 或 TypeScript 项目的根目录和其他一些选项，以帮助编辑器（如 VS Code）更好地理解项目的结构和提供智能提示。之后在项目里面就可以使用 ctrl + 鼠标左键跳转 .vue 文件了。然后需要我们在项目根目录下添加。需要我们安装下面这个插件。

Vue Router mode，为 history 无效，建议使用默认值 hash；

在Vue 3中通过自定义指令实现数字的动态增加动画，可以利用Vue的自定义指令功能，这允许你扩展Vue的内置指令，使得DOM操作更加灵活和强大。以下是如何创建一个自定义指令来实现数字动态增加动画的步骤：

要监听div宽度的变化，可以使用接口。允许你观察一个或多个元素的尺寸变化，并在发生变化时执行回调函数。这种方法比使用更专注于尺寸变化，且不受元素属性变化的影响。

删除默认安装教程下的。

因此，当你在 Vue 3 项目中安装 Tailwind CSS 并配置 postcss.config.js 时，你实际上是在设置一个 CSS 处理流程，该流程利用 PostCSS 和相关插件来转换和优化你的 CSS 代码，使得 Tailwind CSS 能够正常工作，从而提供高效且易于维护的前端样式解决方案。在 postcss.config.js 中，你指定了哪些插件应该被 PostCSS 使用，以及它们的顺序，比如你上面的两个配置。这将在项目根目录下创建一个 tailwind.config.js 文件。

【代码】【Vue】vue2 vue-awesome-swiper 刷新无法自动滚动解决。

【代码】【Vue】vue3中使用swipe竖直方向上滚动。

确保在setup函数内部使用useRouter和useRoute。如果需要在自定义 Hooks 中使用路由，可以考虑传递全局路由实例作为参数。直接使用全局路由实例是一种可行的解决方案，但应谨慎使用，以避免违反 Composition API 的最佳实践。这种方法允许你在自定义 Hooks 中使用路由功能，同时遵循 Vue 3 Composition API 的设计原则。

是你使用的 md 编辑器的预览容器id。

可以通过该方法读取图片的二进制数据，但是是以纯文本的方式。导入纯文本文件，需要在导入路径后添加。

/设置excel网络地址，可以是相对地址。//引入VueOfficeExcel组件。//引入VueOfficeDocx组件。//设置ppt网络地址，可以是相对地址。具体方法你怎么写都能，只要你能获取到。//设置文档网络地址，可以是相对地址。

代码如下，记得加判断。

【代码】【Nuxt】Nuxt3 中监听 document 滚动报错 document is not defined。

然后在代码中使用，使用组件传参就行，改颜色需要用到深度选择器，vue3 就是。自己去看官网文档就行。

【代码】【Vue】Vue3 pc 端配置 rem 响应式。

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。我最后采用的是叫 UI 换 GIF 了😁。只有麻烦下 UI 了哈哈哈哈。

文件夹下创建一个 store.ts 文件，这样使用的时候就不需要再导入了。在 plugins 文件夹中添加插件。

使用 Recorder插件可以在网页中进行录音。生成 blob 文件并可以自定义上传，同时，录音过程中会显示可视化波形，同时能够做到兼容PC端、Android、和iOS，十分好用！

【代码】Vue3 配置全局 scss 变量。

【代码】【Vue】Vue3 超简单拖拽条动态修改容器宽度。

nuxt3 不再支持 require 动态导入资源，因此需要我们将图片放到public目录下，这样我们就可以动态导入了。

rem 单位是 CSS3 新增的一个相对长度单位，它的出现是为了解决 em 的缺点，em 可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem 则是相对于根元素的字体大小，因此，当根元素字体大小改变时，rem 单位的大小不会改变。然而，它的侧重点与后者略有不同，主要用来将 CSS 中的 px 单位转换为视口单位 (vw, vh, vmin, vmax)，从而实现基于视口大小的响应式布局。，会导致部分组件依赖继承于根元素上的字体大小的样式发生变化，需要你再单独设置为 16px！

上午把官网的合作伙伴做了，好坑，swiper 自动滚动展示的数量的两倍必须小于等于组件的渲染数量，才能进行自动滚动，官网居然都没有说。

和 uuid （uuid 函数随便写个就行）

非常坑的一个问题，如果你组件没有传值，就会导致使用这个组件的页面报这个警告，真的太难发现了，找了好久！

样式请根据你项目实际来，只展示基础配置。

类似写 vue3 项目，可以导入组件，也可以直接使用组件。

【代码】【Vue】vue2 封装 echarts 基础组件，直接 option。

官方文档从介绍我们可以看到，支持的格式特别多，因此我也很推荐用这个来做 rtsp 的方案。

你需要创建一个函数，用于处理你上面准备的数据，并且返回一个 xlsx 文件的 blob。// 创建一个空的工作簿 const workbook = XLSX . utils . book_new();// 创建一个工作表 const worksheet = XLSX . utils . aoa_to_sheet(data);// 将工作表添加到工作簿中 XLSX . utils . book_append_sheet(workbook , worksheet , 'Sheet1');

导入的包没提供默认的到出方法，改成全部导入再 as 改名即可。

该软件包提供了遍历文件系统的方法，并根据Unix Bash shell使用的规则返回与一组定义的指定模式匹配的路径名，并进行了一些简化，同时以任意顺序返回结果。vite-plugin-svg-icons 用于生成 svg 雪碧图。1.预加载 在项目运行时就生成所有图标,只需操作一次 dom。// 图标的前缀 ==> 非必传（默认为"icon"）2.高性能 内置缓存,仅当文件被修改时才会重新生成。// 图标的名称（Svg 文件名） ==> 必传。// 图标的样式 ==> 非必传。

主要为了只在环境配置里面改代理地址就行，少修改import { defineConfig, loadEnv } from "vite"; . . . const env = loadEnv(viteConfig.mode, process.cwd()); . . . server: { host: config.HOST, port: config...

vue3 例子 App.vuetemplate<div class="screen-wrapper"> <div class="screen" id="screen"> <router-view /> </div> </div>scriptimport { onMounted } from "vu...

为什么需要持久化？刷新浏览器后，重新加载页面时会重新初始化 vue、 pinia，而 pinia 中状态的值仅在内存中存在，而刷新导致浏览器存储中的数据就没了。在实际开发中，浏览器刷新时，有些数据希望是保存下来的。如用户登录后，用户信息会存储在全局状态中，如果不持久化状态，那么每次刷新用户都需要重新登录了。要解决这个问题非常简单，在状态改变时将其同步到浏览器的存储中，如 cookie、lo...