vue3

Vue3从入门到精通(二)

vue3 侦听器 在Vue3中,侦听器的使用方式与Vue2相同,可以使用watch选项或$watch方法来创建侦听器。不同之处在于,Vue3中取消了immediate选项,同时提供了新的选项和API。 创建侦听器 可以使用watch选项或$watch方法来创建侦听器,语法与Vue2相同。示例如下: ... »

从0搭建Vue3组件库(九):VitePress 搭建部署组件库文档

## VitePress 搭建组件库文档 当我们组件库完成的时候,一个详细的使用文档是必不可少的。本篇文章将介绍如何使用 VitePress 快速搭建一个组件库文档站点并部署到GitHub上 ## 安装 首先新建 site 文件夹,并执行`pnpm init`,然后安装`vitepress和vue` ... »

zdsdididi

Vue3从入门到精通(一)

Vue3简介 Vue3是Vue.js的最新版本,于2020年9月18日正式发布。Vue3相比Vue2有很多改进和优化,包括但不限于: 更快的渲染速度:Vue3通过使用Proxy代理对象和优化虚拟DOM算法等方式,提高了渲染性能。 更小的体积:Vue3的体积比Vue2更小,打包后的文件更小,加载速度更 ... »

从0搭建Vue3组件库(十三):引入Husky规范git提交

## 为什么要引入 husky? 虽然我们项目中引入了`prettier`和`eslint`对代码格式进行了校验,但是多人开发的时候难免依然会有人提交不符合规范的代码到仓库中,如果我们拉取到这种代码还得慢慢对其进行修改,这是一件很麻烦的事情,同时也为了避免团队成员提交五花八门message,因此我们 ... »

zdsdididi

解决vue3 defineProps 引入定义的接口报错

问题遇到的现象 在setup语法糖使用了defineProps,然而在定义类型的时候一旦将接口暴露出去引用就发生了报错 问题相关代码 interface Props { /* ... */ } export { type Props } <script set »

一文掌握在Vue3中书写TSX的使用方法

目录 插件安装与文件配置 tsx语法格式 tsx语法注意事项 在vue2的时候就已经可以使用 jsx 语法,但是不是很友好,写起来是一件很痛苦的事情,所以你很少见到有人会在vue2中书写 jsx 语法,官方也不建议我们在vue2中进行书写 jsx 的代码风格: 但随着vue3版本的到来, »

vue3+ts+elementPLus实现v-preview指令

目录 引文 目录 文件内容 previewImage.vue preview.ts 使用 开发中可能遇到的问题 总结 引文 最近在用 vue3+ts 开发公司的后台系统,因为后台多处需要图片放大预览的功能,就想着封装一个v-preview指令,这样在需要预览的图片上加个 v-pr »

vue3中的ref()详解

目录 ref() 1. ref在模板中自动解包 2. ref 在响应式对象中的解包 3. 数组和集合类型的 ref 解包 总结 ref() 接受一个值,返回一个响应式的,可以修改的ref对象,这个对象只有一个.vaule属性。 ref对象可以通过.value属性进行修改,修改后的值也是响 »

vue3中怎么使用swiper

今天小编给大家分享一下vue3中怎么使用swiper的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 介绍 在 vue3 中使用 swiper, 实现轮播图的效果;如果组件样式等模块引入 »

Vue3中怎么实现选取头像并裁剪

这篇文章主要介绍“Vue3中怎么实现选取头像并裁剪”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3中怎么实现选取头像并裁剪”文章能帮助大家解决问题。 最终效果 安装VueCropper组件 yarn add vue-cropper@next 上面的安 »

Vue2和Vue3中常用组件通信方法有哪些

本篇内容介绍了“Vue2和Vue3中常用组件通信方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! Vue3 组件通信方式 props $emit expose / ref $attrs v- »

vue3使用flv.js播放推流视频的示例代码

目录 前言 1、构建 2、销毁 3、断流、卡顿重连 4、报错、停滞重连 5、累计延时处理 6、手动全屏 前言 本人是在vue3中使用flv.js处理推流时,遇到的一些问题,以及处理办法,归纳总结为一个组件,仅限于推流使用。 目前只贴出部分关键代码,若需要完整的代码,请往github下载 »

深入详解Vue3中的Mock数据模拟

目录 引言 一、Mock数据模拟的概述 1.1 为什么需要Mock数据模拟? 1.2 Mock数据模拟的优点和缺点 二、安装和配置Mock.js库 2.1 使用NPM安装Mock.js库 2.2 在Vue项目中配置Mock.js 三、编写Mock数据模拟文件 3.1 Mock.js的基本 »

在Vue3项目中使用如何echarts问题

目录 一,创建 Vue3 项目并安装 echarts 二,创建数据可视化组件 (一)组件内容 (二)使用组件 (三)程序解释 三,响应式刷新 更多功能可扩展 总结 记得第一次使用 echarts 还是2019年的时候,那时做的一个物联网项目云平台的前端需要一些数据可视化功能,经过一些对比 »

Vue3中axios请求封装、请求拦截与相应拦截详解

目录 前言 axios请求封装 请求拦截和响应拦截 接口的请求 总结 前言 对于三者放在Service.js中封装,方便使用 axios.create 的作用是创建一个新的 axios 实例,该实例可以具有自定义配置。通过使用 axios.create,您可以为任何 API 生成一个客户 »

Vue3学习笔记之依赖注入Provide/Inject

Provide / Inject 通常,当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。 官网的解释很让人疑惑,那我翻译下这几句话 »

Vue3父子组件间传参通信的四种方式

目录 前言 一、父传子 defineProps 二、子传父 defineEmits 三、子组件暴露属性给父组件 defineExpose 四、依赖注入Provide / Inject 参考 总结 前言 本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式 Vue3+Typ »