wxiao_xiao_miao的博客

原创 如何阅读vue3源码

摘要：Vue3源码调试与阅读指南 调试Vue3源码的步骤包括：1)从GitHub下载core目录源码，使用pnpm安装依赖；2)新版(3.5.17+)无需开启sourcemap，旧版需修改package.json配置；3)用liveserver运行examples/composition下的demo进行调试。阅读建议关注核心逻辑，重点理解响应性、编译器和运行时三部分。源码位于packages/vue/dist目录，dev命令生成vue.global.js文件供调试使用。

原创 启动已有小程序项目

原创 text-decoration: underline；不生效

text-decoration: underline;不生效

原创 svg图片修改样式小技巧之currentColor

给你一个svg图片，当你使用时，修改颜色，发现不生效，你可以找到对应的svg图片，修改里面的fill、stroke等颜色为。具体改哪个属性，可以自己根据图标判断或尝试。

原创 electron踩坑之安装报错 Electron uninstall

删除 node_modules后运行pnpm store prune清除缓存后重新安装，仍然报错。在启动一个electron项目前，pnpm install了使用到的库，但在启动时，报错。忽略的包内的脚步预下载设置,需要修改npm或者yarn的设置。后，可以正常启动项目了。

原创 ...args剩余参数和 arguments对象的区别

...args (...rest) 剩余参数和 arguments对象的区别

原创 工作中遇到的问题总结

涉及到循环的时候，使用取余运算符 %

原创 多次git stash后，进行git stash pop，如何恢复历史暂存代码

应用某个存储,但不会把存储从存储列表中删除，默认使用第一个存储,即stash@{0}，如果要使用其他个，git stash apply stash@{$num} ， 比如第二个：git stash apply stash@{1} ，简写为 git stash apply 1。stash@{$num} ：丢弃stash@{$num}存储，从列表中删除这个存储。git stash pop只会恢复最新缓存的代码，并删除恢复代码的缓存记录。git stash list可以查询到所有暂存的未删除的历史记录。

原创 如何让input标签或者textarea标签宽高随内容自适应，且去掉 textarea右下角的样式

【代码】如何让input标签或者textarea标签宽高随内容自适应，且去掉 textarea右下角的样式。

原创 前后端联调时JS数据精度问题的解决

前后端联调时Number精度问题的解决方案

原创 重构项目 vue2 =＞ vue3 & nuxt2 =＞ nuxt3 遇到的问题

警告：Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with。.使用"markRaw"方法将组件对象标记为非响应式对象，或者使用"shallowRef"代替"ref"来创建一个浅响应式对象。语法，需要使用Vue提供的。

原创 报错Uncaught (in promise) Error: Manifest request to...

Uncaught (in promise) Error: Manifest request to...,解决方案：不要打开两个以上的开发者工具；更换nuxt的端口号

原创 path.join()及path.resolve()区别

path.join只是简单的将路径片段进行拼接，并规范化生成一个路径，而path.resolve则一定会生成一个绝对路径，相当于执行cd操作，与cd操作不同的是，这些路径可以是文件，并且可不必实际存在。

原创 vue3如何发送 websocket 请求

【代码】vue3如何发送 websocket 请求。

原创 js实现窗口的左右及上下拖拽

【代码】js实现窗口的左右及上下拖拽。

原创 qiankun 与vue-router4 不兼容导致路由显示 undefined 问题

在路由前置守卫中监听 to 及 from 的变化，发现 router.push 跳转路由时，会发现打印出 两次以上的 to、form 对象，只有第一次打印的from对象是正确的，而后两次都是由于 qiankun 与vue-router 不兼容引起的路由守卫重复执行的问题导致的，当重复执行三次以上时，用户点击浏览器左上角的回退按钮会出现路由显示undefined，导致页面404不展示。解决方法：使用 window.history.pushState() 代替 router.push() 方法。

原创 vue3+vite项目如何作为微应用接入qiankun主应用

【代码】vue3+vite项目如何作为微应用接入qiankun主应用。

原创 codemirror前端代码编辑器

使用起来比较方便。

原创 修改项目文件名大小写，git没有识别并更新

修改项目文件名大小写，git没有识别并更新，查看git配置

原创 登录验证码

如何纯前端实现登录验证码。

原创 如何实现给table表头加斜线

如何实现给table表头加斜线

原创 前端如何实现excel文件上传到服务器

前端如何实现excel文件上传到服务器？我的需求是：用户上传文件后，不自动上传到后台，需要另外点击上传按钮后再上传到后台。

原创 系统管理的按钮权限和菜单权限该如何做

如何用自定义指令和globalProperties全局变量控制系统管理的按钮权限

