What frameworks can be used for vue?

Frameworks that can be used with vue: 1. Ant Design Vue is a very mature framework and it is very simple to use it to create user interfaces; 2. BalmUI is a UI component library with excellent interactive experience; 3 , Wave UI, is a responsive, accessible and touch-friendly UI component framework; 4. Vuestic, provides more than 50 components with unique functions and extensive configurability; 5. Element, is a desktop component library; 6. Quasar is a performance-centered framework.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Vue is a lightweight, high-performance, componentable MVVM library with a simple and clear API that makes it quick to get started. Since its launch, Vue has been recognized by many web developers.

In the company's Web front-end project development, multiple projects are developed using the Vue-based UI component framework and put into official use.

After the development team used the Vue.js framework and UI component library, the development efficiency has been greatly improved, they have written less code, and many interface effect components have been encapsulated.

In the process of selecting the Vue UI component library, we also collected and sorted out some excellent Vue UI component libraries based on factors such as the number of stars, document richness, frequency of updates, and maintenance on GitHub.

Frameworks that vue can use

1. iView

iView is a set of frameworks based on Vue .js open source UI component library, mainly serving middle and backend products of PC interface. iView's components are relatively complete, updated quickly, and the documentation is very detailed. It is maintained by the company team and is a relatively reliable Vue UI component framework. The iView ecosystem is also doing very well, and there is also an open source iView Admin, which is very convenient for backend work. According to the official website, iView has been used in products of large companies such as TalkingData, Alibaba, Baidu, Tencent, Toutiao, JD.com, Didi Chuxing, Meituan, Sina, Lenovo and other large companies.

iView official website: https://www.iviewui.com/

2. Vux

Vux is developed based on WeUI and Vue2.x Mobile UI component library, mainly serving WeChat pages. The positioning of Vux has been very clear. One is: Vue mobile UI component library, and the other is: WeUI's basic style library. Vux components cover all WeUI content and also extend some commonly used components. For example: Sticky, timeline, v-chart, XCircle. Vux is maintained personally. But the star on GitHub is still very high, reaching 13k. I saw the issue was closed very quickly on GitHub. The basic component usage and effects of the Vux document are explained in place. Many Vux use cases are also displayed on the vux official website. In the development of WeChat pages, there are basically not too many bugs, and the development is relatively smooth.

Vux official website: https://vux.li/

3. Element

Element, a set for developers, designers and products A desktop component library based on Vue 2.0 prepared by the manager. Element is a Vue UI component library maintained by Ele.me's front-end open source. The update frequency is still very high, and a new version will be released basically every week to half a month. The components are complete and basically cover all the components required by the backend. The documentation explains in detail and there are many examples. I have never used it in practice. There are many Element tutorials and articles on the Internet. Element should be a relatively high-quality Vue UI component library.

Element official website: http://element.eleme.io/#/zh-CN

Element has become famous in Vue2. Element has brought a lot of unobtrusive features to Vue3. Components, most of what you need to create a very complex application is already made and ready to use. Element provides mature date and time picker, tree, timeline and calendar components.

Element provides even the tiniest widgets a developer might need when building UI interfaces, from simple animations to framework-wide internationalization systems that can be used with Pair with i18n to create custom translations and even add non-built-in languages.

Element has 11.1k stars on GitHub and is becoming one of the most popular Vue3 UI frameworks on Github with excellent issue management, timely updates, pluggable components and high customization through SCSS variables Performance meets developer expectations.

4. Mint

Mint UI is a mobile component library based on Vue.js, also from the Ele.me front-end project. Mint UI is truly about loading components on demand. You can load only declared components and their style files. Mint UI uses CSS3 to handle various animations to avoid unnecessary redrawing and reflowing of the browser, allowing users to have a smooth and smooth experience. Many video tutorials on the Internet are based on Mint UI. It is very convenient to develop mobile web projects, and the documentation is also very concise and clear. Many page Mint UI components have been encapsulated. You can basically write them according to the examples and implement them with simple adjustments. However, the last code submission on GitHub was on January 16, 2018. I don’t know if the project is relatively stable and has not been updated, or if the project may be abandoned.

Mint UI official website: http://mint-ui.github.io/#!/zh-cn

5、Bootstrap-Vue

Bootstrap-VUE provides the implementation of Bootstrap V4 components and grid system based on vue2, completing extensive and automated WAI ARA accessibility marking. Bootstrap 4 is the latest version. Compared with Bootstrap 3, it has more specific classes and turns some related parts into related components. At the same time, the size of Bootstrap.min.css has been reduced by more than 40%. Bootstrap4 gave up support for IE8 and iOS 6, and now only supports IE9 and above and iOS 7 and above browsers. Back when responsive websites first became popular, Bootstrap was the most popular framework for building mobile-first websites in the world. It can be said that Bootstrap was popular all over the world. Even now, many corporate websites are responsive using Bootstrap. Bootstrap-Vue allows you to achieve Bootstrap effects in Vue.

Bootstrap-Vue official website: https://bootstrap-vue.js.org/

6. Ant Design Vue

