Author: lindelof
Translator: Front-end Xiaozhi
Source: medium
If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.
In this article, we will explore some of the most common vue js components. You can collect a wave.
Table class
Tables View-2
Address: https://github.com/matfish2/vue-tables-2
Vue Tables 2 aims to provide developers with a full-featured toolset for creating beautiful and functional data tables with Vue. Hundreds of commercial software applications are using it. Additionally, Vue Tables 2 is constantly growing, improving, and gaining new features.
Features
- Optional lines and sticky headers
- virtual paging
- Download CSV of customer component data
- Multilevel grouping with data layer support
- Tailwind theme
Handsontable
Address: https://github.com/handsontable/handsontable/tree/master/wrappers/vue
Handsontable is a form interaction plug-in on the page side, which can be used to load and display table content, and can support merge items, statistics, row and column dragging, etc.
At the same time, it supports the processing of the loaded table page: adding/deleting rows/columns, merging cells, etc.
Also, it works with React, Angular, and Vue. Handsontable is a JavaScript component that combines data grid functionality with the user experience of a spreadsheet. Additionally, it provides data binding, data validation, filtering, sorting, and CRUD operations.
Features
- Sort by multiple columns
- non-consecutive selection
- Filter data and validate data
- export file
- Conditional formatting
- Merge Cells
- hide row/column
- Context menu and annotations
Ag Grid View
Address: https://github.com/ag-grid/ag-grid
Ag-Grid is a data grid component based on Vue.js. where "ag" means "agnostic". The internal ag-Grid engine is implemented in TypeScript with zero dependencies.
ag-Grid supports Vue through a wrapper component, and you can use ag-Grid in your application just like any other Vue component. It supports passing configuration through property binding and handling events through event binding. You can even use Vue components to customize grid UI and cell content/behavior.
Easy table view
Address: https://github.com/huangshuwei/vue-easytable
vue-easytable is one of the most powerful Vue table components I have come across.
The table component has many built-in features, such as cell ellipsis, fixed/flexible column resizing, custom filtering, and more. It has several features:
- globalization
- Theme customization
- Built-in themes
- virtual scroll
- Column fixed
- Fixed header
- header grouping
View Good Table
Address: https://github.com/xaksis/vue-good-table
Vue-Good-Table is a data table component based on Vue.js, simple and clean, with more basic functions such as sorting, column filtering, paging and more. It has several features:
- Table search and sorting
- Column filtering and pagination
- Checkbox form
- row grouping
- line style
- row multiple selection
Vue Toastification
Address: https://github.com/Maronato/vue-toastification
It offers light, easy and pretty toast tips. It has built-in Nuxt support. Also, it supports the new Composition API and Vue 3. We can also use SX to develop custom components to provide more flexible functions. Plus, Universal Registration allows it to be used within any app, even React. It has several features:
- Written entirely in Typescript and supports all types
- Support RTL
- Customize everything
- slide to close
- Create custom experiences with onClose, onClick and onMounted hooks
- Programmatically delete and update toast
Vue Toasted
Address: https://github.com/shakee93/vue-toasted
Vue Toasted is one of the best toast plugins for Vue. 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.
Notifications view
Address: https://github.com/se-panfilov/vue-notifications
Vue Notifications is a library-agnostic notification component, non-blocking.
VueNotiments connects your app with the notification UI library. Support miniToastr, VueToasted, VueEasyToast, toastr, iziToast, Noty, swal.
Vue Awesome Notifications
Address: https://f3oall.github.io/awesome-notifications/
Awesome Notifications is a lightweight, fully customizable JavaScript Vue Awesome Notifications which is the Vue.js version of the Awesome Notifications library.
Vue Wait
Address: https://github.com/f/vue-wait
Vue Wait This is a complex loader and progress management component for Vue, Vuex and Nuxt applications.
Vue Wait helps manage multiple loading states on the page without any conflict between states. Based on a very simple idea: by managing an array (or Vuex store) with multiple loading states, have the built-in loader component listen for registered loaders and immediately enter the loading state.
Content Loader view
Address: https://github.com/egoist/vue-content-loader
Vue Content Loader is a Vue.js based SVG placeholder loader, a customizable SVG component for creating placeholder loads such as Facebook loading cards. Vue Content Loader is a Vue implementation of react-content-loader.
- Fully customizable: you can change the color, speed and size
- Create your own loadouts: Easily create your custom loadouts with online tools
- You can use it now: there are already many presets
- performance
Epic Spinners
Address: https://epic-spinners.epicmax.co/
EpicSpinners is a set of easy-to-use web loading effects created by pure css, and at the same time, it integrates Vue components and can be easily used in Vue projects. Since it is made of pure css, you can integrate and use it in any web project by yourself!
Vue Radial Progress
Address: https://github.com/wyzant-dev/vue-radial-progress
Vue Radial Progress This is a radial progress bar effect loader component. It uses svg and javascript to draw a loader with a gradient radial progress bar effect, which can be used as loading and progress prompts.
ICONS
Vue Feather Icons
Address: https://github.com/egoist/vue-feather-icons
Feather is a set of open source icon library for designers and developers. It is a simple and beautiful open source icon library. Each icon is designed on a 24×24 grid, emphasizing simplicity, consistency, and legibility. This free commercial icon is built into the front-end frameworks produced by many major manufacturers.
Features
- Each icon is designed according to a unified standard, with perfect pixel alignment;
- Consistent design style, better than those patchwork icon libraries;
- It supports a variety of development scenarios and is very friendly to developers.
Vue Awesome
Address: https://github.com/Justineo/vue-awesome
Font Awesome is a set of popular icon font libraries. We often encounter scenarios where icons need to be used in the actual development process. For some commonly used icons, we can directly find and use them in Font Awesome without a designer. Personally, I feel that Font Awesome's icons are still very complete. Most of the icons are included and support various frameworks.
Vue Material Design Icons
Address: https://github.com/robcresswell/vue-material-design-icons
A collection of SVG Material Design icons as single file components. Additionally, this library is a collection of Vue single-file components for rendering Material Design icons. Also, it includes some CSS to help make scaling the icons a little easier.
Charts
Apexcharts view
Address: https://github.com/apexcharts/vue-apexcharts
Apexcharts is a modern JavaScript charting library/build interactive charts and visualizations with a simple API. Vue Apexcharts is a Vue.js component for ApexCharts.
Vue Echarts
Address: https://github.com/Justineo/vue-echarts
Vue-echarts is a component library implemented based on echarts package. It can be installed and referenced directly according to the normal component reference method. The specific installation and reference readers can directly read the vue-echarts technical documentation.
Chartjs View
Address: https://github.com/apertureless/vue-chartjs
vue-chartjs is a Vue encapsulation of Chart.js, allowing users to easily use Chart.js in Vue, creating reusable chart components very simply, very suitable for those who need simple charts and run as fast as possible . vue-chartjs abstracts the basic logic and also exposes Chart.js objects, allowing users to gain maximum flexibility.
V-Charts
Address: https://github.com/ElemeFE/v-charts
V-Charts is an icon component encapsulated based on Vue2.0 and Echarts. It only needs to provide a simple configuration item of data format that is friendly to both front and back ends to generate common charts.
time
Timer Hook View
Address: https://github.com/riderx/vue-timer-hook
Vue3 timer module inspired by react-timer-hook. Also, it's a custom hook to handle timers, stopwatches and time logic/state in vue 3 components.
Horizontal Timeline view:
Address: https://github.com/guastallaigor/vue-horizontal-timeline
Vue Horizontal Timeline is a simple horizontal timeline component made with Vue.js.
The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .
Original: https://medium.com/js-dojo/20-usefulue-js-components-2022-3bf9fbe5b556
communicate with
If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.