lyd的博客

项目使用进行的初始化创建请输入项目名称：vue-i18n请选择要包含的功能：TypeScript、JSX 支持、Router（单页面应用开发）、Pinia（状态管理）、ESLint（错误预防）、Prettier（代码格式化）是否引入 Oxlint 以加快检测？（试验阶段）No创建完项目之后，做了自动加载，axios请求封装，路由处理登录验证，pinia处理登录逻辑以及持久化，修改首页、关于页、新增登录页，封装登录接口，sass支持，mockjs配置。尽量丰富项目功能，精简项目内容。

最近在开发vue3项目时用到了AntV的G6开发树状图，在开发过程中遇到了一些问题，在这里分享一下。

表格列表页面，页面中有新增和修改操作，新增和修改共用一个弹窗，弹窗中表单绑定的数据修改无效。复现步骤是先点击表格中的修改，然后点击新增，此时弹窗中表单数据没有置空（有赋值为空的操作）。因为通常情况下，修改的时候都是通过请求详情接口进行表单数据初始化的，所以这个方法就是为了延缓（异步）修改时数据赋值时间。导致的，那么直接注释掉这里，再次尝试看看，可以看到现在不会出现之前问题了，但是出现了新问题，表单校验状态没重置（添加代码。遇到不明白原因的问题，可以采取很多种方法，之前的博文分析中有使用过，但是没仔细说过。

发现数据已经更新到接口返回的了，怎么页面没反应呢？，出现的结果是只有请求方法有效，加载状态无效，接口返回了数据，页面却不显示数据。是Proxy包裹的空数组，这应该是响应的数据，不像解构赋值出现的响应丢失啊。此时可以看到state里面是有接口返回的数据的，这样应该就说明不能使用。发现这里打印是有数据的，那在hooks方法里面返回前打印看看。这可能是英文文字太长导致的，这需要加上强制换行的。，写出来的代码让自己一时找不出来问题，唉。获取之后返回使用，这时候的数据是接口响应前的。但是这是为什么，还是有问题啊？

Vue2+Vuex+Router+Eslint+Prettier

VSCode打开TS+Vue3项目很多地方报错Reached heap limit Allocation failed - avascript heap out of memoryvue动态生成路由的项目，webpack怎么知道需要打包那些文件

puppeteer生成pdf遇到表格出现留白，可能出现在表格体头和底出现空白，空白高度不固定，表格中的数据也存在丢失

vue3的jsx语法，vue3动态路由，dataOptions.call is not a function，pnpm本地调试组件库，outside of Vite serving allow list

1. 表单项必填校验，内容为空时没问题，填写内容后不实时移除必填提示信息2. 新增的动态表单项，不能实时校验，执行form.validate会进行校验

简介多页应用初级实现方案，技术栈包括elementUI、vue、vuex、axios。。。解决问题项目布局共用问题使用iframe嵌套子页面的方式，只会更新页面部分区域跳转子页面只更新部分区域使用iframe嵌套子页面的方式子页面提示不置顶受到iframe限制，封装方法采用调用主页面vue实例提示子页面控制跳转到主页面路由采用调用主页面vue实例跳转（主页面实例挂载在window上）直接进入子页面自动跳转主页面中对应路由封装方法判断是否被嵌入iframe，

环境：element-ui@2.13.2vue@2.6.6示例：1. 表格单选方案1<template><div class="radio_page"> <div class="selected_num">已选 {{selectedRow.name}}</div> <el-table :data="list" ref="table" :border="true" v-loading="