Ant Design Vue is Ant Design 3.X implements Vue to develop and serve enterprise-level backend products. Several Ant Design Vue components can be found on GitHub. But in comparison, Ant Design Vue is better. Ant Design Vue shares the Ant Design of React design tool system, implements all Ant Design of React components, and supports modern browsers and IE9 and above (requires polyfills). It allows those who are familiar with Ant Design to get started easily when using Vue.

Ant Design Vue official website: https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

Ant Design Vue is a very mature framework , using Ant Design Vue to create user interfaces is very simple, and the components can be adapted to a variety of icon styles, fonts, and black themes. Ant Design Vue continues to improve its more than 60 components, basically covering most of the project's needs, and making them better and easier to access.

7. AT-UI

AT-UI is a front-end UI component library based on Vue.js 2.0. It mainly Used to quickly develop PC website mid- and back-end products, supporting modern browsers and IE9 and above. AT-UI is more streamlined and implements commonly used components in the background.

AT_UI official website: https://at-ui.github.io/at-ui/#/zh

8、Vant

Vant It is a lightweight and reliable mobile Vue component library. Vant is open sourced by Youzan team and is mainly maintained by Youzan team. Vant Weapp is the mini program version of Vant, a mobile component library of Youzan. Both are based on the same visual specifications and provide consistent API interfaces to help developers quickly build mini program applications. So far, Vant has open sourced 50 components that have been tested by Youzan’s online business. For example: AddressEdit address editing, AddressList address list, Area province and city selection, Card card, Contact contact person, Coupon coupon, GoodsAction product page action point, SubmitBar submission order column, Sku product specification pop-up layer. If you are building a shopping mall and don't care much about the interface and implementing business logic, you can develop quickly using the Vant component library.

Vant official website: https://youzan.github.io/vant/#/zh-CN/intro

9、cube-ui

cube-ui is an exquisite mobile component library based on Vue.js. It is streamlined and refined from Didi’s internal component library and has gone through the test of business for more than a year. Each component has sufficient unit testing to provide guarantee for subsequent integration. Pursue the ultimate in interactive experience. Follow unified design interaction standards to highly restore design effects; interfaces are standardized and usage methods are unified and standardized, making development simpler and more efficient. It supports on-demand introduction and post-compilation, is lightweight and flexible; has strong scalability and can easily implement secondary development based on existing components.

cube-ui official website: https://didi.github.io/cube-ui/#/zh-CN

10、Muse-UI

Muse-UI is based on Vue 2.0's elegant Material Design UI component library. Muse UI has more than 40 UI components to adapt to different business environments. Muse UI requires only a small amount of code to complete theme style replacement. Muse UI can be used to develop complex single-page applications

Muse-UI official website: https://muse-ui.org/#/zh-CN

11, N3-components

N3 component library is built based on Vue.js, allowing front-end engineers and full-stack engineers to quickly build pages and applications. N3-components has more than 60 components, component list, custom styles, supports multiple modeling paradigms (UMD), and is developed using ES6.

N3 official website: https://n3-components.github.io/N3-components/component.html

12, Mand Mobile

Mand Mobile is a Vue mobile UI component library for financial scenarios. It is rich, flexible and practical. It can quickly build high-quality financial products and make complex financial scenarios simple. Mand Mobile contains a rich set of 30 basic components, covering financial scenarios. The extremely easy-to-use components all have detailed documentation and case demonstrations. It draws on the most cutting-edge technology, implements componentization and lightweight, takes into account stability and quality, and strives to achieve financial success. Full coverage of the scene.

Mand Mobile official website: https://didi.github.io/mand-mobile/#/zh-CN/home

13、we-vue

we-vue is a set of mobile-related component libraries based on Vue.js. Combined with the weui.css style library, it encapsulates a series of components and is very suitable for mobile terminal development such as WeChat public accounts. we-vue contains 35 components, with a unit test coverage of over 98%, supports babel-plugin-import, complete online documentation, and detailed online examples.

we-vue official website: https://wevue.org/

14, veui

veui is a Vue developed by Baidu EFE team Enterprise-level UI component library. There is currently no documentation, only demo.

GitHub says it is a work in progress. Then let's wait patiently.

veui official website: https://ecomfe.github.io/veui/components/#/

15、Semantic-UI-Vue

Semantic-UI-Vue is an implementation of the Semantic-UI framework based on Vue.js.

Semantic is a development framework that helps developers build elegant responsive layouts using human-friendly HTML language. Semantic-UI-Vue provides an API similar to Semantic-UI and a set of customizable themes.

Semantic-UI-Vue official website: https://semantic-ui-vue.github.io/#/

When choosing a framework, you must base it on the actual web development situation and the team’s needs Choose based on familiarity. A good UI component library is very important for a Web project

16.Vue.js Material Component Framework — Vuetify.js

https://vuetifyjs. com/zh-Hans

Vuetify is developed entirely according to Material Design specifications. Every component is handcrafted, bringing the best UI tools to your next great app. Development does not stop at the core components in the Google specification. Through the support of community members and sponsors, more components will be designed and made available for everyone to enjoy.

This is mainly a vue ui component that is more popular in foreign countries. It has various functions and is translated into Chinese, but some are in English and the translation is not very good.

