Vue3 SFC 和 TSX 方式调用子组件中的函数
在开发中会遇到这样的需求：获取子组件的引用，并调用子组件中定义的方法。如封装了一个表单组件，在父组件中需要调用这个表单组件的引用，并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能，首先要在子组件中暴露父组件需要调用的函数，然后去父组件中获取子组件的引用，最后通过子组件的引用调用子组件暴...
从0搭建vue3组件库:Shake抖动组件
先看下效果其实就是个抖动效果组件，实现起来也非常简单。之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验，比如下面一个简单的登录页面，当点击登录会提示用户哪个信息没输入，当然这只是一个简陋的demo接下来就开始我们的Shake组件实现CSS样式当你需要抖动的时候就给它添加个抖动...
【Vue】Vue全家桶（九）Vue3
文章目录 Vue31 Vue3简介2 创建Vue3工程2.1 使用 vue-cli 创建2.2 使用 vite 创建3 分析文件目录main.jsApp.vue4 Composition 组合式API4.1 setup4.2 ref函数4.3 reactive函数4.4 Vue3的响应式原理4.5...
Vue3 JS 与 SCSS 变量相互使用
在开发中会遇到如下需求：JS 中使用 SCSS 变量。如在 scss 中定义了一个颜色，el-menu 组件使用该颜色作为背景色，此时需要获取 scss 变量，通过 background-color 属性将该变量值传递给 el-menu 组件（当然你也可以在 JS 中重新定义一个变量存储该颜色）。S...
Vue3中 响应式 API ( readonly、shallowReadonly、toRaw、markRaw ) 详解
1. readonly 函数接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。要避免深层级的转换行为，请使用 shallowReadon...
vue3 解析markdwon生成文章
引言markdown是啥，相信大家都已经清楚了，一种程序员必备的文档格式。可以支持代码高亮，表格，图片，视频等一种文档格式????????但是在vue3中如何来解析markdown文件呢？????????????效果在效果图中，通过请求获取markdown源文件，然后解析成...
vite vue3 规范化与Git Hooks
在 《JS 模块化》系列开篇中，曾提到前端技术的发展不断融入很多后端思想，形成前端的“四个现代化”：工程化、模块化、规范化、流程化。在该系列文章中已详细介绍了模块化的发展及四种模块化规范。本文简单聊聊规范化中的 git 规范。1 规范化在企业级开发中，“一千个读者有一千个哈姆雷特”是很常见的事，每个...
Vue3 之 Vue - Router
目录 一、历史进程 1. 后端路由阶段 2. 前后端分离阶段 3. 单页面富应用（SPA） 二、路由跳转的方式 1. URL的hash 2. HTML5的History 3. 区别 三、Vue-Router基本使用 1. 概念 2. 安装 3. 路由的使用步骤 01 - 创建映射组件 02 - ...
vue3组件通信方式
vue3组件传值共8种方式 1. props传值 props适用于父传子，有两种写法，混合写法和纯vue3写法（语法糖） 1. 混合写法（不推荐！！！） // 父组件<script setup lang="ts">import child from '../components/Chil...
【精品】vue3中setup语法糖下通用的分页插件
注意：本博客理论基础：https://blog.51cto.com/lianghecai/5743179效果自定义分页插件：PagePlugin.vue<script setup lang="ts">// total ：用来传递数据总条数// pageSize ：每页展示几条数据// c...
AgileBoot - 基于SpringBoot + Vue3的前后端快速开发脚手架
AgileBoot后端地址：https://github.com/valarchie/AgileBoot-Back-End技术栈：Springboot / Spring Security / MyBatis Plus JPA 无XML/ Druid / Redis / Hutool / JWT前端地...
【精品】vue3中setup语法糖下父子组件之间的通信
准备工作在router文件夹中创建index.ts文件：import {createRouter, createWebHashHistory} from 'vue-router'import Father from '../views/Father.vue'const routes = [ {...
Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用
在《基于 vite 创建 vue3 项目》一文中整合了 pinia，有不少伙伴不知道 pinia 是什么，本文简单介绍 pinia。主要包括三方面：pinia 的基本用法，在《基于 vite 创建 vue3 项目》中 demo 的基础上简单重构。如何持久化 pinia 中的数据，保证浏览器刷新时，p...
#yyds干货盘点#Vue3的reactive
最近一阶段在学习Vue3，Vue3中用 reactive、ref 等方法将数据转化为响应式数据，在获取时使用 track 往 effect 中收集依赖，在值改变时，使用 trigger 触发依赖，执行对应的监听函数，这次就先来看一下 reactive ...
Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇）
在项目或产品的迭代过程中，通常会有多套环境，常见的有：dev：开发环境sit：集成测试环境uat：用户接收测试环境pre：预生产环境prod：生产环境环境之间配置可能存在差异，如接口地址、全局参数等。在基于 vue-cli （webpack） 的项目中只需要添加 .env.xxx 文件，然后在 pa...
vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇
在 《基于 vite 创建 vue3 全家桶》一文整合了 Element Plus，并将 Element Plus 中提供的图标进行全局注册，这样可以很方便的延续 Element UI 的风格 —— 通过 el-icon-xxx 的方式使用图标（如果有问题的朋友可以先阅读前面的文章：基于 Vite ...
能否手写vue3响应式原理-面试进阶
（二）响应式原理利用ES6中Proxy作为拦截器，在get时收集依赖，在set时触发依赖，来实现响应式。（三）手写实现1、实现Reactive基于原理，我们可以先写一下测试用例 //reactive.spec.ts describe("effect", () => { it("happy ...
Vue3和react状态管理之Redux与Pinia的使用比较
初始配置 pinia: 1.通过create-vue脚手架在命令行选择pinia模板生成 2.在项目后续添加使用npm add pinia也可以添加并追加模板 redux: 1.使用create-react-app脚手架带的pinia模板通过npx create-react-app my-app -...
vue3动态路由及菜单
一般来说，前端项目中的路由，很有可能是需要动态注册的。因为菜单可能在管理系统中维护，还跟权限绑定，用户登录以后，需要动态展示菜单。菜单往往跟路由挂钩，因此，路由需要动态注册。具体如何实现呢？思路是，系统只提供默认的路由，登录以后，读入菜单/路由数据，加载。这其中，可能会出现默认路由与动态路由有重叠的...
vue3 + element plus实现侧边栏
一般前端项目少不了侧边栏。如图所示 这些鬼东西特别繁琐，所以我们喜欢找些现成、开源的所谓后台管理的前端框架，开箱即用。方便是方便，而且做得还挺好，问题是，有学习成本，要按照它的规则行事。一些功能是怎么实现的，不清楚，除非研究它的源代码。想改的话，更不容易。一切都靠猜、盲测，一则不好改，二则出了问题也...