vue

Vue Element Admin vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案...

大家好，我是 CUGGZ。 浏览器的开发者工具为我们提供了强大的调试系统，可以用来查看DOM树结构、CSS样式调试、动画调试、JavaScript代码断点调试等。今天我们就来看看console调试的那...

介绍： Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。 1、安装Element ui npm i element-ui -S 2...

1.props限制和透传 ​​​​内自定义限制 props: { size: { // 自定义验证函数 validator: (val) => { return ["small", "mediu...

<font color=purple face=华文行楷 size="5">"柳丝榆荚自芳菲，不管桃飘与李飞；",,将 pyecharts 模板，位于 pyecharts.render.t...

今天封装了一个DatePicker日期选择器，发现带快捷选择的不太好封装，我需要在不同的地方快捷选择不同的时间，并且快捷显示的时间是从昨天开始，在网上找了一圈都没找到便自己写了一个记录一下。,,,今天...

使用VitePress可以让我们快速搭建一个静态博客网站，这篇文章将带领大家搭建一个基于VitePress的静态博客网站并且部署到GitHub Pages(github提供的静态网页服务) 快速上手 ...

传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解传送门：Vue中 状态管理器（vuex）详解及应用场景传送门：Vue中 事件总线（eventBus）详解及使用传送门：Vue中 pro...

@[toc] 1 Axios简介 1.1 什么是Axios? Axios 是一个基于 ​​promise​​​ 网络请求库，作用于​​node.js​​ 和浏览器中。 它是 ​​isomorphic​...

一、什么是vdom？,二、为何要用vdom？,三、vdom核心函数有哪些,Vue项目中实现路由按需加载（路由懒加载）的3中方式：,Proxy的优点：,Proxy的缺点：,Object.definePr...

什么是灰度发布？百度百科的解释如下。,从上可以看出，灰度发布的主要作用有以下几点：,灰度发布的方式有很多，按端可以区分服务端，客户端，Web前端都可以做，没有最好，只有更适合自己的业务场景。 如上可以...

1 图片拉近 缘起是看到了下面的图片，我发现当鼠标悬浮的时候，发现他是可以拉近的，也就是图片的宽高不变，但是图片被放大了 起初我以为是有一个这样的方法，可以实现这个操作，但是查找了很多网站都没有找到...

Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。 本文将通过Vue3的形式对两者的不同实现方式进行...

随着前端各种框架的日益完善，一些基本的性能优化和加载优化都已经很完善了，但是有些必要的优化还是得开发者自己去做。vue.js是一个比较流行的前端框架，与react.js、angular.js相比来说...

前言 前面一篇文章​​Vue开发历程---音乐播放器​​，实现了播放音乐，以及基本的布局。但是进度条没有实现同步，本文即介绍进度条的实现。 一、效果图 二、心路历程 1、elementUI 滑块的使用...

大家好，我是 CoderBin，最近在做一个Vue项目，其中涉及到了头像图片上传。由于之前没做过图片上传功能，所以在实现这个功能时着实遇到了不少坑。本次打算将实现过程以博文的形式分享给大家。,实现过程...

我一开始是先在网上找这方面的文章发现目前的文章都不太适合我的需求，于是自己想办法封装了一个，在这里分享一下思路及代码。,创建RangeSearch.vue,以上这些是官方文档说明的我就不详细讲解了，主...

引言： 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。如何使用Ant-design-vue中的 a-upload 上传组件进行图片或者视频的上传呢？ 正文： 1...

【前言】本博客系统的讲诉了Vuex的安装、搭建。以及Actions、Mutations、State、Getters的使用，为什么使用mapState、mapGetters以及一些细节的解释 Vuex...

,GoView 是一个使用 Vue3 搭建的低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可完成业务需求。它的技术栈为：Vue3 + TypeScript4 + Vite2 ...

今天来分享 Nuxt.js 官方开源的 3 个基于 Nuxt + Vue 的实战项目！这些项目可以帮助我们更好地理解和掌握 Nuxt 和 Vue 的概念、编写更优雅的代码。,Nuxt Movies 是...

图片,vue 中有这样一张响应式系统的流程图，vue 会将模板语法编译成 render 函数，通过 render 函数渲染生成 Virtual dom，但是官方并没有对模板编译有详细的介绍，这篇文章带...

,Vue 3已经发布了一年，它的主要新功能是：Composition API。从2021年秋季开始，推荐新项目使用Vue 3的 ​​script setup ​​语法，所以希望我们能看到越来越多的生产...

大家好，我是年年!组件库的样式覆盖不掉，这应该是很多前端在工作中遇到过的问题。今天从实际案例出发分析原因，最后会给出在React和Vue项目中的最优解。,本文会讲清：,先不讲概念，直接从需求出发：我使...

,我们的系统（一个 ToB 的 Web 单页应用）经过多年的迭代，目前已经累积有大几十万行的业务代码，30+ 路由模块，整体的代码量和复杂度还是比较高的。,项目整体是基于 Vue + TypeScir...

,相信很多兄弟都知道 Vue3 的那些新特性，如基于 Proxy 的响应式系统、编译器优化、Composition-API 等等，但你知道 Vue3 中有哪些小细节是和 Vue2 不同的吗？,今天就给...

,大家好，我是 CUGGZ。,Vue.js 是一套用于构建用户界面的渐进式 JavaScript 框架。它是尤雨溪在2013年开发出来的，最初命名为 Seed，于2014年正式开源。如今，已经是 Vu...

,vue和react都已经全面进入了hooks时代（在vue中也称为组合式api，为了方便后面统一称为hooks），然而受到以前react中类组件和vue2写法的影响，很多开发者都不能及时转换过来，以...

大家好，我是 CUGGZ。,今天来分享 10 个基于 Vue3.0 全家桶的优秀开源项目！,PPTist 是一个基于 Vue3.x + TypeScript + Pinia + Ant Design ...

,Vue 和 React 都是基于 vdom 的前端框架，组件渲染会返回 vdom，渲染器再把 vdom 通过增删改的 api 同步到 dom。,当再次渲染时，会产生新的 vdom，渲染器会对比两棵 ...

,最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript，并利用 Composition API 的优势。,比如，下面这...

,内容混杂用法 + 原理 + 使用小心得，建议收藏，慢慢看。,整体来看，变化不大，只是名字大部分需要 + on，功能上类似。使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直...

,老实说，前后端分离其实并不难，前后端分离之后，Java 工程师只需要专心写页面就可以了，在我看来工作可比以前轻松多了。,如果让一个专业的前端工程师来写前端页面，其实也不难，Vue 算是三大前端框架中...

本文将介绍如何使用Vue3来封装一些比较有用的组合API，主要包括背景、实现思路以及一些思考。,就我自己的感觉而言，Hook与Composition API概念是很类似的，事实上在React大部分可用...

hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。,本文是 100+前端几何学应用案例 专栏的第二篇文章, 在第一篇文章几何学在前端边界计算中的应用和原理分析 中我介绍了几何学在前端领域...

,随着前端技术的发展，业界涌现出了许多的UI组件库。例如我们熟知的ElementUI,Vant，AntDesign等等。但是作为一个前端开发者，你知道一个UI组件库是如何被打造出来的吗?,读完这篇文章...

,随着 Vue 生态系统的成熟，已经引入了许多新技术。虽然一些开发人员可能从一个普通的 JavaScript 文件开始，并在页面中包含 Vue。但随着时间的推移，在开发 Vue 应用程序时，使用打包工...

去中心化应用程序（DApps）的主要功能之一是连接钱包的能力，这反过来又允许用户与DApp上的交易互动。它抽象了一些功能，如切换网络，提供签名者，以及其他为用户提供一种认证形式的功能。连接钱包也作为一...

,不知道大家使用 Vue3 的时候有没有这样的疑惑，“ref、rective 都能创建一个响应式对象，我该如何选择？”，“为什么响应式对象解构之后就失去了响应式？应该如何处理？” 今天咱们就来全面盘点...

在本文中，我们会介绍Vue 3中 v-model​ 指令的变化。然后，再通过一个事例讲解下如何使用多个v-model绑定来简化Vue中复杂表单的构建过程。,v-model​ 指令可以在表单输入元素上实...

,12 月 10 日，第五届 Vue.js 开发者大会（VueConf 2022）由 Vue.js 官方通过在线直播的方式举办。Vue.js 作者尤雨溪发表了题为 《Vue 的进化历程》 的演讲，下面...

,相信 react 的伙伴对于 jsx/tsx 都不陌生吧，现在在 vue3 中也可以使用 jsx/tsx 语法拉。,vite官方提供了官方的插件来支持在vue3中使用jsx/tsx，直接安装就行...

响应式是 Vue 的特色，如果你简历里写了 Vue 项目，那基本都会问响应式实现原理。,而且不只是 Vue，状态管理库 Mobx 也是基于响应式实现的。,那响应式是具体怎么实现的呢？,与其空谈原理，不...

,大家好，我卡颂。,我们知道，React发布Hooks后，带来了业界一波Hooks热。很多框架（比如Vue Composition API、Solid.js）都借鉴了Hooks的模式。,但是，即使这些...

,Svelte[1] 是我用过最爽的框架，就算 Vue 和 React 再强大，生态再好，我还是更喜欢 Svelte，因为它开发起来真的很爽。,其实在很久之前我就注意到 Svelte[2] ，但一直没...

,vue 要求任何传递给组件的数据，都要声明为 props。此外，它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样，确保组件按预期使用。,这节课我们来看下这个验证机制，它可...

,随着Vue 3越来越受重视并成为默认版本，许多事情正在发生变化，生态系统逐渐完善中。直到最近，Vue3 的状态管理默认推荐的是使用 Pinia。这节课，我们根据项目的规模，探索不同的状态管理方式，并...

今天就来和大家说说手动传递令牌的事。,我们先来看看，基于 session 认证，文件上传要怎么做。,在 Vue.js 中，如果网络请求使用 axios ，并且使用了 ElementUI 库，那么一般来...

,之前写了两篇文章和大家分享了 TienChin 项目中的菜单数据问题，还没看过的小伙伴请戳这里：,这两篇文章主要是和大家说明了后端如何根据当前登录用户，动态生成一个菜单 JSON。,那么现在的问题就...

我们会讲以下七种组件通信方式：,本文将使用如下演示，如下图所示：,上图中，列表和输入框分别是父组件和子组件。根据不同的通信方式，会调整父子组件。,props 是 Vue 中最常见的父子通信方式，使用起...

,我认为当你写vue3时，应该把这当作默认写法。在vue3.2之前，一般会这样写。,那么现在，我们可以这样写,对比一下，减少了多少行代码呢？,PS:之后的代码我会省略script setup，默认都在...

,大家好，我是 CUGGZ。,自 2014 年首次发布以来，Vue.js 的受欢迎程度和用户数量一直在增加，并逐渐成为一个成熟的框架，被世界各地成千上万的开发者所使用。下面就来看看 2022 年 Vu...

截止发文时间，vite正式版已经发布快2年时间了，vue3也发布到3.2版本了，它的周边设施基本上已经齐活了。也是时候再次重构下我那个vue3.0的开源项目了。,本篇文章就记录下我的重构过程，欢迎各位...

随着 TienChin 项目视频的录制，松哥终于也要静下心来，认真捋一捋 Vue3 中的各种新特性了，然后再和小伙伴们进行分享，其实 Vue3 中还是带来了很多新鲜的玩意，今天我们就不卷 Java 了...

​阅读前应该具备：,按照惯例，在Vue的生态中，当您要测试应用程序时，您可以使用@ vue/test-utils-Vue的官方测试库。这个库提供相关API以方便用户测试渲染的Vue组件实例。例如：,您...

,提示：Vue3.2 版本开始才能使用语法糖！,在 Vue3.0 中变量必须 return 出来，template中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性...

,大家好，我是前端西瓜哥。今天的文章简单探讨一下 Vue 和 React 的不同。,本人 Vue2 和 React 都用过，但不熟悉 Vue3，没用它做过项目。,其实我对这两大框架也没有认真钻研过它们...

Electron可以让程序员重用Web的代码，使用HTML、CSS、JavaScript来构建桌面应用，并在不同平台上使用。,Electron官网上说：“比你想象的更简单”————“如果你可以建一个网...

大家好，我是 CUGGZ。,今天来推荐几款开箱即用的中后台管理模版！,vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈...

组件封装，是我们前端一直在探讨的话题。但现在我们的组件库，更多的是基于某个框架去实现，比如 Vue 的 ElementUI，React 的 ANTD。这种组件的缺点就是对外部框架的依赖，你必须基于 V...

,它是 Vue.js 的核心特性之一，一个数据驱动的视图，我们修改数据视图来响应更新，非常优雅。,Vue2.x 使用 Object.defineProperty() 实现，而 Vue3.x 使用 Pr...

今天分享 6 个 Vue3 开发必备的 VSCode 插件，可以直接用过 VSCode 的插件中心直接安装使用。,:fire: 下载数 153 万+,相信使用 VSCode 开发 Vue2 的同学一定...

从Vue3发布以来，我就一直对其非常感兴趣，就一直想着将其投入公司的生产中，但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试；慢慢的发现组合式Api的形式非常适合开发（个人感觉），尤其是V...

,最近在录 TienChin 项目，项目涉及到了 Vue 中插件的定义，因此整了这么一篇文章，手把手教大家在 Vue3 中定义插件，这个技能掌握了，就可以看懂 TienChin 前端代码了。,在 Vu...

,很多兄弟在使用 Vue3 了，但对 Vue3 的路由却了解的非常少。甚至只知道基本的跳转和参数获取，这样做一些稍微复杂的功能肯定不够用的。最近就把 Vue3 的路由（Vue-Router4）的版本差...

今天跟小伙伴们介绍一下这两个可以绘制 Flowable 流程图的前端库。,workflow-bpmn-modeler 基于 Vue 和 bpmn.io@7.0，实现了 flowable 的工作流设计器...

本篇文章将介绍如何在组件库中开发一个组件,其中包括 如何本地实时调试组件 如何让组件库支持全局引入 如何在 setup 语法糖下给组件命名 如何开发一个组件 目录结构 在packages目录下新建co...

,Vue Amsterdam 2023 于 2 月 8 日至 10 日举行（Vue Amsterdam 是世界上最大的 Vue.js 会议），这是 Vue.js 作者尤雨溪三年以来首次参加面对面 Vu...

,uni-app 是公司常用的一个框架，随着 vue3 的普及，好多公司的项目都已经开始使用 vue3 + uni-app + vite 开发项目，顺手记录和分享一下我在这过程中遇到的问题。,npm ...

,大家好，我是 CUGGZ。,今天，Vue 正式发布了 2.7 版本， 版本名称为 Naturo，即火影忍者。,尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有...

,在平时使用vue来开发项目的时候，对于下面这一段代码，我们可能每天都会见到：,但是我们自己实现一个构造函数却实现不了这种效果呢？,那么vue2中是怎么实现这种调用方式的呢？,首先可以找到vue2的入...

大家好，我卡颂。,昨天在开源圈发生个小插曲。起因是有个用户表示：React新文档在文档结构、美观度、性能等各方面都达到很高的标准。,尤雨溪对Vue新文档与React Beta文档做了测试后表示：在性能...

大家好，我是CUGGZ。,最近很多小伙伴问有哪些值得学习的前端项目，前天分享了《​​Github上8个很棒的React项目​​》，今天来分享 Github 上 8 个很棒的 Vue 项目！,概览：,M...

​本节小编将对Vue的开发环境以及常用工具的使用进行讲解。,Visual Studio Code(VS Code)是由微软公司推出的一款免费、开源的编辑器，推出之后便很快流行起来，深受开发者的青睐。作...

,Pinia​ 是 Vue 新的官方状态管理库，兼容 Vue2 和 Vue3，替代 VueX。与它要替换的 VueX 相比，它提供了更简单、更简洁的 API，并引入了对 Typescript 的原生支...

,大家好,我是webfansplz[1].继将 Vue 渲染到嵌入式液晶屏[2]后,今天要跟大家分享的是如何将Vue渲染到命令行工具 :).关于命令行工具,大家应该都比较熟悉了,比如vue-cli、V...

,大家好，我是 CUGGZ。,为什么要阅读源码？阅读优秀的代码的目的是让我们能够写出优秀的代码，更好的理解框架的工作方式。下面就来分享 5 个 Vue 源码解析开源项目、5 个 React 源码解析开...

,在vue3.2中，正式支持了script setup的写法,这样可以大大简化组件的代码量，减少一些重复操作，我认为当你写vue3时，应该把这当作默认写法。在vue3.2之前，一般会这样写。,那么现在...

大家好，我是 CUGGZ。,今天来推荐几个热门又实用的 Vue.js 库！,,Pinia 是最新一代的 Vue 轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成员在...

Vue3 为我们提供了几项开箱即用的重大性能改进，但也引入了一些额外的手动功能，可以帮助提高我们的应用性能。,在这节课中，我们介绍一下，在 Vue 3.2 中引入新指令 v-memo。引入这个指令的目...

今天给大家盘点12个Vue 3的高颜值UI组件库，凡是用过Vue 框架开发项目的老铁们最少有用过其中一种或者二种以上的UI组件库，用广东话讲：个个都靓。,,官网地址：https://vuetifyjs...

最近入门 Vue3 并完成 3 个项目，遇到问题蛮多的，今天就花点时间整理一下，和大家分享 15 个比较常见的问题，基本都贴出对应文档地址，还请多看文档~ 已经完成的 3 个项目基本都是使用 Vue3...

许多Vue模式涉及使用props将数据从父组件传递到子组件。但如果我们需要一个子组件将数据传给它的父组件呢？,使用 emit，我们可以触发事件并将数据传递到组件的层次结构中。这对下面几种情况很有用，如...

参考了如下组件库，因为有些设计是多个版本和框架的，这里只讨论 Vue3 版本。,流行度：100%,这个流行趋势已经成必然了，现在面试也有越来越多的 TS 相关。,rollbar 是一个异常监控平台，r...

你的可能已经注意到，VUE 3版本的 Vue router (4.0) 与其之前的版本有一些 breaking change 更改。大部分的 Vue Router API 都没有变化，而且迁移过程也...

写过 Vue 的读者一定用过官方提供的一个浏览器调试工具 vue-devtool[1]，它支持在浏览器中调试组件时，点击对应的按钮打开该组件对应你本地代码的文件。,这真的非常实用，而且是 Vue 官网...

本文一定要结合​​Vue 里，多级菜单要如何设计才显得专业？​​一文一起食用效果良好，否则可能会看不懂。,做过 vhr 的小伙伴应该都知道动态菜单是咋回事，就是不同权限的用户登录成功之后，可以看到不同...

,说明,1、装饰器模式允许向一个现有的对象添加新的功能，同时又不改变其结构。,这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。,2、应用场景：ES7装饰器、Vuex中1.0版本混入Vue...

在每个组件或HTML标签上，我们可以使用一些特殊的（文档没写的）钩子作为事件监听器。这些钩子有：,我主要是在组件上使用onVnodeMounted​，当需要在组件挂载时执行一些代码，或者在更新时使用o...

,本文不是要辩论 Vue 好还是 React 好，而是要看看这两个框架在低层次上是如何选择的。,我知道有些开发者在选择框架之前会倾向于看基准。然而，这并不是最关键的方面，因为99%的性能都来自于你写的...

这节课，我们来看下 Vue3 中的 $attrs 属性。首先，我们会介绍它的用途以及它的实现与 Vue2 有哪些不两同点，并通过事例来加深对它的理解。,真正理解了 $attrs 属性有助于我们构建易于...

首先本文不会过度深入讲解只属于 React 或者只属于 Vue 的原理，所以只懂 React 或者只懂 Vue 的同学都可以畅通无阻地阅读本文。,关于 Vue3 的 React-style Hooks...

我们都知道Vue2的响应式系统是利用Object.defineProperty进行数据劫持实现的，但是其本身语法有如以下几个缺陷：,针对此，Vue3使用了Proxy实现的数据响应式，并将其独立成@vu...

TienChin 项目前端是 Vue3，前端有这样的一个需求：有一些前端页面上的按钮要根据用户的权限来决定是否展示出来，如果用户具备相应的权限，那么就展示对应的按钮；如果用户不具备对应的权限，那么按钮...

随着Vue 3.2的发布，一个新的组合工具提供给我们，叫做 expose。,你是否曾经创建过一个需要向模板提供一些方法和属性的组件，但又希望这些方法对组件是私有的，不能被父类调用？,如果你在开发一个开...

,Signal：更多前端框架的选择,大家好，我卡颂。,最近，Angular​、Qwik​的作者「MIŠKO HEVERY」发文表示Signal是前端框架的未来[1]，并考虑在Angular中实现它...

,Vue 项目往往需要使用 vue-router 插件，刚开始入门 Uni-app + Vue3 项目的同学，会不会想着路由使用 vue-router V4 版本不就可以了吗？,不怕大家笑话，我就是这...

之前公司招人，面试了一些的前端同学，因为公司使用的前端技术是Vue，所以免不了问到其响应式原理和Vue的双向数据绑定。但是这边面试到的80%的同学会把两者搞混，通常我要是先问响应式原理再问双向数据绑定...

,Volar 是 Vue.js 官方的 VSCode 扩展。当官方推荐 Vetur 时，Volar 还是一个个人项目，随着时间的推移，由于改进的性能和体系结构而被采纳为新的官方扩展。作为一个旨在改善开...

小伙伴们知道松哥最近在录TienChin项目的视频，其中前端用的是 Vue3，这个用的是 RuoYi-Vue3，这个脚手架里边前端用的 yarn，并且还使用了一些插件，导致 Node 版本必须要 &g...