One advantage of Vue over React is that it is easy to understand and learn, and it accounts for the majority in China. We can create any web application with the help of Vue. Therefore, it is also important to keep abreast of some new and easy-to-use Vue open source projects. On the one hand, it can help us develop more efficiently, and on the other hand, we can also learn its essence as a model.
Next, let’s take a look at some useful new open source projects.
Website: http://uigradients.com/
GitHub: https://github.com /ghosh/uiGradients
GitHub Stars: 4.6k
Website: https://cssfx.dev
GitHub: https://github.com/jolaleye/cssfx
GitHub Stars: 3.5k
Website: https://flatlogic.com/templates/sing-app-vue-dashboard
GitHub: https://github.com/flatlogic/sing-app-vue-dashboard
GitHub Stars: 254
Example:https://flatlogic.com/templates/sing-app-vue-dashboard/demo
Documentation: https://demo.flatlogic.com/sing-app/documentation/
#This is a free and open source management template based on the latest Vue and Bootstrap. In fact, it is similar to our domestic vue-admin-template is almost the same. We don’t have to use it, but we can study and study the source code. I believe we can learn a lot of practical skills, come on young man. Vue StorefrontWebsite: https://www.vuestorefront.io
GitHub: https://github .com/vuestorefront/vue-storefront
GitHub Stars: 5.8k
Website: https://www.faviator.xyz
GitHub: https:// www.faviator.xyz/playground
GitHub Stars: 94
Website: https://iviewui.com/
GitHub: https://github.com/iview/iview
GitHub Stars: 22.8k
Website: https://postwoman.io/
GitHub: https://github.com/hoppscotch/hoppscotch
GitHub Stars: 10.5k
URL: https://akryum.github.io/vue-virtual-scroller/#/
GitHub: https://github.com/Akryum/vue-virtual-scroller
GitHub Stars: 3.4k
Vue Virtual Scroller has four main components. RecycleScroller
Can render visible items in the list. If we don't know the specific amount of data, it's best to use DynamicScroller
. DynamicScrollerItem
Wraps everything in DynamicScroller
(to handle size changes). IdState
Simplifies local state management (inside RecycleScroller
).
Mobile UI library
Website: http://mint-ui.github.io/#!/en
GitHub: https://github.com/ElemeFE/mint-ui
GitHub Stars: 15.2k
Build mobile apps faster using ready-made CSS and JS components. With this tool, we don't have to risk the file size being too large since it can be loaded on demand. Animation is handled by CSS3 to improve performance.
Dependency-free plugin for building calendars
Website: https://vcalendar.io
GitHub: https://github.com/nathanreyes/v-calendar
GitHub Stars: 1.6k
You can choose different visual indicators to decorate your calendar. V Calendar also provides us with three date selection modes:
A set of UI tools
Website: https://vueds.com/
GitHub : https://github.com/viljamis/vue-design-system
GitHub Stars: 1.7k
This is a well-organized tool with easy-to-understand naming for any web development team. One of the big advantages is the use of a prettier code formatter that automatically arranges the code before committing to Git.
Function prop combination of UI components
Website: https://proppyjs.com
GitHub : https://github.com/fahad19/proppy
GitHub Stars: 856
ProppyJS is a tiny library for combining props, and it comes with various integration packages that give you the freedom to use its popular rendering library.
The idea is to first express the Component's behavior as props, and then use Proppy's same API to connect it to your Component (which can be React, Vue.js, or Preact).
The API also allows you to access other application-wide dependencies (such as stores using Redux) for convenience anywhere in the component tree.
vue background display template
Website: https://flatlogic.com/templates/light-blue-vue- lite
GitHub: https://github.com/flatlogic/light-blue-vue-admin
GitHub Stars: 79
Example: https://demo.flatlogic.com/light-blue-vue-admin /#/app/dashboard
Documentation: https://github.com/flatlogic/light-blue-vue-admin
The template is using Vue CLI
and Bootstrap 4
built. As you can see from the demo, this template has a very basic set of pages: typography, maps, charts, chat interface, etc. If we need an extended template, you can take a look at Light Blue Vue Full, which has more than 60 components, no jquery, and two color themes.
Building requests for the REST API
GitHub: https://github.com/robsontenorio/vue-api-query
GitHub Stars: 1.1k
There’s not much to say about this project. It does exactly what is written in the description line: it helps us construct requests to the REST API.
Vue’s grid layout
Website: https://jbaysolutions.github.io/vue-grid-layout/ examples/01-basic.html
GitHub: https://github.com/jbaysolutions/vue-grid-layout
GitHub Stars: 3.1k
Simple solution to all grid related problems. It has static, resizable and draggable widgets. Or can responses and layouts be restored and serialized. If you need to add one more widget, you don't have to rebuild the entire grid.
Create a placeholder loader
Website: http://danilowoz.com/create-v...
GitHub: https://github.com/egoist/vue-content-loader
GitHub Stars: 2k
When we develop a website or APP, when there is too much content and the loading speed is slow, it will cause a large number of blank pages when the user opens the page. vue-content-loader
is exactly the solution to this problem A component that generates a dom
template before loading content to improve user experience.
Data Visualization
Website:https://simonzhangiter.github.io/DataVisualization/#/dashboard
GitHub: https://github.com/SimonZhangITer/DataVisualization
GitHub Stars: 1.3k
at In the picture, we can see a very beautiful chart. This project makes any data more readable and easier to understand and interpret. It allows us to easily detect trends and patterns in any data set.
Everyone said that there is no project to write on the resume, so I found a project for you, and also included a [construction tutorial].
Highly customizable modal box
Website: http://vue-js-modal. yev.io/
GitHub: https://github.com/euvl/vue-js-modal
GitHub Stars: 2.9k
All different types of modals can be viewed on this website. There are 15 buttons, press any button and see a modal example.
Framework Component
Website: https://lusaxweb.github.io/vuesax/
GitHub: https://github.com/lusaxweb/vuesax
GitHub Stars: 3.7k
This project is very popular in the community . It allows us to design different styles for each component. The creators of Vuesax
emphasize that every web developer should have freedom of choice when it comes to web design.
vue2.0
—Build the project and create components using animate.css
Website: https://the-allstars.com/vue2-animate/
GitHub: https://github.com/asika32764/vue2-animate
GitHub Stars: 1.1k
This library is cross-browser, we can choose from 5 types of animations: rotate
, slide
, fade
, bounce
and zoom
. There is a demo on the website. The default duration of the animation is 1 second, but we can customize this parameter.
Vuetensils
Vue.js toolset
Website: https://vuetensils.stegosource.com/
GitHub: https://github.com/AustinGil/Vuetensils
GitHub Stars: 111
This The UI library has a standard functionality, but the cool thing is that it has no additional styling. You can make the design as personal as possible and apply it to all your needs. Just write the styles you need, add them to your project, and include as many components as you need.
If there are any errors or suggestions in this blog, talents are welcome to leave a message. Finally, thank you all for watching.
It is impossible to know the possible bugs in editing in real time. In order to solve these bugs afterwards, I spent a lot of time on log debugging. I would like to recommend a useful one to everyone. BUG monitoring tool Fundebug.