Vue Components Library

screenshot of Vue Components Library

:rocket::rocket:打造一个自己的Vue组件库

Overview

In this article, the author discusses the process of creating a Vue component library. They showcase various components and features implemented using Vue and the Element UI framework. The components mentioned include a pagination component, a sidebar navigation menu, a file upload with progress bar component, an Excel data export component, a "back to top" button component, a progress bar for route transitions, integration of JTopo in a Vue-CLI project, adding a hover mask to elements, automatically merging cells with the same content in an Element UI table, and a placeholder component for displaying "no data" messages.

Features

  • Pagination: Implements a pagination component using Vue and Element UI.
  • SideBar: Creates a multi-level navigation menu using Vue and Element UI.
  • UploadFile: Wraps the file upload functionality with a progress bar using Vue, Element UI, and Axios.
  • ExportExcel: Utilizes Vue and Element UI to export table data to Excel format.
  • BackToTop: Implements a "back to top" button component using Vue and Element UI.
  • nprogressBar: Adds a progress bar to route transitions in a Vue project.
  • JTopoInVue: Integrates the JTopo library in a Vue project created with Vue-CLI.
  • VueHoverMask: Adds a hover mask to elements in a Vue project.
  • MergeTableCell: Automatically merges cells with the same content in an Element UI table component.
  • Empty: Provides a placeholder component for displaying "no data" messages in a Vue project.

Summary

The article explores the creation of a Vue component library. It highlights various components implemented using Vue and the Element UI framework. The showcased components include pagination, sidebar navigation, file upload with progress bar, Excel data export, "back to top" button, route transition progress bar, JTopo integration, hover mask, automatic cell merging, and a placeholder component for "no data" messages. The article provides installation instructions for using the Vue Components Library in a Vue project.