Vue

单选 / 下拉 / 多选（select）组件在搭建 Vue 的 app 中特别常用，Vue select 除了用鼠标点选外，还可以有更多样的功能，比如搜索过滤，树状结构，tab 分组，按组选择等。这些...

很多 Vue 项目中都需要 PDF 文件预览功能，比如合同 ERP，销售CRM，内部文档CMS管理系统，内置 PDF 文件在线预览功能。本文手把手教你搭建一套 PDF 预览组件嵌入到 Vue 项目中，...

Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一，也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染，在引入 Video.js 后，轻松解决。本教程手把手教你搭建一...

使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表，是所有数据展示类后台必备的功能，本教程手把手教大家如何在 Vue 中加入 Chart.js ，一个基于 JavaScript 的...

在 Vue 中，组件拖拽功能非常难写，有大量的深坑藏在里面。当然也有非常多的第三方库帮你实现拖拽功能，其中最棒的拖拽组件库就是 vue.draggable了，本文将带领大家学习如何使用 vue.dra...

我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ，方便我们将数据共享给其他同学或在另一个系统里导入数据进行分析。 本教程将带领大家一起使用 Vue 搭建一个导出功能页，...

如何才能搭建一套拥有前后端的完整 APP 呢？本文是你成为全栈工程师的入门教程。 我会先教你安装创建并配置 Vue 3 + Vue Router + axios（前端部分）搭建前端控制页面。然后教你安...

Vue 的单页面应用是基于路由+组件的形式，路由用于设定访问路径，并将路径与组件映射起来。这种形式相对于 a标签超链来说不会重新加载页面，而是在同一个页面中进行路由跳转。 本教程在 Vue3 中手把手...

手把手教你开发带预览的 Vue 图片上传组件，即图片上传管理后台。只要你跟本教程一步一步走，最终能很好的理解整个前后端传图的工程逻辑。前端我们使用 Vue + Axios + Multipart 来搭...

`Vue` 是基于响应式的，自动挡操作，当数据发生改变，与之相对应的视图也会刷新。但开发过程中，我们有时候会遇到一些额外的状况，例如动态赋值后，对应的数据发生了变换，但 `DOM` 却没有及时更新，因...

Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单，但要是想把多组数据放在一张图表中，展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图，一步步完...

在开发环境中，用 Vue 搭建的前端与后端会跑在一台机器上，但现实的生产环境里，前端和后端通常跑在两台机器上，Vue 前端通过 API 与后端通讯。这时我们就需要配置 Vue DevServer.pr...

Vue ECharts 柱状图中的每根柱子颜色其实都可以自定义或者随机颜色的。比如 X 坐标是各团队名，那么你可以根据各团队识别色，指定显示柱子颜色。又或者我们只是需要柱状图中，不论有多少数据，所有柱...

Echarts 是国内图表组件占有率最高的第三方库，在使用中我们经常遇到 X 轴标签文字过长导致显示不全或 X 轴标签刻度间隔不够的问题。本文详细讲解 4 种标签超长显示问题的解决方案，轻松解决所有场...

Vue 3 发布后，各家第三方库开始陆续重构并支持 Vue 3 ，国内两大知名框架 Element Plus 和 Ant Design Vue 也相续发布新版支持 Vue 3。到底应该怎么选择呢？本文...

Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第三方组件库来说是一件好事，那些已经修修补补无数次，还无法彻底解决的问题，...

Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.j...

ECharts 饼图中的每个扇形颜色其实都可以自定义或者随机显示颜色。比如 X 轴是各销售渠道名，那么你可以需要使用全局统一的识别色彩，那么就需要指定每个扇面的颜色。本文讲解 4 种配置修改 ECha...

