Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
Share 20 wheels I often use in development, hoping to help more right front-end partners.
I’ve been working on Vue projects lately, and the company’s projects are all Vue frameworks, so I’d like to recommend the Vue component library that I often use
Vue UI component library
1, the Element the UI
This one is from Ele. me Company. It is one of the most popular front-end UI component libraries in China, and it is the component library I use most. The official website is well documented and supports the latest Vue3 framework, which can be used in mainstream front-end development frameworks. And Element provides a set of element-React and Element-Angular versions. That is to say, learn this set of UI library, can be used in the mainstream front-end development framework, if not so much time, want to learn a set of UI component library is absolutely right.
Web site:element.eleme.io/#/zh-CN.
2, vant
Yizan open source component library, suitable for mobile terminal development. The components are complete, easy to use, and the UI design is beautiful. Web site:Youzan. Making. IO/vant / # / useful – C…
3, View the UI
This is also a good Vue supporting the use of UI library, UI design is very beautiful, before are free version, later out of the professional version (charged version), support style of course more rich.
Web site:www.iviewui.com/
React UI component library
1, Ant the Design
Ant Design is derived from the background product development of the Experience technology Department of Ant Financial, with complete documentation and good community ecology. There are mobile phone versions and PC versions. Can be used to quickly create a library of UI components for mobile/background/internal applications.
Web site:ant.design/index-cn
2, the React the Bootstrap
I’m sure most people used this in the JQuery era. Now React Bootstrap has been launched, which is relatively dull in design, but it is enough to build a small project.
Web site:react-bootstrap.github.io/
3, MATERIAL – the UI
React component library implements Google’s new Material Design language. There are over 50,000 stars on Github, one of the most popular React component libraries. Now it’s also called Mui.
Web site:mui.com/zh
The animation library
Animate.css
Make some basic pages above can be achieved, but to make the page better look, the animation effect is indispensable, recommend the following animation plug-in.
Animate. CSS is a pure CSS animation library, so no matter what framework you use, it is very easy to use it, built-in animation effects, and very easy to preview.
Web site:animate.style
Fine effect components
The UI component library is large and complete, but the level of refinement is sometimes not enough. Let’s introduce some small and refined proprietary components.
1, Swiper
Swiper this rotation map component rotation map effect is too rich, support dual – end development, Chinese document introduction is clear enough. Supports native, JQuey, Vue, React, Angular, etc. It also supports dual-end development and is suitable for front-end development scenarios.
Website: swiper.com.cn
2, mescroll. Js
Mescroll.js is a scrolling plugin, and scrolling on the mobile end can be awkward and slow. It is based on H5, does not rely on other front-end frameworks, is less intrusive, very useful. If you run into problems with scrolling, you can use this plugin to solve them.
Web site:/www.mescroll.com/api.html
Tool wheel
Development in addition to the production of the interface, but also need some tool class wheels, I will introduce the development of some tool class wheels.
1, lodash. Js
Lodash.js is all about libraries, a consistent, modular, high-performance JavaScript utility library. This library can be used in native JS, React and Vue. For almost any function you develop, this library will be written for you. All you need to do is use it skillfully and properly.
Website: www.lodashjs.com
2, Day. Js
Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers. Day.js loads, parses, and executes less JavaScript, leaving more time for pseudocode. Day.js also has great support for internationalization.
Web site:dayjs.fenxianglu.cn
3, timeago. Js
It shows that a lot of websites and apps that are updated a few hours ago, in order to show timeliness, are no longer showing the exact time of the release, but a few minutes or hours ago. This is significantly more time-sensitive.
Address: github.com/hustcc/time…
4, Echarts
It is an open source visual chart library based on JavaScript. Data visualization has come a long way in the past few years. Developers have come to expect more from visual products than simple chart-creating tools, but more advanced requirements in terms of interaction, performance, data processing, and more. Apache ECharts meets this need and can meet the needs of enterprise development.
Address: echarts.apache.org/zh/index.ht…
5, Markdown
As a programmer, writing documentation in Markdown format is a required skill, so if you’re developing applications and websites for programmers, make sure you support Markdown.
Web site:pandao.github.io/editor.md
6, the validator. Js
Validator.js is a form validation tool that I think most of you have used because it’s recommended that you do form validation on both the front and back ends. Address: github.com/validatorjs…
Since I usually use Vue for most of my development, I will share a few common tool components about Vue.
7, the vue – draggable
Vue-draggable is a draggable component that is used in applications that need to have a mobile end, so draggable is becoming more and more popular. It is the best vue-based draggable component I have seen so far.
Web site:www.itxst.com/vue-draggab…
8, vue – qr
Vue TWO-DIMENSIONAL code generation tool, if you need to generate two-dimensional code, with this component is absolutely right, can easily and quickly generate any form of two-dimensional code. Includes color and custom styles.
Web site:www.npmjs.com/package/vue…
9, the vue – cropper
Vue image clipping function, no matter the development of any application, requires the user to upload the image. But in order to maintain the consistency of the page, so it is necessary to upload pictures, install design specifications, crop. This is where you can use the component.
Address: github.com/xyxiao001/v…
10, vue – the lazyload
Vue picture lazy loading, in fact, a lot of UI component libraries have this picture lazy loading to function, but still put forward separately, because it will not conflict with other Vue component libraries, and more functions better use.
Address: npmjs.com/package/vue…
11, vue – simple – the upload
Vue upload component, upload is one of our development requirements, so you must have a fully functional upload component. It works very well, but the downside is that it doesn’t have an official website, just a Github address.
Address: github.com/saivarunk/v…
There are a lot of common wheels out there, but these are the top 20 that you use most at work. If you have a good front wheel, leave it in the comments.