环境：vue@2.6.6问题：绑定函数传参传参多个多样参数动态变化方案：1. 采用传对象方式(binding.value)<el-button v-mydirective="{ fn: myFn, args: x }" type="text" size="small">测试</el-button>const mydirective = { inserted: function (el, binding) { const args = bindin

问题：ant-design-vue不兼容ie浏览器要求：ie兼容 >= 9环境：@vue/cli@4.5.4，ant-design-vue@1.6.4之前写了一篇博文解决ant-design-vue的兼容，由于@vue/cli搭建项目升级导致不能生效，为了解决这个遗憾，本片博文诞生第一步：安装依赖npm install --save-dev @babel/plugin-transform-runtimenpm install --save @babel/runtimenpm inst

环境：element-ui：2.13.2vue：2.6.6问题：新增，删除操作，表格不同步更新。表格数据懒加载，表格带有新增、新增子节点、编辑、删除、批量删除操作解析：表格每一行数据都有id和pid，pid用来标记当前行的父节点，hasChildren标识是否有子节点，children存放子节点的数组。更新节点的关键代码是this.$set(this.$refs.table.store.states.lazyTreeNodeMap, pid, nodes);，这一段代码很多文章可以搜索到，但是没

环境：vue cli3项目问题：路由的参数没有，导致页面报错，实际是路由跳转两次，第一次有参数，第二次没有分析：既然跳转了两次首先应该想发起路由跳转的事件里面是否出现重复的this.$router.push，查看一番并没有，于是想到全局的路由守卫中或许出现重复跳转，结果发现还是没有，结果只能打断点调试查看，发现路由跳转的事件没有执行两次，但是路由守卫执行了两次，这说明肯定有地方多调用...

环境vue cli4项目stylus (如果使用sass、less，可以类比)步骤创建stylus的变量文件variable.styl$mainBg = rgba(0, 21, 42, 1);$mainWidth = 210px;// 导出变量用于js:export { mainBg: $mainBg; mainWidth: $mainWidth;}j...

此处主要讨论的是大于等于3种环境的打包配置，如果只有两种的话NODE_ENV 会是development、production ，这样的一般比较简单，下面将多种环境的配置，两种的可以参考类比。首先配置package.json{ ... "scripts": { // 开发 "dev": "vue-cli-service serve", // ...

环境：element-ui2.13.0，vue 2.6.10，vueCli3.0初始化问题：form表单内部的表单控件双向绑定失效，表单控件不会显示选中项。如果单选，data内部会同步更新，但是表单控件不会显示已选项；多选时，data内部同步值很慢，只有最后选择的一项。此时当其他不关联表单控件变化时，有问题的表单控件可能会显示选中项，多选甚至会显示选中的多个，很诡异。<templat...

问题：使用elementUI的Table组件，表格嵌套扩展行，不采用elementUI默认的箭头操作显示扩展行，使用自定义操作按钮，表格带有边框解决：由于不想显示出来扩展列，所以给扩展列组件el-table-column设置了样式display:none，但是实际上并没有解决问题。使用v-show和设置display:none并没有区别，使用v-if真的解决了，但是扩展行木有了，文档中也没有...

环境：vue cli 3.0初始化带有eslint项目触发位置：<img class="avatar" :src="photoUrl" alt="avatar" />解决：报错内容是：不允许对HTML void元素进行自动关闭方法一：<img class="avatar" :src="photoUrl" alt="avatar">方法二：修改文件.es...

报错：[Vue warn]: Error in nextTick: "TypeError: Converting circular structure to JSON --> starting at object with constructor 'Vue' | property '$options' -> object with constructor 'O...

Type of the default value for ‘propsTree’ prop must be a function今天在运行项目时候发现有报错信息，心里很难受，怎么可以有红。环境：vue cli 3.0初始化带有eslint项目触发位置：组件的props内部思考：之前没怎么用eslint，也很少用到设置默认值，因此没有发现这样的问题。...props: { tr...

由于elementUI没有树形选择组件，但是项目又需要，因此粗实现单选择的树形选择组件。组件组成elementUI的InputelementUI的SelectelementUI的TreeAttributesv-model 双向绑定的 绑定值treeData 树形数据，参考结构[{ isLeaf: false, label: '粗树干1',...

做一个多页面项目，一般会加一个404页面。问题router中设置匹配404规则，但是没有生效new Router({ mode: 'history', routes: [{ path: '/', name: 'layout', component: Layout, redirect: '/home', children: [{ path: '/home', ...

问题elementui改为按需引入后出现报错，报错信息Uncaught ReferenceError: _MessageBox is not defined操作npm i -D babel-plugin-componentbabel.config.jsmodule.exports = { presets: [ '@vue/app' ], plugins: [...

问题：点击分页组件切换页码，切换之前显示消息提示框，根据消息提示框的操作来确定是否切换页码。但是Pagination组件没有页码切换前的回调，只有切换后的回调。分析：分页组件的current-page可以通过.sync修饰符实现双向绑定当前页码，分页组件的current-change可以配置页码变化后回调，此时分页组件的页码current-page已经改变了，并且呈现在UI上。根据提示框的操...

问题：控制台报错Duplicate named routes，一开始登录，切换用户时都会出现环境：vue: 2.6.6 element-ui: 2.10.1 动态权限控制路由分析：报错的意思是路由重复定义。查看静态路由并没有出现重复，打断点发现，动态添加路由执行了多次，增加变量控制只添加一次动态路由。解决登录报错，没有解决切换用户报错。切换用户时router对象并没有清空上次动态添加的...

问题：表格设置固定高度，表格内容超过高度，表格出现滚动，但是表格滚动部分高度偏小（比表格高度减去表格头小）。表格左侧第一列固定左侧，横向出现滚动，表格横向出现错位。不固定出现，频率有时高、有时低。环境：vue: 2.6.6 element-ui: 2.10.1 请求接口动态渲染表格头和表格内容分析：一开始会想是项目中样式冲突导致错乱，页面切换加审查一番元素之后会发现并不是。标签带有c...

最近写了一个前端工具方法项目，主要为了备用和分享交流学习。下面是项目中包含的封装方法。前端工具方法数字相关–number保留指定小数位数–toFixed数字千分位加逗号–thousandCents生成指定范围随机数–random验证相关–verification判断是否为手机号–isPhoneNum判断是否为邮箱地址–isEmail判断是否为身份证号–isCardID...

做一个多页面项目，一般会加一个404页面。问题router中设置匹配404规则，但是没有生效new Router({ mode: 'history', routes: [{ path: '/', name: 'layout', component: Layout, redirect: '/home', children: [{ path: '/home', ...

1.项目运行npm run dev // 可以实现热更新npm run build:wx // 不会热更新，更改需要再次执行新增加页面，需要重新运行npm run dev坑点：重新运行npm run dev，仍然无法看到新页面，此时需要先运行npm run build:wx，然后再试项目文件大时需要分包，分包配置和原生开发小程序一样，npm run dev运行项目，第一次真机测...

Ant Design of Vue表格点击行展开与操作单元格冲突问题：使用Ant Design of Vue的Table组件，实现表格嵌套表格，并且点击父表格行展开子表格，由于父表格中有操作单元格，点击编辑或者删除时候，子表格也会切换显示。原因:事件冒泡，点击编辑或者删除时候，点击事件冒泡到父表格行，触发了父表格行的点击事件，才会出现上面的问题。<template> &l...

ant-design-vue的兼容问题问题：ant-design-vue不兼容ie浏览器要求：ie兼容 >= 9环境：vue cli3搭建项目，ant-design-vue@1.3.8babel.config.js文件module.exports = { presets: [ '@vue/app', // 兼容配置 [ '@babel/pre...

element UI 自定义传参的解决方法<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"</el-autocomplete>这里的hanleSelect默认绑定的参数是选中的那...