Vue

Vue 是由 Evan You(尤雨溪)领导开源的前端开源框架,与 React, Angular 一起,是目前全世界最流行的前端框架之一

最好用的 5 个 Vue select 单选多选下拉组件
最好用的 5 个 Vue select 单选多选下拉组件
单选 / 下拉 / 多选(select)组件在搭建 Vue 的 app 中特别常用,Vue select 除了用鼠标点选外,还可以有更多样的功能,比如搜索过滤,树状结构,tab 分组,按组选择等。这些...
2022年01月23日
Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能
Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能
很多 Vue 项目中都需要 PDF 文件预览功能,比如合同 ERP,销售CRM,内部文档CMS管理系统,内置 PDF 文件在线预览功能。本文手把手教你搭建一套 PDF 预览组件嵌入到 Vue 项目中,...
2022年02月27日
Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一,也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染,在引入 Video.js 后,轻松解决。本教程手把手教你搭建一...
2022年03月16日
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功能,本教程手把手教大家如何在 Vue 中加入 Chart.js ,一个基于 JavaScript 的...
2022年02月10日
vue.draggable 入门指南 - 手把手教你开发任务看板
vue.draggable 入门指南 - 手把手教你开发任务看板
在 Vue 中,组件拖拽功能非常难写,有大量的深坑藏在里面。当然也有非常多的第三方库帮你实现拖拽功能,其中最棒的拖拽组件库就是 vue.draggable了,本文将带领大家学习如何使用 vue.dra...
2022年02月23日
如何在 Vue 中导出数据至 Excel 表格
如何在 Vue 中导出数据至 Excel 表格
我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在另一个系统里导入数据进行分析。 本教程将带领大家一起使用 Vue 搭建一个导出功能页,...
2022年01月20日
手把手教你Vue3+Node.js+Expres+MySQL环境搭建
手把手教你Vue3+Node.js+Expres+MySQL环境搭建
如何才能搭建一套拥有前后端的完整 APP 呢?本文是你成为全栈工程师的入门教程。 我会先教你安装创建并配置 Vue 3 + Vue Router + axios(前端部分)搭建前端控制页面。然后教你安...
2022年01月06日
Vue Router 手把手教你搭 Vue3 路由
Vue Router 手把手教你搭 Vue3 路由
Vue 的单页面应用是基于路由+组件的形式,路由用于设定访问路径,并将路径与组件映射起来。这种形式相对于 a标签超链来说不会重新加载页面,而是在同一个页面中进行路由跳转。 本教程在 Vue3 中手把手...
2022年01月21日
Vue 搭建带预览的「上传图片」管理后台
Vue 搭建带预览的「上传图片」管理后台
手把手教你开发带预览的 Vue 图片上传组件,即图片上传管理后台。只要你跟本教程一步一步走,最终能很好的理解整个前后端传图的工程逻辑。前端我们使用 Vue + Axios + Multipart 来搭...
2022年02月12日
Vue 3 强制刷新组件的五种必会方法总结
Vue 3 强制刷新组件的五种必会方法总结
`Vue` 是基于响应式的,自动挡操作,当数据发生改变,与之相对应的视图也会刷新。但开发过程中,我们有时候会遇到一些额外的状况,例如动态赋值后,对应的数据发生了变换,但 `DOM` 却没有及时更新,因...
2022年03月20日
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图,一步步完...
2022年03月20日
如何在 Vue 中配置 DevServer.proxy 代理
如何在 Vue 中配置 DevServer.proxy 代理
在开发环境中,用 Vue 搭建的前端与后端会跑在一台机器上,但现实的生产环境里,前端和后端通常跑在两台机器上,Vue 前端通过 API 与后端通讯。这时我们就需要配置 Vue DevServer.pr...
2022年03月29日
如何使 Vue ECharts 柱状图中,每个柱子颜色各不同(随机或指定颜色)
如何使 Vue ECharts 柱状图中,每个柱子颜色各不同(随机或指定颜色)
Vue ECharts 柱状图中的每根柱子颜色其实都可以自定义或者随机颜色的。比如 X 坐标是各团队名,那么你可以根据各团队识别色,指定显示柱子颜色。又或者我们只是需要柱状图中,不论有多少数据,所有柱...
2022年03月12日
ECharts X 轴标签过长导致文字重叠的 4 种解决方案
ECharts X 轴标签过长导致文字重叠的 4 种解决方案
Echarts 是国内图表组件占有率最高的第三方库,在使用中我们经常遇到 X 轴标签文字过长导致显示不全或 X 轴标签刻度间隔不够的问题。本文详细讲解 4 种标签超长显示问题的解决方案,轻松解决所有场...
2022年03月08日
Element Plus 和 Ant Design Vue 对比测评,哪个更好?
Element Plus 和 Ant Design Vue 对比测评,哪个更好?
Vue 3 发布后,各家第三方库开始陆续重构并支持 Vue 3 ,国内两大知名框架 Element Plus 和 Ant Design Vue 也相续发布新版支持 Vue 3。到底应该怎么选择呢?本文...
2022年04月04日
Element Plus for Vue 3 入门教程
Element Plus for Vue 3 入门教程
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级,对于第三方组件库来说是一件好事,那些已经修修补补无数次,还无法彻底解决的问题,...
2022年04月03日
Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件
Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件
Vue Devtools 是 Vue 官方发布的调试浏览器插件,可以安装在 Chrome 和 Firefox 等浏览器上,直接内嵌在开发者工具中,使用体验流畅。Vue Devtools 由 Vue.j...
2022年03月28日
Vue ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色
Vue ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色
ECharts 饼图中的每个扇形颜色其实都可以自定义或者随机显示颜色。比如 X 轴是各销售渠道名,那么你可以需要使用全局统一的识别色彩,那么就需要指定每个扇面的颜色。本文讲解 4 种配置修改 ECha...
2022年03月14日
SVG 使用教程:如何在 Vue 中使用 SVG icon 图标系统
SVG 使用教程:如何在 Vue 中使用 SVG icon 图标系统
在网站中如何使用图标一直是前端领域比较热门的话题,目前图标的主流方案为 `svg-icon` 方法。本篇文章首先带大家来回顾一下 `icon` 的演变史。然后给大家详细讲解在 `vue` 中使用 `s...
2022年04月08日
如何设置 Echarts 标线(markLine)及平均值、最大最小值及颜色
如何设置 Echarts 标线(markLine)及平均值、最大最小值及颜色
Echarts 标线(MarkLine)包含多种可选功能,可以指定数值,直接求平均值、最大值、最小值,变换颜色、实现、虚线,标线提示位置等。标线 `markLine` 放在 `series` 内即可显...
2022年04月16日
Echarts 折线图、柱状图、饼图多种渐变色设置指南
Echarts 折线图、柱状图、饼图多种渐变色设置指南
在技术层面灵活使用 Echarts 之后,我们开始追求美感,需要给带有数据的折线图、柱状图、饼图添加渐变颜色,让视觉体验上更丰富。Echart 内置多种方法使图表可以带有两种或多种渐变色,不仅可以控制...
2022年03月25日
多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单
多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单
Vue 前端开发中,表单组件是排在前三的高频使用的组件,如何快速构建表单,节省力气,避免重复造轮子呢,选择一款适合自己的前端表单设计器就非常重要了。本文介绍 4 款顶级好用的 Vue 表单设计器,其中...
2022年04月26日
Element Plus 如何按需引入和自动导入?解决非标签元素丢失样式的问题
Element Plus 如何按需引入和自动导入?解决非标签元素丢失样式的问题
Element Plus 按需引入能非常好的帮助我们减小项目体积。全局引入整个项目大 1mb +,通常我们的项目并不会使用到全部元素,按需引入的项目体积一般在 300kb 左右。大大减小了项目体积。E...
2022年04月24日
Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗?
Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗?
尤雨溪设计 Vite 的初衷是改善打包速度,没想到他会成为新一代前端构建工具,速度比 Vue CLI 快 100 倍。Vue-cli 一直是 Vue 2 默认官方脚手架工具,Vue-cli 基于 We...
2022年04月29日
5 款最棒的 Vue 图片剪裁编辑器推荐
5 款最棒的 Vue 图片剪裁编辑器推荐
Vue 开发中经常会碰到图片上传前,需要剪裁的应用场景,比如用户上传头像、文章封面、商品封面、广告头图等需要图片剪裁编辑器等场景。本文推荐 5 款适合各种场景的 Vue 图片剪裁编辑器,可以在上传图片...
2022年05月02日
5 款最棒的 Vue 倒计时组件库测评推荐
5 款最棒的 Vue 倒计时组件库测评推荐
我们日常的开发任务也经常会碰到应用倒计时的场景,比如直播开播倒计时,发短信按键倒计时,投票结束倒计时,任务提交处理倒计时。在 Vue 添加倒计时功看起来简单,但能做到计时过程精准,效率高,代码精巧其实...
2022年04月17日
5 款 Vue 轮播图组件测评与推荐 - 穷尽市面上最棒的 Vue 轮播图组件库
5 款 Vue 轮播图组件测评与推荐 - 穷尽市面上最棒的 Vue 轮播图组件库
虽然 Vue 内置了轮播图功能,但也只是最基本的单图轮播。轮播图看似功能简单,要是真深入进去写,你会发现到处是万丈深渊。市面上好用的 Vue 轮播图组件并不多,本文挑选了性能最佳和最有特色的 5 款 ...
2022年03月18日
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐
Vue 时间日期选择器(date-timepicker)组件在使用 Vue 框架开发中使用非常频繁。vue timepicker 除了基础选择日期时间外,还有非常多样的功能配合不同场景使用,比如 12...
2022年02月20日
最好用的 6 款 Vue 拖拽组件库推荐
最好用的 6 款 Vue 拖拽组件库推荐
Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件到网页上这类都需要用到拖拽组件。本文记录了我自己用过的 6 款 Vue 拖拽组件...
2022年02月24日
最好用的 7 款 Vue admin 后台管理框架测评
最好用的 7 款 Vue admin 后台管理框架测评
Vue admin 后台管理框架作为每个项目必备的管理后台,对大家来说十分重要。选不好,配不好,不仅现在用着抓狂,未来迭代升级也困难重重,步步是坑。所以在技术选型阶段,就要对市面上主流的 Vue ad...
2022年01月12日
顶级好用的 5 款 Vue table 表格组件测评与推荐
顶级好用的 5 款 Vue table 表格组件测评与推荐
Vue table 表格组件作为绝大多数项目需要内嵌的组件,可谓十分重要。表格看起来虽简单,实则坑很深,像搜索、排序、分页、无限加载等功能看起来很好实现,其实相当繁琐。选择适合自己项目应用场景的 Vu...
2022年01月16日
Echarts 关系图完全配置指南 - 手把手教你制作西游记人物关系图
Echarts 关系图完全配置指南 - 手把手教你制作西游记人物关系图
Echarts 关系图是图表中最常用的显示形式之一。使用 Echarts 做出基本的关系图很简单,但要把多组关系放在一起,分组、分颜色、加上鼠标拖拽缩放等功能,就不容易了。本文将带领大家一步一步制作一...
2022年03月23日
如何在 Vue 中加入图表 - Vue echarts 使用教程
如何在 Vue 中加入图表 - Vue echarts 使用教程
在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功能,本教程手把手教大家如何在 Vue 中加入 Echarts ,一个基于 JavaScript 的开源可视化图表库,Echa...
2022年02月02日
最好用的 7 款 Vue 富文本编辑器
最好用的 7 款 Vue 富文本编辑器
Vue 富文本编辑器作为直接与用户交互的内容输入生产工具,对大家的项目来说非常重要。选不好,配置不好,直接影响产品质感和用户体验,所以说在选择编辑器方面花点时间是值得的。 我试用了市面上所有主流富文本...
2022年01月11日
5 款最棒的 Vue UI 移动端组件库 - 特别针对国内使用场景推荐
5 款最棒的 Vue UI 移动端组件库 - 特别针对国内使用场景推荐
我们日常的开发任务也经常会碰到应用倒计时的场景,比如直播开播倒计时,发短信按键倒计时,投票结束倒计时,任务提交处理倒在 Vue 3 正式版发布一段时间后,各大组件库、框架纷纷对 Vue 3 做了支持和...
2022年04月18日
最好用的 7 个 Vue Tree select 树形组件
最好用的 7 个 Vue Tree select 树形组件
Vue 树形选择器(Vue tree select)组件在搭建 Vue 的 app 中特别常用,Vue tree select 除了简单的树形结构外,还有非常多样的功能来配合不同场景的使用。比如搜索过...
2022年02月16日
12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐
12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐
Vue 3 发布已经有一段时间了,就在刚刚过去的一年,各大组件库、框架纷纷对 Vue 3 做了优化和支持。整个前端从谨慎使用 Vue 3 转向了开始拥抱 Vue 3。特别是年初年末几家大厂陆续开源或新...
2022年03月03日
Vue + Node.js 全栈开发实战教程 - 手把手教你搭建「文件上传」管理后台
Vue + Node.js 全栈开发实战教程 - 手把手教你搭建「文件上传」管理后台
本教程手把手带领大家搭建一套通过 Vue + Node.js 上传文件的后台系统,只要你跟随本教程一步步走,一定能很好的理解整个前后端上传文件的代码逻辑。前端我们使用 Vue + Axios + Mu...
2022年02月07日
Vue form 表单异步验证终极教程 async-validator 表单校验
Vue form 表单异步验证终极教程 async-validator 表单校验
Vue form 表单是用户与网站 / app 重要的交互方式。而我们需要在用户提交表单前对 form 验证表单进行验证,以确保用户填写了必选项以及在本地先过滤掉错误的数据,避免这些错误数据传入,减少...
2022年05月10日
顶级好用的 8 款 Vue 弹窗提示组件测评与推荐
顶级好用的 8 款 Vue 弹窗提示组件测评与推荐
Vue 弹窗是我们日常开发中经常使用的组件,它可以提供活动引导、提示通知、获取信息等,能便利与用户间的交互。原生 `JavaScript` 提供了 `alert、prompt、confirm` 等方法...
2022年03月06日
最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
Vue 消息提示通知组件是我们日常开发中经常使用的组件,它可用作与用户交互的反馈提示,信息提交成功、错误、操作警告等场景使用。原生 `JavaScript`  提供了 `alert、prompt、co...
2022年05月15日
Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP
Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP
Vue3 的源码使用 `TypeScript` 编写,而 `TypeScript` 是 `JS` 的一个超集,主要提供对 ES6 的支持,以及更棒的代码可读性和高维护性。Axios 是基于 Promi...
2022年05月16日
Vue3 TypeScript 使用教程 - 实战 Vue3 element-plus 开发「待办清单」
Vue3 TypeScript 使用教程 - 实战 Vue3 element-plus 开发「待办清单」
Vue 作为国内最主流的前端库,几乎每个公司都在使用它,其拥有的庞大的生态,可以帮助我们快速的构建平台。而 Typescript 作为开发利器,凭借着强大的类型系统,也越来越受到开发者的喜爱,尤其在开...
2022年05月17日
最好用的 5 款 Vue AutoComplete 自动补全组件
最好用的 5 款 Vue AutoComplete 自动补全组件
Vue 自动补全(Vue-AutoComplete)组件,与表单、富文本、表格、图表、弹窗、拖拽、时间日期选择等组件一样,是大家用 Vue 搭建项目时使用最频繁的组件之一。Vue-AutoComple...
2022年05月22日