PS: Domestic UI Most components only have part of them, and many commonly used header navigation, bottom navigation, listview, and grid tables are not available.

17. BalmUI

BalmUI is a front-end UI component library created by the Balm.js (a front-end workflow tool similar to Vue CLI) team, based on the latest Built with Vue 3, it is ready to use out of the box, highly customizable, and the design style fully follows Google's Material Design design specifications. It is a UI component library with an excellent interactive experience.

BalmUI has released their version 9.0, which supports Vue3. Balm is based on Google's Material Design, which is why it looks familiar. Balm comes with Vue plugins and directives, as well as highly customizable components ranging from simple to complex.

BalmUI official website: https://next-material.balmjs.com/#/

BalmUI is developing very quickly. If you want to use Material Design style, use complex built-in instructions (such as debouncing and UI Ripple) can come in handy when creating custom components, then it is very suitable for Vue3 projects.

18, Wave UI

Wave UI is a responsive, customizable, accessible and touch-friendly UI component framework that comes with more than 40 UI component and is compatible with Vue 3 and Vue 2.

WaveUI is well positioned after the release of Vue3. The development of WaveUI started when Vue3 was still in the alpha stage. The goal is to support its API as soon as it is stable, making it one of the first batch of Vue3 One of the UI frameworks.

Official website: https://antoniandre.github.io/wave-ui/

WaveUI has more than 40 beautiful and responsive components, They range from spinners to calendars and anything in between. WaveUI also offers utility, customizability, and sophisticated integrated form validation capabilities.

The components provided by WaveUI are very beautiful, the animation effects are also very good, and its style is consistent throughout the framework. A great choice for enterprise-grade responsive Vue3 applications.

19, Vuestic

Vuestic is one of the most beautiful open source management panels for Vue. It is good at writing maintainable Vue code and making flexible components and interfaces.

Official website: https://vuestic.dev/

The team recently released the Vue3 version of Vuestic, which includes the popular Vuestic Admin UI and More components. Vuestic highlights its out-of-the-box support for keyboard navigation, a feature popular among the front-end community due to the user experience it provides.

Vuestic offers over 50 components with unique functionality and extensive configurability, responsively designed to work on nearly every screen resolution. Vuestic provides seamless translation support and keyboard accessibility throughout the framework.

Vuestic has established itself as one of the most beautiful Vue3 UI frameworks with its beautiful component catalog. They are now stepping up to create more complex components, such as date pickers or data tables, that are sure to be as creative as their current products.

20, Ionic

Official website: https://ionicframework.com/docs/vue/overview

Ionic is one of the first UI frameworks to provide Vue3 support. Ionic is more inclined to mobile UI, and the team knows how to cater to and maintain an excellent UI framework.

Ionic Vue is a very mature framework with an amazing community, tons of StackOverflow questions, enterprise support, and a large Slack channel with core members. Makes it easy to get support when you need help.

The Ionic Vue framework has 45k stars on Github and has been used by many large companies, including Airbus and Electronic Arts, and the Ionic team is known for being good at maintaining their UI frameworks. Well known, this is a great choice now and in the future.

21. Naive UI

Official website: https://www.naiveui.com/zh-CN/os-theme

Naive UI Posted on Twitter and then retweeted by Vue's creator, it brought a lot of traffic to the nascent component library. Now, Naive UI has achieved 5.1k stars on GitHub in less than three months.

It provides over 70 well-made components that can be seamlessly integrated into almost any type of Vue3 application. Naive's components have excellent performance, are highly customizable, and support TypeScript, providing a great development experience.

The documentation site is easy to navigate and features complete customization inputs to help developers preview how components will look in their own themes. You can use these options to create your own complete theme with color patterns and fonts. This custom theme can be downloaded and easily added to the application to override the defaults.

22, Quasar

Official website: https://next.quasar.dev/

Quasar is a complete, performance-centered A framework to help build Vue user interfaces (SPA, PWA, SSR, mobile and desktop), in addition to Vue, Node and Webpack, Quasar also includes Cordova, Capacitor and Electron, which can help build desktop and mobile experiences without having to learn them separately .

#The Quasar framework seems to be based on Material Design, but once you get started, everything is very customizable to fit your own design system.

Support for Vue3 is also coming quickly, and Quasar has released almost all v1 components, plugins and directives. In addition, they have released composable components to help developers gain deeper understanding of the Quasar API.

23, PrimeVUE

Official website: https://primefaces.org/primevue/showcase/#/setup

PrimeVUE is also the earliest support One of the best frameworks for Vue3 and it does not disappoint. With over 80 components, PrimeVUE proves itself to be one of the frameworks with the widest range of components on this list.

Components include password forms with gauges, sliders, trees, graphs, split buttons, knobs, charts, and more. PrimeVUE even integrates with Vuelidate, a form validation library. It comes with pre-made themes and provides a mature visual editor to help developers customize their own themes.

[Recommended related video tutorials: vuejs entry tutorial, web front-end entry]

The above is the detailed content of What frameworks can be used for vue?. For more information, please follow other related articles on the PHP Chinese website!