Translator: Medium

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

In this article, we’ll explore some of the most common Vue JS components. You can collect a wave.

The Table class

Vue Tables-2

Address: github.com/matfish2/vu…

Vue Tables 2 is designed to provide developers with a full-featured toolset for creating beautiful and useful data Tables with Vue. Hundreds of commercial software applications are using it. In addition, Vue Tables 2 is growing, improving, and gaining new features.

The characteristics of

  • Optional line and sticky head
  • Virtual paging
  • Download the CSV of the customer component data
  • Multilevel grouping supported by the data layer
  • Tailwind theme

Handsontable

Address: github.com/handsontabl…

Handsontable is a table interactive plug-in on the page side. You can load and display table contents through handsonTable. It can support merge items, statistics, row and column dragging, etc.

At the same time, support to load the table page processing: add/delete rows/columns, merge cells and other operations.

It also works with React, Angular, and Vue. Handsontable is a JavaScript component that combines the functionality of a data grid with the user experience of a spreadsheet. In addition, it provides data binding, data validation, filtering, sorting, and CRUD operations.

The characteristics of

  • Multi-column sorting
  • Discontinuous selection
  • Filter data and validate data
  • The export file
  • Conditional formatting
  • Merged cell
  • Hide rows/columns
  • Context menu and comments

Ag Grid Vue

Address: github.com/ag-grid/ag-…

Ag-grid is a Vue. Js based data table component. Ag indicates agnostic. The internal Ag-grid engine is implemented in TypeScript with zero dependencies.

The Ag-Grid supports Vue through a wrapper component that you can use in your application just like any other Vue component. It supports passing configurations through property bindings and handling events through event bindings. You can even customize grid UI and cell content/behavior using Vue components.

Vue Easytable

Address: github.com/huangshuwei…

Vue-easytable is one of the most powerful VUE table components I’ve come across.

The table component has many built-in features, such as cell ellipsis, fixed/flexible column sizing, custom filtering, and more. It has several features:

  • internationalization
  • Theme customization
  • Built-in themes
  • Virtual rolling
  • Column fixed
  • Header fixed
  • Header grouping

Vue Good Table

Address: github.com/xaksis/vue-…

Vue-good-table is a data Table component based on vue.js. It is simple and clean, with sorting, column filtering, pagination and more basic functions. It has several features:

  • Table search and sorting
  • Column filtering and paging
  • Checkbox table
  • Line group
  • Line style
  • Line multi-select

Vue Toastification

Address: github.com/Maronato/vu…

It offers light, simple and beautiful toast tips. It has built-in Nuxt support. It also supports the new Composition API and Vue 3. We can also use SX to develop custom components that provide more flexible functionality. In addition, the universal registry allows it to be used within any application, even React. It has several features:

  • Written entirely in Typescript, all types are supported
  • Support RTL
  • All custom
  • Sliding shut down
  • Create custom experiences with onClose, onClick, and onMounted hooks
  • Remove and update toast programmatically

Vue Toasted

Address: github.com/shakee93/vu…

Vue Toasted is one of Vue’s best Toasted add-ons. It is trusted by many organizations such as Vue, Laravel, NuxtJS, etc. It is responsive, compatible, easy to use, attractive, rich in features, ICONS, actions, etc.

Vue Notifications

Address: github.com/se-panfilov…

Vue Notifications is a library-independent notification component that is non-blocking.

VueNotiments connects your application to the notification UI library. Supports miniToastr, VueToasted, VueEasyToast, Toastr, iziToast, Noty, and Swal.

Vue Awesome Notifications

Address: f3oall. Making. IO/awesome – not…

Awesome Notifications is a lightweight, fully customizable JavaScrip Vue Awesome Notifications, which is the vue.js version of the Awesome Notifications library.

Vue Wait

Address: github.com/f/vue-wait

Vue Wait is a sophisticated loader and progress management component for Vue, Vuex and Nuxt applications.

Vue Wait helps manage multiple load states on a page without any conflicts between them. Based on a very simple idea: by managing arrays (or Vuex stores) with multiple load states, let the built-in loader component listen for registered loaders and immediately enter the load state.

Vue Content Loader

Address: github.com/egoist/vue-…

Vue Content Loader is an SVG placeholder Loader based on vue.js, a customizable SVG component used to create placeholder loads, such as Facebook loading cards. Vue Content Loader is the Vue implementation of the React-Content-loader.

  1. Fully customizable: you can change color, speed and size
  2. Create your own loads: Easily create your custom loads using online tools
  3. You can use it now: there are already lots of presets
  4. performance

Epic Spinners

Address: epic – spinners. Epicmax. Co /

EpicSpinners is a set of easy to use pure CSS web Loading effects, and at the same time integrated with Vue components for easy to use in Vue projects, because of pure CSS, you can integrate and use in any web project!

Vue Radial Progress

Address: github.com/wyzant-dev/…

Vue Radial Progress Is a Radial Progress effect loader component that uses SVG and javascript to draw a Radial Progress effect with gradient, which can be used as a load, Progress hint.

ICONS

Vue Feather Icons

Address: github.com/egoist/vue-…

Feather is a set of open source icon library for designers and developers, is a simple and beautiful open source icon library. Each icon is designed on a 24×24 grid, emphasizing simplicity, consistency and readability. Many major manufacturers have built in the front frame of this free commercial icon.

The characteristics of

  • Each icon is designed according to a uniform standard with perfect pixel alignment;
  • A consistent design style that beats the patchwork icon library;
  • Developer-friendly support for multiple development scenarios.

Vue Awesome

Address: github.com/Justineo/vu…

Font Awesome is a set of popular icon Font library. In the actual development process, we will often encounter the use of ICONS. For some common ICONS, we can directly find and use Font Awesome without designers. Font Awesome includes most ICONS and supports a wide variety of frames.

Vue Material Design Icons

Address: github.com/robcresswel…

A collection of SVG Material Design ICONS as a single file component. In addition, this library is a collection of Vue single-file components used to render Material Design ICONS. In addition, it includes some CSS to help make zooming ICONS easier.

Charts

Vue Apexcharts

Address: github.com/apexcharts/…

Excharts is a modern JavaScript charting library/for building interactive charts and visualizations through simple apis. Vue Apexcharts is the vue.js component of Apexcharts.

Vue Echarts

Address: github.com/Justineo/vu…

Vue-echarts is a component library based on echarts encapsulation, directly in accordance with the normal way of component reference, installation reference, specific installation and reference readers can directly read vue-Echarts technical documentation.

Vue Chartjs

Address: github.com/apertureles…

Vue-chartjs is a vUE encapsulation of Chart.js that allows users to easily use Chart.js in Vue to create reusable Chart components, ideal for people who need simple charts to run as fast as possible. Vue-chartjs abstracts the basic logic while exposing the chart.js object to give the user maximum flexibility.

V-Charts

Address: github.com/ElemeFE/v-c…

V-charts is an icon component packaged based on Vue2.0 and Echarts. Common Charts can be generated by providing a unified configuration item with simple data format setting friendly to both front and back ends.

time

Vue Timer Hook

Address: github.com/riderx/vue-…

The Vue3 timer module was inspired by React-timer-Hook. In addition, it is a custom hook that handles timer, stopwatch, and time logic/state in vUE 3 components.

Vue Horizontal Timeline:

Address: github.com/guastallaig…

The Vue Horizontal Timeline is a simple Horizontal Timeline component made with vue.js.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: medium.com/js-dojo/20-…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.