二三的博客

当我们在首次使用yarn dev命令启动vite时，或者切换分支，依赖项发生变化时会发现项目启动时相当的慢，大概要十几分钟，而且控制台终端打印了如下信息：遇到这种情况时，真的是相当恶心，有时候项目启动完成要花费半小时的时间，着实是浪费时间。知道了问题出在哪里，就能对症下药，问题也会很快妥善解决。

vue-cli、create-react-app等常用工具安装、更新、查看版本等操作命令汇总

对于常规数组来说，我们想要获取某一个值，或者给每层添加属性，只需要使用fileter、map等等的方法，相对来说比较简单。树形数据不同于常规的数组数据，不能确定其内部包含多少个子节点，即children。所以我们在操作树形数据的时候，不同于常规数据。其实操作树形数据也很简单，其核心就是递归。

项目开发中需求方提了这样一个需求：下拉框数据是树形结构，但父节点禁止点选，只能点击子节点。毫无疑问，选用的是组件库的treeSelect组件。但该组件默认每一级节点都可以进行选择，不符合需求。于是开始看API，发现treeDatadisabled，可以控制节点是否禁用。属性即可。

Vue3作为目前比较火的一个框架，无论是在项目开发中还是在面试中，用到的都挺多。本篇文章就介绍下 Vue3 的一些基础难点以及与Vue2的一些区别。

父子组件通信是Vue中必不可少的一部分，在面试的时候也会问到，本篇文章中列举了7种组件间的通信方式，也算是一个总结。

在日常开发中，我们双向绑定的form表单，经常会遇到对数字类型的绑定，但对于v-model 绑定的值，输入数字会自动转成字符串类型。对于input输入框绑定的值，想要修改为数字类型很简单，只需要使用表单的修饰符就可以。如下所示number 可以将绑定的 v-model 改为 number 类型<input v-model.number="age" type="number">但对于 select 选择框或者 radio 单选框来说，则没有那么友好了。select option.