在网站中如何使用图标一直是前端领域比较热门的话题，目前图标的主流方案为 `svg-icon` 方法。本篇文章首先带大家来回顾一下 `icon` 的演变史。然后给大家详细讲解在 `vue` 中使用 `s...

Echarts 标线（MarkLine）包含多种可选功能，可以指定数值，直接求平均值、最大值、最小值，变换颜色、实现、虚线，标线提示位置等。标线 `markLine` 放在 `series` 内即可显...

在技术层面灵活使用 Echarts 之后，我们开始追求美感，需要给带有数据的折线图、柱状图、饼图添加渐变颜色，让视觉体验上更丰富。Echart 内置多种方法使图表可以带有两种或多种渐变色，不仅可以控制...

Vue 前端开发中，表单组件是排在前三的高频使用的组件，如何快速构建表单，节省力气，避免重复造轮子呢，选择一款适合自己的前端表单设计器就非常重要了。本文介绍 4 款顶级好用的 Vue 表单设计器，其中...

Element Plus 按需引入能非常好的帮助我们减小项目体积。全局引入整个项目大 1mb +，通常我们的项目并不会使用到全部元素，按需引入的项目体积一般在 300kb 左右。大大减小了项目体积。E...

尤雨溪设计 Vite 的初衷是改善打包速度，没想到他会成为新一代前端构建工具，速度比 Vue CLI 快 100 倍。Vue-cli 一直是 Vue 2 默认官方脚手架工具，Vue-cli 基于 We...

Vue 开发中经常会碰到图片上传前，需要剪裁的应用场景，比如用户上传头像、文章封面、商品封面、广告头图等需要图片剪裁编辑器等场景。本文推荐 5 款适合各种场景的 Vue 图片剪裁编辑器，可以在上传图片...

我们日常的开发任务也经常会碰到应用倒计时的场景，比如直播开播倒计时，发短信按键倒计时，投票结束倒计时，任务提交处理倒计时。在 Vue 添加倒计时功看起来简单，但能做到计时过程精准，效率高，代码精巧其实...

虽然 Vue 内置了轮播图功能，但也只是最基本的单图轮播。轮播图看似功能简单，要是真深入进去写，你会发现到处是万丈深渊。市面上好用的 Vue 轮播图组件并不多，本文挑选了性能最佳和最有特色的 5 款 ...

Vue 时间日期选择器（date-timepicker）组件在使用 Vue 框架开发中使用非常频繁。vue timepicker 除了基础选择日期时间外，还有非常多样的功能配合不同场景使用，比如 12...

Vue 拖拽组件库（drag-and-drop）组件在使用 Vue 框架开发中非常常见的需求，做个内容行排序，拖拽小组件到网页上这类都需要用到拖拽组件。本文记录了我自己用过的 6 款 Vue 拖拽组件...

Vue admin 后台管理框架作为每个项目必备的管理后台，对大家来说十分重要。选不好，配不好，不仅现在用着抓狂，未来迭代升级也困难重重，步步是坑。所以在技术选型阶段，就要对市面上主流的 Vue ad...

Vue table 表格组件作为绝大多数项目需要内嵌的组件，可谓十分重要。表格看起来虽简单，实则坑很深，像搜索、排序、分页、无限加载等功能看起来很好实现，其实相当繁琐。选择适合自己项目应用场景的 Vu...

Echarts 关系图是图表中最常用的显示形式之一。使用 Echarts 做出基本的关系图很简单，但要把多组关系放在一起，分组、分颜色、加上鼠标拖拽缩放等功能，就不容易了。本文将带领大家一步一步制作一...

在 Vue 搭建的后台管理工具里添加炫酷的图表，是所有数据展示类后台必备的功能，本教程手把手教大家如何在 Vue 中加入 Echarts ，一个基于 JavaScript 的开源可视化图表库，Echa...

Vue 富文本编辑器作为直接与用户交互的内容输入生产工具，对大家的项目来说非常重要。选不好，配置不好，直接影响产品质感和用户体验，所以说在选择编辑器方面花点时间是值得的。 我试用了市面上所有主流富文本...

我们日常的开发任务也经常会碰到应用倒计时的场景，比如直播开播倒计时，发短信按键倒计时，投票结束倒计时，任务提交处理倒在 Vue 3 正式版发布一段时间后，各大组件库、框架纷纷对 Vue 3 做了支持和...

Vue 树形选择器（Vue tree select）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过...

Vue 3 发布已经有一段时间了，就在刚刚过去的一年，各大组件库、框架纷纷对 Vue 3 做了优化和支持。整个前端从谨慎使用 Vue 3 转向了开始拥抱 Vue 3。特别是年初年末几家大厂陆续开源或新...

本教程手把手带领大家搭建一套通过 Vue + Node.js 上传文件的后台系统，只要你跟随本教程一步步走，一定能很好的理解整个前后端上传文件的代码逻辑。前端我们使用 Vue + Axios + Mu...

Vue form 表单是用户与网站 / app 重要的交互方式。而我们需要在用户提交表单前对 form 验证表单进行验证，以确保用户填写了必选项以及在本地先过滤掉错误的数据，避免这些错误数据传入，减少...

Vue 弹窗是我们日常开发中经常使用的组件，它可以提供活动引导、提示通知、获取信息等，能便利与用户间的交互。原生 `JavaScript` 提供了 `alert、prompt、confirm` 等方法...

Vue 消息提示通知组件是我们日常开发中经常使用的组件，它可用作与用户交互的反馈提示，信息提交成功、错误、操作警告等场景使用。原生 `JavaScript`  提供了 `alert、prompt、co...

Vue3 的源码使用 `TypeScript` 编写，而 `TypeScript` 是 `JS` 的一个超集，主要提供对 ES6 的支持，以及更棒的代码可读性和高维护性。Axios 是基于 Promi...

Vue 作为国内最主流的前端库，几乎每个公司都在使用它，其拥有的庞大的生态，可以帮助我们快速的构建平台。而 Typescript 作为开发利器，凭借着强大的类型系统，也越来越受到开发者的喜爱，尤其在开...

Vue 自动补全（Vue-AutoComplete）组件,与表单、富文本、表格、图表、弹窗、拖拽、时间日期选择等组件一样，是大家用 Vue 搭建项目时使用最频繁的组件之一。Vue-AutoComple...