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 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.
This article explains what enums are, why they are useful for UI display and data storage, and provides a reusable EnumFactory implementation with examples for gender, status, and alignment, showing how to integrate the enums into ElementUI components and Vue forms.
This guide explains how to protect API data exchange by implementing HTTPS, JWT, rate limiting, MAC, and symmetric encryption (AES/DES) in a Spring Boot backend, while using Vue and Axios on the frontend, including custom annotations, request/response advice, and crypto‑js utilities for end‑to‑end encryption.
This article explains how to create a responsive full‑screen scrolling effect using Vue 3, detailing the concept, requirements, underlying principles, and providing complete HTML, JavaScript, and CSS code to handle mouse wheel, touch events, dynamic height calculation, and indicator navigation.
This article explains various approaches to implementing an audit feature in a SpringBoot application, compares their pros and cons, provides detailed SQL schema, Java backend controller code, and Vue frontend integration, and includes complete code snippets for database tables, file handling, and UI components.
This article examines how JSX can be used in Vue 3, compares it with Vue's native template syntax, provides step‑by‑step configuration instructions, and discusses the advantages, disadvantages, and suitable scenarios for adopting JSX in modern frontend development.
This article describes how to engineer Java Velocity templates for local development within a Vue project by creating a Node‑based rendering engine and a custom Webpack loader, enabling hot‑reloading, mock data injection, and seamless integration of Velocity‑generated HTML into the Vue build pipeline.
This article explores the core front‑end technologies implemented in JD’s Competition Ranking H5 page, covering animation effects, style configuration, skin switching, poster generation, debugging tools, performance optimizations, and deployment strategies, providing practical references for front‑end developers.
This article analyzes why the reset button in an Element‑Plus form clears all fields instead of restoring the initial values, explains the underlying cause related to the onMounted lifecycle timing, and presents several practical solutions—including lifecycle adjustment, patch‑package, component extension, and repository forking—to reliably preserve initial form data in Vue projects.
This article explains why a well‑planned directory layout is essential for frontend projects, compares default flat structures with a feature‑oriented hierarchy, and provides step‑by‑step guidance—including folder definitions, creation commands, and import rules—to build maintainable, modular applications.
This article explains four design patterns for implementing an audit workflow, compares their advantages and disadvantages, and provides complete SpringBoot backend, MySQL table definitions, and Vue front‑end code to build a functional audit system with file upload support.
This article introduces Layui‑Vue, a Vue 3 desktop component library, showing how to install it via npm, configure it in main.ts, create a basic layout page with Layui components, and outlines recent bug fixes and enhancements.
This article introduces ten open-source front‑end low‑code platforms—including GoView, vlife, JeecgBoot, maku‑generator, MtBird, Luban H5, Seezoon Stack, Variant Form, ng‑form, and h5‑factory—detailing their main features, technology stacks, and where to obtain their source code.
This guide explains how the vue‑swift‑i18n VS Code extension automates detection, JSON generation, key replacement, tooltip display, JSON flattening, and code completion for Chinese strings in Vue projects, providing step‑by‑step instructions, configuration options, and practical examples to streamline internationalization.
This article walks through how Vue 2 templates are compiled into render functions using webpack, vue‑loader, template‑loader and the underlying compiler, illustrating each step with project structure, source code snippets, and a deep dive into the AST‑to‑render pipeline.
This guide explains how rtty combines a lightweight C client, a Go server, and a Vue front‑end to provide web‑accessible terminals for remote Linux device maintenance, covering its key features, installation steps, token generation, and browser‑based access.
This article explains how adopting RxJS concepts—such as observable streams, pipeline operators, and pure functional transformations—can help Vue developers avoid common reactivity pitfalls, write more declarative code, and improve maintainability through practical examples and concrete guidelines.
This guide walks through the technology stack, system design, UI screenshots, attendance rules, and step‑by‑step setup for a full‑stack HR management application built with Vue, ElementUI, and Spring Boot, enabling admins and employees to manage leave, salary, and attendance.
This roundup covers Chrome’s new Document Picture‑in‑Picture API, WhatsApp’s shift away from Electron, a deep‑dive into IndexedDB versus other web storage options, a real‑world performance analysis case, Vue’s dynamic image handling with require, and the latest ES7‑ES12 language features.
This article walks through four audit implementation strategies, provides the SQL schema and Java SpringBoot controller for an audit feature, shows how to integrate it with a Vue front‑end including file upload handling, and offers complete code snippets for both back‑end and front‑end components.
This article walks through the design and implementation of the order module in the Mall project, covering both backend administration and frontend shopping flow, database schema, API design, and available video tutorials for a comprehensive e‑commerce solution.
This article introduces OpenTiny, an enterprise‑grade, cross‑framework component library for Vue2, Vue3, and Angular, explains its five key advantages—including seamless Vue2‑to‑Vue3 migration and renderless architecture—and provides step‑by‑step commands to quickly scaffold an admin system and customize themes via its CLI and theme‑config tools.
This article explores the core front‑end technologies behind JD’s Race Ranking H5 page, covering animation implementations, style configuration, skin switching, poster generation, debugging tools, API protection, and deployment workflows, offering practical insights and code examples for developers building sophisticated mobile web applications.
This article compares Vue and React across programming syntax, view templating, component architecture, routing, state management, lifecycle hooks, and side‑effect handling, highlighting the trade‑offs in syntax complexity, flexibility, and developer ergonomics to help you choose the right framework for your needs.
The article examines how low‑code platforms and domain‑specific languages can transform repetitive CRUD development in front‑end engineering by introducing visual abstraction, atomic components, and declarative DSLs, while also discussing their limitations, practical implementation patterns, and the importance of conventions over configuration.
The article examines how low‑code platforms and domain‑specific languages (DSL) can transform repetitive CRUD development in front‑end engineering into a more abstract, maintainable workflow, highlighting their benefits, limitations, and practical Vue‑based implementations.
This article explains how to write reusable frontend code by identifying and separating reusable parts such as UI components, API calls, business workflows, shared data, and utility functions, illustrating each with React and Vue examples, code snippets, and best‑practice recommendations.
