This article demonstrates how to create a reusable Vue 3 component with Vite and Element‑Plus, covering two‑way data binding via v‑model, slot forwarding using the h function, and exposing child component refs through a Proxy, complete with code examples and explanations.
This article walks through a zero‑to‑one charging‑station system built with Spring Cloud microservices, Vue front‑end, and a suite of enterprise features such as distributed locks, idempotency, multi‑level caching, and custom starters, providing concrete design documents and module breakdowns to help candidates showcase real project experience in interviews.
This article walks through building a 1v1 WebRTC audio/video call demo with Vue, explains the underlying PeerConnection setup, media control, and datachannel messaging, then expands to discuss real‑world challenges, adaptive solutions, and compares Mesh, SFU, and MCU multi‑party architectures.
This article provides a comprehensive guide to using Vue Flow—a lightweight Vue 3 component library—for building dynamic flowcharts, covering installation, core concepts such as nodes, edges and handles, theme customization, composables, controlled flow demos, and detailed code examples.
This document describes a web‑based contract and employee expense reimbursement system for small‑to‑medium enterprises, covering its BS architecture with a Vue front‑end, Django back‑end, MySQL database, deployment environment, registration/login procedures, and detailed modules for user, department, contract, reimbursement, and financial management.
This article explains how Vue2 and Vue3 rewrite array methods to achieve reactivity, compares Object.defineProperty with Proxy, demonstrates common pitfalls such as includes and push causing infinite loops, and provides practical code examples for both versions.
This article explains how the vueuse utility library works with both Vue 2 and Vue 3 by leveraging the vue‑demi compatibility layer, and then dives into the implementation of its useDark hook, showing the underlying media‑query logic and CSS techniques for dark‑mode support.
This article explains the concept of virtual scrolling, why it is needed for performance in web pages, outlines two main implementation strategies, and provides detailed Vue‑based code examples—including Element‑Plus Infinite Scroll and a custom VirtualList class—to help developers apply the technique effectively.
This article introduces a graduation project that creates an interactive smart campus 3D scene using three.js and Vue, provides demo links, outlines core features, offers a quick‑start guide, and gives detailed explanations of each module, modeling conventions, and performance tips.
This article explains why ESLint is essential for front‑end code quality, describes its core features, and provides a detailed five‑step process for integrating ESLint into Vue 3 projects, followed by deeper integration techniques for Vite, Webpack, CI/CD pipelines, Git hooks, and IDEs, complete with practical code examples and troubleshooting tips.
This article describes a complete solution for creating a PDF contract electronic signature system using Vue for the front‑end rendering, pdfjs‑dist to extract predefined form fields, and pdf‑lib on the back‑end to generate a signed PDF, covering field extraction, coordinate conversion, canvas overlay, and server‑side PDF manipulation.
This article explains how to fetch an HTML string from an API and display it either via an iframe or by rendering the HTML directly in React or Vue, and provides multiple download options—including saving the raw HTML, capturing an image with html2canvas, and generating a PDF using jsPDF.
This article explains how to create a reusable Vue calendar component by designing its data structure, generating a 7×6 date matrix, implementing navigation props and events, and applying customizable styles, providing complete code examples for template, script, and scoped CSS.
This article describes how a legacy Vue2‑based cloud management system was profiled with Lighthouse and webpack‑bundle‑analyzer, then optimized through static asset compression, dead‑code removal, tree‑shaking, code‑splitting, async loading and server tweaks, achieving a three‑fold reduction in bundle size and a 13.6‑second improvement in first‑contentful‑paint time.
This article walks through the design and implementation of a configurable dynamic form in Vue, covering user‑side API design, type definitions, enhanced next‑function logic, recursive component rendering, and a complete example with code snippets to illustrate building and using the form component.
This article provides a comprehensive comparison between Vue 2 and Vue 3, detailing their architectural differences, new features such as the Composition API, TypeScript support, fragments, teleport, suspense, virtual‑DOM optimizations, and guidance on state management, build tools, and migration strategies.
This article explains the shortcomings of the native HTML title attribute for hover text and provides a step‑by‑step guide, with pure HTML/CSS/JavaScript and Vue examples, to create a customizable tooltip that only appears when the text overflows, improving both style and functionality.
This article introduces a lightweight admin dashboard template built with Vue 3.4, Element‑plus, and Vite, detailing its project structure, technology stack, coding standards, configuration files, component integrations such as UnoCSS, mock.js, canvas, SVG and WangEditor, and provides step‑by‑step commands for development, linting, formatting, and production build.
AS-Editor is a Vue-powered visual drag‑and‑drop page builder that generates UI from JSON, offering installation via npm, step‑by‑step usage with customizable components, and an open‑source repository for enhancing front‑end development efficiency, even in mobile projects.
The article details how the author leveraged Doubao MarsCode's AI‑powered online IDE to quickly set up a Vue3 project, import a git repository, switch Node versions, install dependencies, develop a paginated carousel component with full code snippets, and evaluate the platform's strengths and weaknesses.
This article demonstrates how to implement a high‑performance file upload system using Vue's Element Plus component on the frontend and Spring Boot on the backend, comparing single‑row inserts, batch inserts, and a multithreaded producer‑consumer approach to dramatically reduce MySQL insertion time.
This guide walks through setting up Jenkins with Docker Compose, installing Node.js, configuring npm to use the Taobao mirror, and creating a Jenkins pipeline to compile and package a Vue application, including troubleshooting tips for common errors.
This tutorial demonstrates how to create an interactive Echarts map that supports drill‑down to county level and back navigation using Vue 3, vue‑echarts, and Vite, covering data acquisition, option configuration, event handling, and full component code.
This article describes how to build a reusable Vue component that automatically moves overflow menu items into a "More" dropdown, calculates the cutoff point based on container width, and updates the layout on resize, providing a smooth and responsive navigation experience.
This article reviews the ten most valuable JavaScript libraries for 2024—including React, Redux, D3.js, TensorFlow.js, Angular, Node.js, Vue, Svelte, Three.js, and Lodash—detailing their core features, performance benefits, typical use cases, and why they remain essential tools for modern frontend development.
This guide shows how to create an Element UI table in Vue whose columns are generated from a configurable array, using colgroup/col for layout, v‑for loops for headers and rows, sticky left/right columns, edit‑mode inputs, and dynamic scroll‑shadow effects for a flexible, high‑performance table component.
The article explains why repeated button clicks or searches cause duplicate API calls, discusses why debounce/throttle are not ideal, and presents three practical solutions—loading state locking, request cancellation with Axios CancelToken, and related code examples—to efficiently avoid redundant requests in Vue applications.
This article provides a curated list of twelve open‑source admin dashboard projects, including D2admin, vue‑element‑admin, JEECG‑BOOT, GIN‑VUE‑ADMIN, and others, with their GitHub links, documentation URLs, demo previews, and licensing information, offering developers free resources for building management interfaces.
The JavaScript framework ecosystem has surged forward with React adding Server Components, a Compiler and Server Actions; Vue 3.4 delivering faster reactivity and a Vapor mode; Angular introducing Signals and partial hydration; Next.js unveiling an App Router and Turbopack; Nuxt, Svelte, Remix and Astro each releasing performance‑focused features, underscoring a rapidly evolving landscape for modern web development.
This article explains how to design, develop, preview, debug, and publish NPM component extension packages for the Baidu AI‑Speed platform, covering supported tech stacks, extension mechanisms, core modules, development tools, code conversion examples, and common deployment questions.
This article describes how two large front‑end platforms were systematically merged—covering background analysis, deployment optimization, repository consolidation, application‑type detection, routing, environment variables, request encapsulation, permission handling, and the resulting improvements in development efficiency and user experience.
This guide explains how to install the Layui-Vue component library for Vue 3, configure it in a main.ts file, create a basic layout template, and highlights the latest release notes including new events, bug fixes, and style optimizations.
This guide shows how to speed up Vue‑based web apps by configuring Nginx to serve gzip‑compressed files dynamically and using the compression‑webpack‑plugin to pre‑compress JavaScript and CSS during the build, cutting bundle size from megabytes to a few, and halving page‑load times without extra server load.
This guide walks you through the fundamentals of Electron development, covering why C/S desktop apps still matter, how to install Node, Vue‑CLI and Electron, create and run a project, explore the full source tree, and understand the main, renderer, and IPC modules with real‑world examples.
This article provides a comprehensive tutorial on building cross‑platform desktop applications with Electron, covering environment setup, essential command‑line tools, project initialization, detailed source‑code directory structure, main and renderer processes, inter‑process communication, and example projects such as a music player.
This article introduces the Douyin open‑source short‑video project built with Vue and Vite, provides a free book giveaway link, and gives step‑by‑step instructions for installing Node, cloning the repository, installing dependencies with pnpm, and running the application locally.
Learn how to create a mini version of the TinyVue component library that works across Vue 2.6, Vue 2.7, and Vue 3 by using a single source code strategy, adaptive layers, renderless logic, and unified APIs, with practical code examples and migration solutions.
This monthly digest reviews the Vue 2024 conference highlights, explores the breakthrough AIGC model Sora, examines emerging AI programmers and large‑context assistants like Kimi, and evaluates new front‑end tools such as Oxlint and TypeScript’s using keyword, offering practical takeaways for developers.
This article introduces Vue as a progressive JavaScript framework, explains its core features such as reactive data binding, component‑based development, and virtual DOM, and walks through installation methods, a simple counter example, and a brief comparison with React and Angular.
This article explains the challenges of migrating legacy Vue applications to a unified React stack, focusing on external link redirection, route parameter handling, and unified routing conventions, and provides a concrete implementation using Nginx, path-to-regexp, and a custom Redirector class.
This tutorial shows how to request camera access, display the video stream, and capture a snapshot onto a canvas using WebRTC and Vue, complete with live demo links, illustrative images, and full source code for index.html and main.js.
This article explores the advantages of combining Java, Spring Boot, and Vue for full‑stack web development, outlining the technology selection, step‑by‑step development workflow, best practices for code quality, testing, debugging, performance optimization, and deployment using containerization.
The Cloud Music overseas team built the Qianyu Platform, an automated i18n system that replaces manual copy handling with Babel‑based key generation, auto‑uploads, CDN publishing, and per‑language builds, dramatically boosting development efficiency, reducing maintenance, and delivering faster, lightweight multilingual experiences.
This guide walks you through five actionable tips for integrating Bit with Vue and Vite, covering component setup, environment variable management, custom Vite configuration, Vue DevTools usage, and cloud deployment, all illustrated with clear code examples and screenshots.
This article benchmarks Vue3's Proxy-based reactivity against the traditional Object.defineProperty approach across initialization, read, write, multiple object creation, and nested‑object scenarios, revealing where each technique excels and why Vue3 ultimately prefers Proxy despite nuanced performance trade‑offs.
This article provides a step‑by‑step tutorial on building a virtual waterfall (masonry) list component in Vue 3 using TypeScript, covering component structure, props, state management, rendering logic, handling variable item heights via temporary DOM measurement, performance optimizations, and practical usage examples.
This article explains four audit implementation approaches, provides the SQL schema for the audit and file tables, shows complete SpringBoot controller code for handling audit operations and file uploads, and presents full Vue front‑end code for creating, editing, listing, and approving audit records, offering a comprehensive guide for backend developers.
This article explains the principles and implementation details of Vue form validation, the generation of scoped data‑v‑xxx attributes, the composition of build output files, remote loading of .vue components, and how to create a dropdown menu using the render function, providing code examples and step‑by‑step explanations.
This article provides a step‑by‑step guide on designing and implementing an audit feature using SpringBoot for the backend, MySQL for data storage, and Vue.js for the front‑end, covering multiple implementation strategies, database schema creation, RESTful APIs, file upload handling, and UI interaction details.
The 2023 frontend review highlights TypeScript’s size and speed gains, ECMAScript 2023 features, evolving frameworks like React, Vue, Svelte, Angular and emerging Qwik, while Rust tooling, Bun, browser changes, AI‑driven low‑code, and WASM progress set the stage for 2024’s LLM‑powered, Rust‑centric, cross‑platform development.
Layui Vue is a Vue 3‑based desktop UI component library that continues the classic design of the original Layui, offering ready‑to‑use components, a brief history of its evolution, and a detailed update log highlighting new features and bug fixes as of January 2024.
This article introduces a Vue 3 GridList component that supports responsive grid layouts, server‑side pagination via a request function, and virtual scrolling to render only visible items, providing performance improvements for large data sets while offering clear usage examples and full source code.
This article introduces Vue 3 Hooks, explains their relationship to the Composition API, compares them with mixins and class‑based patterns, provides best‑practice guidelines, and offers multiple TypeScript code examples for creating, using, and managing custom hooks to improve code reuse and maintainability.
This article presents Pictode, a Konva.js‑driven graphics editor framework, explains its core features, demonstrates how to set up a canvas, use drawing tools, selector and history plugins, and provides step‑by‑step code examples for integration with Vue or other front‑end projects.
This tutorial walks through creating a 3D map in a Vue project using ECharts, covering JSON map import, 2D to 3D conversion, region labeling, default and interactive highlighting, background gradients, realistic materials, 3D bar charts, and lighting effects with complete code examples.
This guide explains how to create a reusable EditTable component that extends ElementPlus's el-table, providing add, delete, edit, and save capabilities, custom editable columns, form validation, dynamic data loading, and a simple API for integrating editable tables into Vue applications.
This article explains how to design and implement a token generation, storage, and verification system for both PC and mobile clients in a distributed microservice architecture, using Spring Boot, Redis, custom annotations, AOP aspects, and Vue front‑end integration.
This article introduces Lottie for web, explains how to install the lottie-web package, demonstrates basic usage with JavaScript code, details the animation instance and Lottie API methods, covers event handling, and provides a reusable Vue component wrapper for seamless integration.
Vue 3.4 introduces a rewritten template compiler that doubles parsing speed, a refactored reactivity system with more precise effect triggering, stable defineModel macro, v‑bind shorthand, improved hydration error messages, and several deprecated features removed, while recommending dependency updates for a smooth upgrade.
This article examines the history, design motivations, and trade‑offs of modern frontend frameworks—covering Svelte’s new runes feature, the rise of component‑based architectures, template abstraction, cross‑platform compilation, and the differing philosophies of React, Vue, and Svelte—to explain why added complexity ultimately improves developer productivity and code maintainability.
Geeker-Admin is an open‑source admin panel built with Vue 3.3, TypeScript, Vite 5, Pinia and Element‑Plus, offering a rich ProTable component, dynamic routing, theme switching, i18n, extensive custom directives, and full linting and commit tooling for rapid frontend development.
In this article the author, creator of the Vue3 mobile component library Varlet UI, shares the latest architectural changes, monorepo setup, design system, development tooling, testing, build outputs, documentation deployment, playground, and VSCode extensions, reflecting on lessons learned over the past two years.
uni‑app x is a new DCloud product that uses the UTS language (a TypeScript‑based superset) to compile Vue‑style code into native Kotlin for Android and Swift for iOS, promising native‑level performance while retaining familiar cross‑platform development workflows.
This article explains the overall architecture of Chrome extensions, how to create popup, DevTools, and content scripts using React or Vue, configure manifest.json, set up multi‑entry Webpack builds, debug each component, and perform end‑to‑end testing with Puppeteer and Xvfb for CI environments.
This article explains the fundamentals of Vue's reactivity system, comparing Vue2's Object.defineProperty approach with Vue3's Proxy-based implementation, and walks through building a custom dependency-collection model with code examples, key-level tracking, and branch-aware cleanup to achieve precise reactive updates.
The article traces the historical evolution of front‑end frameworks—from static pages and jQuery to modern component‑based libraries like React, Vue, and Svelte—explaining why added complexity and compile‑time features such as Svelte’s runes improve maintainability, reactivity, and cross‑platform capabilities while weighing each framework’s design philosophy and trade‑offs for developers.
This article provides backend developers with a concise Vue quick‑start guide, covering core features such as component‑based architecture, two‑way data binding, and virtual DOM, and demonstrates practical setup via CDN or Vue CLI, along with detailed examples of data handling, computed properties, watchers, methods, and common directives.
This article demonstrates how to build a real‑time equipment monitoring application by using WebSocket for server‑client communication, a Vue.js front‑end to display device status, and a SpringBoot back‑end that broadcasts alerts when abnormal devices are reported.
This article introduces alova, a JavaScript library for frontend developers that streamlines request handling by providing ready-made hooks for basic requests, pagination, form submission, captcha, file upload, auto-retry, SSE, and cross-component communication, illustrated with Vue code examples.
This article introduces vue-draggable-plus, a Vue drag‑and‑drop library built on Sortablejs that supports both Vue 2.7 and Vue 3, explains its installation, three usage modes (component, functional, directive), and shows how to specify target containers with full code examples.
The article details how the BI platform’s bulky, tightly‑coupled filter was refactored into a standalone, generic ‘bi‑filters’ library managed with Lerna and Vue‑CLI, enabling on‑demand imports, independent packaging, and a three‑layer design that improves extensibility, universality, robustness, reduces code size, and simplifies maintenance.
This article explains how the Titian component library uses Design Tokens to abstract visual attributes like color, typography, spacing, and shadow, allowing seamless theme customization, global and component-level styling, dark mode support, and multi‑framework integration for consistent front‑end development.
This article introduces the open‑source mall project—a SpringBoot + Vue + uni‑app e‑commerce platform with over 60 K GitHub stars—detailing its payment flow, architecture, tech stack, video tutorial series, and how to join the learning community for hands‑on development experience.
This article details the design evolution and performance optimization of Vivo's Agile BI cross‑tab component—from a jQuery prototype to a React‑based solution—highlighting worker‑offloaded preprocessing, virtual scrolling, and micro‑frontend integration that enable sub‑second rendering of massive data sets and match or surpass competing BI tools.
This article uses a fictional story to illustrate a front‑end white‑screen problem on an old Android phone, analyzes the root causes such as unsupported Chrome versions, missing globalThis and Vue loading failures, and provides a step‑by‑step Vite legacy downgrade solution with code examples and configuration tips.
This article shares practical JavaScript snippets for managing dictionaries with Map, deduplicating arrays using Set, constructing data with Array.from, applying destructuring patterns, merging API modules in Vue projects, and converting flat data into tree structures, providing clear examples and reusable code.
This guide introduces Layui‑Vue, a Vue 3 desktop component library, showing how to install it via npm, configure it in main.ts, and build a basic layout using Layui components, along with a brief changelog and documentation links.
The article walks through a real‑world Vue front‑end production bug where a footer share button disappears, explains how to locate the responsible code, and demonstrates using Chrome DevTools’ file‑override capability to modify and test the script until the issue is resolved.
This article examines various user behavior recording methods—including WebRTC video capture, canvas-based screenshot recording, and DOM snapshot recording with rrweb—detailing their technical implementations, advantages, limitations, and suitable application scenarios for product analysis, debugging, and automated testing.
This article demonstrates how to add entry animations and implement seamless horizontal and vertical scrolling in a Vue 3‑based big‑screen visualization project using ECharts, Gaode map, Pinia, CSS keyframes, and the animejs library, with complete code examples and component packaging.
This article explains the fundamentals of client‑side rendering (CSR), server‑side rendering (SSR), and isomorphic rendering, demonstrates a minimal Vue 3 isomorphic example with code snippets, discusses dehydration/hydration, and shares practical tips and pitfalls for building production‑grade SSR applications.
This article explains why the official web map built with Leaflet suffers from poor performance, how using CanvasKit (Skia compiled to WebAssembly) together with @use-gesture and popmotion dramatically improves rendering speed and interaction smoothness, and provides a complete implementation and component wrappers for Vue and React.
This article explains why web performance matters, introduces key user‑centric metrics such as First Contentful Paint, Largest Contentful Paint and Cumulative Layout Shift, describes how to measure them with tools like Chrome DevTools, Lighthouse and ftwo, and provides practical optimization techniques including gzip, HTTP/2, CDN, image handling, code splitting and Vue router lazy‑loading.
This guide introduces Pinia, a lightweight Vue state‑management library, covering its installation, creation of a Pinia instance, defining stores in both options and setup styles, and detailed usage of state, getters, and actions with code examples, highlighting its simplicity compared to Vuex.
This article explains how to create a reusable Vue 3 directive that applies debounce and throttle to input events, addresses the extra triggers caused by Chinese IME composition, and provides complete TypeScript code examples and usage instructions.
This article explains the benefits of automating deployment for Django‑Vue applications and provides step‑by‑step instructions, including code repository integration, frontend Vue build, backend Django deployment, and static file handling, accompanied by practical Python subprocess scripts to streamline the entire process.
This article explains Vue's diff algorithm in detail, covering prerequisite concepts about VNode, left‑ and right‑side comparisons, handling arrays of different lengths, and the complete implementation with code examples to help developers grasp how Vue efficiently updates the DOM.
This article walks developers through creating a cross‑framework UI button demo using OpenTiny, covering project initialization, framework‑specific adapters for Vue, React, and Solid, and explaining the renderless architecture that enables seamless component reuse across multiple front‑end stacks.
This article explains how to create a Vue directive for element resizing, covering basic right‑side resizing, handling trigger zones, enforcing minimum dimensions, adding left/right multi‑direction support, and providing complete JavaScript and TypeScript implementations with usage examples and future enhancements.
The article shows how to create a smooth FAQ expand‑collapse effect in Vue by storing each item’s visibility in a show flag, wrapping the answer in a transition component, and using JavaScript hooks to set explicit heights and overflow while rotating the arrow icon for visual feedback.
This article examines the core front‑end technologies employed in JD’s Competition Ranking H5 page, covering animation implementations, style configuration, skin switching, poster generation, debugging tools, request handling, and deployment scripts, providing practical insights and code examples for front‑end developers.
This article walks through recreating the Genshin Impact character switch UI using Vue, detailing the horizontal avatar carousel, background image scaling animations, and touch‑based swipe handling for mobile, complete with code snippets and edge‑case logic.
This article introduces several popular open‑source Vue.js libraries—including vueuse, vue‑js‑modal, vue‑wait, good‑table, vue‑notification, tree‑select, and egjs‑infinite‑grid—detailing their features, star counts, usage examples, and GitHub links to help developers quickly enhance their Vue projects.
This article explains how to create a generic useList hook for Vue 3 that handles pagination, data fetching, filtering, resetting, exporting, and customizable success/error hooks, complete with TypeScript generics and Element‑Plus UI integration.
This article introduces nine widely used front-end admin dashboard templates—ranging from Bootstrap‑based solutions to Vue, React, and Angular frameworks—highlighting their key features, GitHub star counts, and demo screenshots to help developers choose the most suitable tool for their projects.
This guide walks you through Docker fundamentals, comparing virtual machines and containers, explains core Docker concepts, shows how to install Docker, create a Dockerfile for a Vue app, build and run the image with Nginx, and shares best‑practice tips for publishing and optimizing containers.
This article explains how to convert state‑driven Element‑Plus Dialog components into a command‑style API using a custom useCommandComponent hook, discusses the drawbacks of traditional Dialog handling, outlines required component conventions, provides implementation code, and offers practical usage examples for Vue developers.
This article introduces the Layui‑Vue component library for Vue 3, showing how to install it via npm, configure it in a main.ts file, create a basic layout page, and review the latest bug fixes and optimizations.
This article explains the fundamental differences between Vue 3's reactive and ref APIs, highlighting reactive's limitation to objects, the situations where it loses reactivity, and why using ref—along with techniques like Object.assign and toRefs—provides more reliable and flexible state management.
This article explains how to embed the ChatGPT API into a low‑code development plugin to automatically translate Chinese variable names into English, preset Prompt templates, and generate fully typed Vue code for CRUD pages, complete with code examples and configuration steps.
