鹏多多的博客

Vue.js中的mixins（混入）是一种提高代码复用的重要机制。本文介绍了mixins的基本概念和使用场景，包括局部混入和全局混入的实现方法，并演示了如何定义和使用混入对象。同时详细讲解了混入后组件生命周期的执行顺序，指出当混入与组件存在同名方法时，组件的方法会覆盖混入的方法。文章还提供了代码示例展示混入对象与组件的合并过程，帮助开发者理解如何利用mixins来减少重复代码并扩展组件功能。

watch 是一个对象，键是需要观察的表达式，用于观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数的参数是新值和旧值。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

计算属性必须返回一个值，值的结果会被缓存，除非依赖的响应式 property 变化才会重新计算，如果某个依赖在该实例范畴之外，则计算属性是不会被更新的。

Vue.js指令是带有v-前缀的特殊特性，用于响应式地操作DOM。内置指令分为四类：内容渲染指令，条件渲染指令，属性绑定指令.....

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期，每个生命周期都是一个函数。

使用Vue-Router时，会将一些字段信息附加到路由的Meta对象里面，比如图标icon，标题，权限等

最近在做一个文件夹管理的功能，要实现一个树状拖拽文件夹面板。里面包含两种元素，文件夹以及文件。

最近这段时间在做一个新的模块，其中有一个三层的树结构，产品经理提出了一个很古怪的需求，整的我只能自己控制树的交互，写完之后，感觉对这个组件的用法有了不一样的了解，故而写下来。

博主最近在做一个线上直播互动课堂的Vue项目，里面有一些这样的互动：老师奖励学生A一个奖章，要自动播放得奖的音效。得到这个需求，博主立马开码。myPlay(){ let mp3 = new Audio(); mp3.src = "./奖励的声音.mp3"; mp3.load(); mp3.play(); setTimeout(() => { mp3.pause(); }, 3000);}结果一直报错度娘告诉我，浏览器18年改版

在项目迭代过程中，作者接到需求，要求使用甘特图展示项目工期进度。通过搜索了解甘特图后，使用Echarts 4.5.0和Vue 2.x实现了该功能

最近在重温vue全家桶，再看一遍感觉记忆更深刻，所以写个教学记录一下

最近在重温vue全家桶，再看一遍感觉记忆更深刻，试着以教学的方式写下来

在Vue项目开发中，肯定会有这样一个场景：在不同的组件页面用到同样的方法，比如格式化时间，文件下载，对象深拷贝，返回数据类型，复制文本等等。这时候我们就需要把常用函数抽离出来，提供给全局使用。那如何才能定义一个工具函数类，让我们在全局环境中都可以使用呢？请看下文分解。

项目迭代过程中，碰上一个需求，table表格，其中一列计划开始时间一列计划结束时间，使用的是不同的日期选择器，开始时间会限制结束时间只能选相同日期以及之后的日期

项目写完了准备上线，发现打包后的包很大怎么办？，但是打包后的文件晦涩难懂，如何了解打包文件的细节，到底是哪里占了体积，了解某一个文件是由哪些内容打包而成，从而针对性的优化项目体积。

需求是图片预览，并且可以放大缩小旋转和左右切换，然后可以一键打包下载所有图片。结合需求，我选择了viewer.js，jsZip和FileSaver.js，放一个实现的交互效果gif图；几个插件的网址和安装命令和代码；viewer.js文档安装npm install viewerjs在vue组件中import 'viewerjs/dist/viewer.css'import Viewer from 'v-viewer'import Vue from 'vue'Vue.use(Viewer

vue：超级详细，项目常用的十种组件通信方式

事情的起因是我`leader告诉我系统的合同上传出现问题了，文件上传失败，接口也没调用。

项目基于vue2全家桶及音乐Api实现，网站风格参考了一些平台，样式简约清新，整体体验比较流畅

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

在vue项目中，env是全局配置文件，可以存储不同环境下的变量。使用vue-cli搭建项目，默认会在根目录创建一个.env文件，如果需要更多类型的.env文件，需要自行创建。

有些项目中，或者是视频网站，都需要视频播放功能。我们可以用H5的video标签实现播放，但是原生的样子视频播放器不太好看，功能也需要自己封装。这时候可以站在巨人的肩膀上，使用已造好的轮子vue-video-player

自定义指令。是Vue暴漏了自定义指令的API给我们，让我们除了使用内置指令外，我们还可以自己定义指令（比如：复制粘贴指令，图片懒加载指令，防抖指令等等）

vue-grid-layout是一个适用于vue的拖拽栅格布局库，功能齐全，适用于拖拽+高度/宽度自由调节的布局需求，本文将讲述一些常用参数和事件，以及做一个同步拖拽的Demo。

本文主要分享vue-cli从4.x升级到5.x的过程，以及更新后的变化。

本文主要讲开发过程中需要常用的，有些`api`不常用，需要的时候可以自行查找文档。因为`V3`中没有了`this`，所以`router4`语法有所修改，模板中我们仍然可以访问`$router`和`$route`，所以不需要在`setup`中返回`router`或`route`

这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档，`4.0`对比`3.0`，区别不大。

最近在做一个项目，项目配置版本如下，vue3+element-plus

<script setup> 是 Vue 3 中用于单文件组件的编译时语法糖，旨在简化 Composition API 的使用。

这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了。其实`V2`到`V3`的学习成本不高，熟悉`V2`的话，看完这篇文章就可以上手`V3`。

不管是vue还是react，都可以写jsx/tsx，为了避免样式污染，常用的方式有两种。一种是每个组件都用一个唯一类名class包裹，使用less/scss嵌套样式。另一种是使用cssModule模块化。

记录一下如何使用element-plus中的icon组件