What are the vue front-end UI frameworks?
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.
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



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.

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.

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.

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.

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.

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.

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.

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.
