Home Web Front-end Vue.js What are the vue front-end UI frameworks?

What are the vue front-end UI frameworks?

Dec 11, 2020 am 10:40 AM
ui framework vue front end

Vue front-end UI frameworks include: Element, iview, vuetify, vue-strap, cube-ui, buefy, vue-beauty, at-ui, Vue-Blu, vue-storefront, Vux, Mint UI, Vant etc.

What are the vue front-end UI frameworks?

The operating environment of this article: windows10 system, vue 2.0, thinkpad t480 computer.

Related recommendations: "vue.js Tutorial"

vue front-end UI framework

1: Element

Official website address: http://element-cn.eleme.io/#/zh-CN

Introduction: The button component of element ui framework, this UI framework open sourced by Ele.me front-end, once As soon as it came out, it won the hearts of a large number of programmers. On github, the star rating is as high as 29.8k, which already explains everything. It is more than enough for developing PC-side pages. If you are a Vue developer but have never used element UI, then you are definitely not a qualified Vue developer.

2: iview

Official website address: https://www.iviewui.com/

Introduction: iView is a set of open source UI component libraries based on Vue.js. Mainly serving mid- and back-end products for PC interfaces. The Vue component development model using a single file is developed based on npm webpack babel. It supports ES2015 high-quality, feature-rich and friendly API, allowing free and flexible use of space. It is developed and maintained by TalkingData, and is used by many well-known Internet companies.

3: vuetify

Official website address: https://vuetifyjs.com/zh-Hans/

Introduction: Vuetifyjs provides UI layout according to material design specifications. V 1.0 Alpha version provides over 80 reusbale components with an easy-to-remember semantic design based on type attributes with simple and clear names type-as-you. There are over 7K stars on GitHub.

Four: vue-strap

Official website address: http://yuche.github.io/vue-strap/

Introduction: The Bootstrap component based on Vue.js The repository contains a collection of native Vue.js components based on Bootstrap markup and CSS. So there is no need for jQuery and Bootstrap JavaScript files. The only thing you need to depend on is: Vue.js Bootstrap CSS. VueStrap does not depend on a very precise Bootstrap version. If you like bootstrap but don’t want to change the development method of jquery, this is the best choice.

五:cube-ui

Official website address: https://didi.github.io/cube-ui/#/zh-CN/example

Introduction: cube -ui is an exquisite mobile component library based on Vue.js developed by Didi team. 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.

6: buefy

Official website address: https://buefy.github.io/#/

Introduction: Buefy is a lightweight UI based on Bulma and Vue.js Components, which provide ready-to-use lightweight components. Although the component selection is limited, it is worth trying.

Seven: vue-beauty

Official website address: https://fe-driver.github.io/vue-beauty/#/components/button

Introduction: Based on Ant design's beautiful vue component library; vue-beauty is a set of PC-side UI component libraries based on vue.js and ant-design styles, designed to help developers improve product experience and development efficiency, and reduce maintenance costs.

Eight: at-ui

Official website address: https://at-ui.github.io/at-ui/#/zh

Introduction: AT-UI It is a modular front-end UI framework that develops fast and powerful web interfaces based on Vue.js. Built specifically for desktop applications, AT-UI provides a set of npm webpack babel front-end development workflows. The all-English documentation may be challenging for users, but it provides a decent clean and tidy UI component.

9: Vue-Blu

Official website address: https://chenz24.github.io/vue-blu/#/

Introduction: Vue-Blu is based on Vuejs and an open source UI component library developed by Bulma. It aims to provide a fast and flexible solution for PC-side front-end development (especially middle and back-end products). Comprehensive, flexible and powerful UI components with friendly API.

Ten: vue-storefront

Official website address: http://vuestorefront.io/

Introduction: Vue.js Storefront - a framework that integrates PWA into e-commerce, Support offline access

Eleven: Vux

Official website address: https://vux.li/

Introduction: VUX (pronunciation [v'ju:z], the same views) is a mobile UI component library developed based on WeUI and Vue (2.x), which mainly serves WeChat pages.

Twelve: Mint UI

Official website address: http://mint-ui.github.io

Introduction: Mint UI contains rich CSS and JS components, which can Meet daily mobile development needs. Through it, you can quickly build a page with a unified style and improve development efficiency.

Thirteen: Vant

Chinese documentation: https://youzan.github.io/vant/#/zh-CN/intro

Introduction: Youzan front-end team The Vue component library implemented based on Youzan's unified specifications provides a complete set of UI basic components and business components.

Fourteen: Muse-ui

Official website address: https://muse-ui.org/#/zh-CN

Muse UI is developed based on Vue2.0. Vue2.0 is one of the fastest front-end frameworks at the moment. It is small, API-friendly, and can be used to develop complex single-page applications.

You can choose the framework that suits your project and use it

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: 2020 latest 5 vue.js video tutorial selections

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What are the vue front-end UI frameworks?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use bootstrap in vue How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

How to add functions to buttons for vue How to add functions to buttons for vue Apr 08, 2025 am 08:51 AM

You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.

How to reference js file with vue.js How to reference js file with vue.js Apr 07, 2025 pm 11:27 PM

There are three ways to refer to JS files in Vue.js: directly specify the path using the <script> tag;; dynamic import using the mounted() lifecycle hook; and importing through the Vuex state management library.

How to use watch in vue How to use watch in vue Apr 07, 2025 pm 11:36 PM

The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.

What does vue multi-page development mean? What does vue multi-page development mean? Apr 07, 2025 pm 11:57 PM

Vue multi-page development is a way to build applications using the Vue.js framework, where the application is divided into separate pages: Code Maintenance: Splitting the application into multiple pages can make the code easier to manage and maintain. Modularity: Each page can be used as a separate module for easy reuse and replacement. Simple routing: Navigation between pages can be managed through simple routing configuration. SEO Optimization: Each page has its own URL, which helps SEO.

How to return to previous page by vue How to return to previous page by vue Apr 07, 2025 pm 11:30 PM

Vue.js has four methods to return to the previous page: $router.go(-1)$router.back() uses <router-link to="/" component window.history.back(), and the method selection depends on the scene.

How to use vue traversal How to use vue traversal Apr 07, 2025 pm 11:48 PM

There are three common methods for Vue.js to traverse arrays and objects: the v-for directive is used to traverse each element and render templates; the v-bind directive can be used with v-for to dynamically set attribute values ​​for each element; and the .map method can convert array elements into new arrays.

How to query the version of vue How to query the version of vue Apr 07, 2025 pm 11:24 PM

You can query the Vue version by using Vue Devtools to view the Vue tab in the browser's console. Use npm to run the "npm list -g vue" command. Find the Vue item in the "dependencies" object of the package.json file. For Vue CLI projects, run the "vue --version" command. Check the version information in the <script> tag in the HTML file that refers to the Vue file.

See all articles