原创 XMLHttpRequest-原生Ajax写法

xhr 的 readyState 属性表示当前Ajax请求所处的状态，open()函数的第三个参数表示是否开启异步请求，false:同步；true：异步，数据交换格式：服务器端与客户端间进行数据传输与交换的格式

原创 form表单有大知识

表单的同步提交及缺点：缺点：1.页面会发生跳转；2.页面之前的状态和数据会丢失解决方案：表单只负责采集数据，使用Ajax将数据提交到服务器当前端无法解决跨域，又需要发送请求时，可以通过表单提交来解决

原创 富文本编辑器 quillEditor 的使用方法

装包 vue-quill-editor 和高亮插件 highlight.js。vue2项目需要注册，vue3项目不需要注册。

原创 如何统计前端项目有多少行代码

如果还有其他文件，可继续添加如 -or -name "*.json"，需要注意的是：注释也被统计在代码行数之内。需要文件名作为参数，因此需要将find命令找到的文件名，使用xargs作为参数传递给wc命令。xargs命令：将管道的标准输入转换为下个命令的参数。设置了find命令的搜索路径：将find的顶层目录设置为当前目录，即从当前目录开始搜索。-l参数：只显示行数。3. 回车后会显示当前项目的路径，可修改路径，选择你需要计算代码行数的目录。|：管道，大体作用就是把前面命令的输出，作为后面命令的输入。

原创 element组件踩坑记录

解决方法：在获取表格数据的时候，使用组件提供的 toggleRowSelection 方法，切换某一行的选中状态，进行多选框的回显，此方法也可实现切换分页时的回显，需要注意的是 使用 toggleRowSelection 方法 必须使用绑定table的原有数据，不可使用传入的参数，否则方法会无效。解决方法：可以给el-table绑定row-key属性，用来优化 Table 的渲染；解决方法：给 el-table 绑定 key 值，在需要更新时 this.num++，触发 el-table 的重新渲染。

原创 前端如何用mockjs插件模拟接口调用

当前端的静态页面铺设完成，而后端的接口还没有写好时，可以询问后端返回数据的格式，使用 mockjs 来模拟后端接口的调用。

原创 如何将canvas截图插入dom中以及如何将canvas转为文件对象并下载到本地

如何将canvas截图插入dom中以及如何将canvas转为文件对象并下载到本地

原创 如何制作组织结构echarts图，并结合formatter和rich制作好看的样式，同时解决echarts渲染报错和引入图片报错的问题

如何用echarts制作组织结构图，并结合formatter和rich制作好看的样式，同时解决echarts渲染报错和引入图片报错的问题

原创 this.$router.resolve新窗口打开vue页面

this.$router.resolve新窗口打开vue页面

原创 如何使用sortablejs拖拽库并封装成组件

var sortable = Sortable.create(el，{配置内容}）使用sortablejs拖拽库并封装成组件

原创 二次封装element-plus的表格组件，并实现表格合并

二次封装element-plus的表格组件，并实现表格合并

原创 如何封装微信小程序的 wx.request() 请求

先对wx.request()进行基本的请求封装，再继续封装post和get请求。

原创 at ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js

安装好 react 脚手架，第一次启动 react 项目发现页面不展示，且控制台报错 这是由于我们的谷歌浏览器安装了 react-devtools 扩展程序导致。根据这篇文章查到的解决方案：1. 禁用 react-devtools 扩展程序2. 更换浏览器3. 根据路径找到文件node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js，将下面这行代码注释掉，然后重启项目即可 但是我用第三种方法不管用，项目仍然报错

原创 vite.config.js或者vue.config.js配置

import { defineConfig } from "vite";import { resolve } from "path";import vue from "@vitejs/plugin-vue";import { createSvg } from "./src/icons/index";export default defineConfig({ // 添加svg插件 plugins: [vue(), createSvg("./src/icons/svg/")], /...

原创 vue3中如何按需引入vant组件库并进行rem适配

1.安装vant3组件库2.安装官方提高插件3.如果是基于 的项目，在 文件中配置插件：（基于其他项目，参加官网）4.在src文件夹下新建plugins文件夹，添加vant.js文件，注册你需要的组件5.在main.js中引入6.使用...............

原创 前端如何下载excel表格

下载excel1.1下载表单，需要自己配置，引用别人封装好的ts文件import { downloadXlsxFile } from "./downloadFile"; //引入自定义xlxs tsconst form = reactive({val:{}form.val=res.data.trsCircuit; const labelAll = { aaddress:'A端装机地址', abuzPort: "A端业务设备端口",

原创 svg组件封装

npm install svg-sprite-loader -Svue2src/components/SvgIcon/index.vue<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg></template><script>expo.