具体代码如下所示：场景：<div @click='toDetail'>查看详情</div>路由传参不能直接传一个对象，需要使用JSON.stringify()方法将其转换成一个字符串，然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象const router = useRouter()const toDetail = () => { // 我使用的是Vue3，router要从useRouter获取 router.push({ na.

webfunny埋点1. 新建点位字段2. 新建点位（进入点位仓库）3. 新建项目4. 创建SDK发布1. 新建发布任务2. 下载执行脚本5. 在项目内引入执行SDK1. 方式一：直接在head中添加下载的SDK文件代码2. 方式二： 把下载的js文件作为资源文件引入。6. 数据上报7. 在埋点系统里面配置信息1. 添加分組2. 新增卡片上一篇文章写到了webfunny探针的安装与使用，从而达到对前端项目的监控。本篇文章讲webfunny埋点的使用。想了解webfunny探针安装的请参考我的上一篇文章。

webfunny探针安装部署过程1. 创建项目2. 安装、部署探针1. 复制探针代码，将探针代码插入到head标签的最顶部2. 在前端代码执行下方代码，注入用户标识信息，越早执行越好3. 切记3. 使用1. 创建项目1、首先需要创建一个应用如果没有团队，则需要提前创建一个团队。项目创建完成后如下图所示：2. 安装、部署探针推荐使用部署方式，需要将探针放在页面的最上方，这样监控的最全面1. 复制探针代码，将探针代码插入到head标签的最顶部具体代码如下图所示：2. 在前端代码执行下

文章目录1. 作用2. Props3. 生命周期函数1. activated 2. deactivated4. 缓存所有页面5. 根据条件缓存页面3. 结合Router，缓存部分页面在项目中，当组件中使用了 keep-alive， 切换页面就不会重新渲染，这样有一定的优越性，但有时候也存在一定的困扰。如果组件使用了 keep-alive，那么一定要记住 activated 这个生命周期函数钩子，它相当于原有的created生命周期，可以在里面进行数据的获取。下面是对keep-alive做一个详细的阐述

在开发的功能交付测试的时候，测试提出来文本框不能输入表情的bug（这也算一个bug?哪位大神会进行这样的反人类操作啊），说归说，既然提出来了，那咱还得改不是，具体代码如下所示：首先声明一个输入框：<a-form-item label="" name="searchValue"> <a-input v-model:value.trim="formState.searchValue" autocomplete="off" placeholder="请输入姓名或工号" @ch

在项目开发中遇到需要使用webSocket监听日志，在页面上进行展示。但之前并没有开发过这方面的功能，所以在网上找了好多资料，最后成功运行，在此写个随笔记录下。代码如下所示：methods: { // 打开对话框初始化webSocket handleOpen() { this.box = true; this.initWebSocket(); }, // 关闭对话框时关闭webSocket closeDialog() { this.w

效果图如下所示：直接上代码：html部分：<a-table :rowKey="record => record['id']" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="dataSo

vue项目导入导出功能1.导出2.导入1.导出导出功能其实很简单，只需要调用后端的接口即可，不过有一些需要注意的地方，具体代码如下所示：这是导出按钮，定义导出的点击事件：<a-button type="primary" @click="downExcel"> <template #icon> <UploadOutlined /> </template> 导出 </a-button

在项目开发中，我们需要对表格数据的某一列或者几列的数据换成突出的颜色。如果是使用ant或者element组件库开发，这是个特别容易实现的功能，但对于avue-crud来说，因为它是对element的二次封装，一系列的属性配置特别多，所以找到合适的属性方法相对ant或者element来说还是有些难度的。下面是我对这种问题的两种解决方法，写个随笔记录下。方法一：使用 cell-class-name属性配置思路：avue-crud 的cell-class-name 属性是单元格的回调方法（也可以使用字符串为

vue父组件调用子组件方法报错在父组件定义了一个tab标签页，每一个标签页下面都调用不同的组件，如下图所示：子组件中定义的方法：setup() { const getList = () =>{ const date = moment(new Date()).format('YYYY-MM') loading.value = true apiGetPageList({ salaryDate: date, page: s

resetFields方法重置失效的问题在ant design vue的form组件中，点击重置按钮，调用resetFields()方法，会将表单里的内容清空。但有时候我调用了resetFields()方法，表单内容却没有清空。仔细看了下代码，发现是因为我没有在表单中加上name属性，才导致resetFields()找不到绑定的数据。在此写个随笔记录下这个小问题。代码如下图所示：谨记：在 a-form-item 标签中，一定要加上name属性！...

在页面中，点击设置按钮在右边出现一个抽屉，在里面控制表头的动态显示与隐藏。当前端使用sortable属性给数据排序后，动态显示或隐藏的表头，会造成数据回到默认状态，不再根据设置的状态排序。具体如下图所示：为了解决这个问题，我用了很多方法，包括对sort-change、sort-method以及default-sort属性的各种定义使用，但结果都不尽人意。因为当选择显示表头后，要关闭右边弹框，在关闭右边弹框定义的方法里面使用上面三个方法都没有生效，基本上都是因为这几个方法的参数的原因。后来在想ele.

element的table表格组件有一个max-height属性，可以设置table的最大高度，但是当我设置这个属性的值为百分比或者响应式的时候，却没有生效，如下所示。max-height:calc(100vh - 40px)//或者max-height:calc(100% - 40px)这是因为element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css。解决方法有以下几种：首先列举出代码：首先设置table组件的ref属性，以及设.

在项目开发中，产品提了这样一个需求：实现表格内每一行之间存在间隙以及渐变效果。具体效果如下图所示：因为element的table组件默认的是行与行挨着，所以需要更改组件的样式，具体代码如下所示：1. 设置行与行之间的间距::v-deep .el-table__body{ //-webkit-border-horizontal-spacing: 13px; // 水平间距 -webkit-border-vertical-spacing: 13px; // 垂直间距}设置这个属性.

实现仅去除纵向滚动条效果项目开发中，有这样一个需求：实现表格内容自动滚动，去掉纵向滚动条。代码如下所示：::v-deep ::-webkit-scrollbar { width: 0; height: 0;}这种写法确实实现了去掉了纵向滚动条的效果，不过对于我的项目来说，却存在一些问题：因为我的表格的表头是可以动态控制的，所以当默认展示的时候，表格横向宽度足够，不存在滚动条的现象；但当表头全部展示的时候，右侧部分内容展示不出来。因为上面的css代码是将横向以及纵向的滚动条全部给去除了，

在项目开发中，产品给了这样一个需求：点击左侧子菜单，在浏览器中打开一个新的标签页，展示数据大屏。在此写个随笔记录下实现过程。思路：使用编程式导航实现页面跳转，我们常用的是 $router.push 和 $router.go，但是Vue2.0以后，这种方式不支持新窗口的打开属性了，所以这个时候可以使用this.router.go，但是Vue2.0以后，这种方式不支持新窗口的打开属性了，所以这个时候可以使用this.router.go，但是Vue2.0以后，这种方式不支持新窗口的打开属性了，所以这..

在做项目时，需要根据需要动态添加或新增表单，同时还需要对表单做校验。详情如下图：刚开始做表单验证的时候，对于这个动态的表单验证有点难搞，试了好几种方法都没有搞定。最后按照下面这种方法实现了，以此篇博客留作记录，方便下次遇到类似的需求时直接开发。<a-form :model="warnData" ref="warnDataRef" :rules="rules" :label-col="labelCol"> <div class="title"> <strong&

这里写自定义目录标题vue组件中实现一键复制到剪切板功能1.安装 vue-clipboard32.使用vue组件中实现一键复制到剪切板功能1.安装 vue-clipboard3npm install --save vue-clipboard3// 或者yarn add vue-clipboard32.使用<template> <div class="content"> <a-button type="link" @click="copy"

watch监听在vue2和vue3中的用法详解（全）Vue2中的watch用法Vue3中的watch用法首先写一个vue页面<template> <h1>监听一个属性</h1> <p>求和：{{ sum }}</p> <button @click="sum++">点我加1</button><br /> <h2>监听多个属性</h2> <p>{{ tips

当我们在项目中需要给element组件加上一些自定义样式的时候，往往是不生效的。这是因为Vue项目中使用第三方框架的时候，Vue中有scoped，声明了样式是在组件范围内生效的，避免了不同组件的样式污染。解决方法1. 去掉scoped这种方法确实可以实现效果，简单粗暴，却会造成不同组件样式污染，不建议。2. 使用 /deep/ 深度修改标签样式找到需要修改的 element标签的类名，然后在类名钱加上 /deep/ ，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 sty.

在v-for渲染的列表中使用三元表达式动态绑定class类在项目中，需要用到 v-for 来渲染一系列div，根据每一个数组对象里的一个字段，动态的显示出不同的颜色，需要动态绑定类。<div v-for="(item, index) in logsList" :key="index" class="content_item" id="content_item"> <div style="margin-bottom: 4px"> <span>{{item.ti