Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "which ui framework is used by vuejs mobile terminal". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Vuejs mobile available ui framework: 1, iView;2, Vux;3, Element;4, Mint UI;5, Bootstrap-VUE;6, Ant Design Vue;7, AT-UI;8, Vant;9, cube-ui;10, Muse-UI and so on.

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

Vue is a lightweight, high-performance, componentized MVVM library. API is simple and easy to use. Since the launch of Vue, it has been recognized by many Web developers. In the company's Web front-end project development, a number of projects use Vue-based UI component framework development, and put into formal use. After using the Vue.js framework and UI component library, the development team has greatly improved the development efficiency, wrote less code, and many interface effects components have been packaged.

In the process of selecting Vue UI component library, some excellent Vue UI component libraries are also collected and sorted out on GitHub according to the number of Vue UI, the richness of documents, the frequency of updates and maintenance and other factors.

1. IView UI component library

IView is a set of open source UI component library based on Vue.js, which mainly serves the middle and background products of PC interface. The components of iView are relatively complete, updated quickly, and the documentation is very detailed. Reliable Vue UI component framework maintained by the company team

. IView ecology is also doing very well, and there is an open source iView Admin, which is very convenient to do backstage. According to the official website, iView has been used in the products of TalkingData, Alibaba, Baidu, Tencent, Jinri Toutiao, JD.com, DiDi, Meituan, Sina, Lenovo and other large companies.

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

2. Vux UI component library

Vux is a mobile UI component library based on WeUI and Vue2.x, which mainly serves Wechat pages. The positioning of Vux has been very clear, one is: Vue mobile UI component library, the other is: WeUI basic style library. The components of Vux cover all the contents of WeUI and extend some commonly used components. For example: Sticky, timeline, v-chart, XCircle.

Vux is personally maintained. But the star on GitHub is still very high, reaching 13k. It was quick to see the shutdown of issue on GitHub. The basic component usage and effects of Vux documents are explained in place.

Many use cases of Vux are also shown on the vux official website. In Wechat page development, there is basically not too much bug, the development is relatively smooth.

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

3. Element UI component library

Element, a desktop component library based on Vue 2.0 for developers, designers, and product managers.

Element is an open source Vue UI component library maintained at the front end of ele.me. It is updated frequently and a new version will be released every week to half a month. The components are complete, basically covering all the components needed in the background, the documentation is detailed, and the examples are also rich. Not actually used, online Element tutorials and articles are more.

Element should be a high quality Vue UI component library.

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

4. Mint UI component library

Mint UI's Vue.js-based mobile component library also comes from the front-end project of ele.me. Mint UI is really an on-demand loading component. You can load only declared components and their style files. Mint UI uses CSS3 to handle various dynamic effects to avoid unnecessary redrawing and rearrangement of browsers, thus giving users a smooth and smooth experience.

Many online video tutorials are based on Mint UI, the development of mobile web project is still very convenient, the document is also very brief and clear. Many page Mint UI components have been packaged, can basically be written according to the example, a simple adjustment can be implemented.

However, it has been half a year since the last code submission on GitHub was on January 16, 2018. I do not know whether the project is relatively stable and has not been updated, or whether the project is likely to be abandoned. We will continue to keep an eye on Mint UI.

Mint UI official website: http://mint-ui.github.io/.

5. Bootstrap-Vue UI component library

Bootstrap-VUE provides the implementation of vue2-based Bootstrap V4 components and grid systems, completing extensive and automated WAI ARA accessibility markup. Uiv is a Bootstrap 3 implementation based on Vue2. Bootstrap 4 is the latest release, which has more specific classes than Bootstrap3 and turns some related parts into related components. At the same time, the volume of Bootstrap.min.css has been reduced by more than 40%.

Bootstrap4 has given up support for IE8 and iOS 6 and now only supports browsers above IE9 and iOS 7. Back in the early days when responsive websites were popular, Bootstrap was the most popular framework for building mobile priority websites in the world. Bootstrap can be said to be popular all over the world.

Even now many corporate websites are responsive to Bootstrap. Bootstrap-Vue allows you to achieve the Bootstrap effect in Vue.

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

Uiv official website: https://uiv.wxsm.space/.

6. Ant Design Vue UI component library

Ant Design Vue is the Vue implementation of Ant Design 3.x, which develops and serves enterprise back-end products. Several Vue components of Ant Design can be found on GitHub. By comparison, however, Ant Design Vue is better.

Ant Design Vue shares the Ant Design of React design tool architecture, implements all the components of Ant Design of React, and supports modern browsers and IE9 and above (polyfills is required). It makes it easy for those who are familiar with Ant Design to use Vue.

Ant Design Vue official website: https://vuecomponent.github.

7. AT-UI UI component library

AT-UI is a front-end UI component library based on Vue.js 2.0, which is mainly used for the rapid development of background products in PC websites, supporting modern browsers and IE9 and above. AT-UI is more concise and implements the components commonly used in the background.

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

8. Vant UI component library

Vant is a lightweight and reliable mobile Vue component library. Vant is open source with a like team, and the main maintenance is also a like team. Vant Weapp is a Mini Program version of Vant, a mobile component library. Based on the same visual specification, they provide a consistent API interface to help developers quickly build Mini Program applications. So far, Vant has opened up 50 + components that have been tested by the online business.

For example, AddressEdit address editing, AddressList address list, Area province and city selection, Card card, Contact contact, Coupon coupon, GoodsAction merchandise page action point, SubmitBar submission order bar, Sku commodity specification bullet layer. If you do not care too much about the interface and realize the business logic, it is very fast to develop with Vant component library.

Vant official website: https://youzan.github.io/.

9. Cube-ui UI component library

Cube-ui is an exquisite mobile component library based on Vue.js. Simplified and refined from Didi's internal component library, it has experienced the test of the business for more than a year, and each component has sufficient unit testing to provide guarantee for subsequent integration. Pursue the extreme in terms of interactive experience. Follow the unified design interaction standard, highly restore the design effect; interface standardization, unified standard use, development is more simple and efficient. It supports on-demand introduction and post-compilation, lightweight and flexible, strong expansibility, and can easily realize secondary development based on existing components.

Cube-ui official website: https://didi.github.io/.

10. Muse-UI UI component library

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 only needs a small amount of code to complete the 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 UI component library

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

N3 official website: https://n3-components.github.

12 、 Mand Mobile

Mand Mobile is a Vue mobile UI component library for financial scenarios, which is rich, flexible and practical. It can quickly build high-quality financial products and make complex financial scenarios simple. Mand Mobile contains rich basic components of 30 +, covering financial scenarios, and extremely easy-to-use components all have detailed documentation and case demonstrations, learn from cutting-edge technology, achieve lightweight components, take into account stability and quality, and strive to achieve full coverage of financial scenes.

Mand Mobile official website: https://didi.github.io/.

13. We-vue UI component library

We-vue is a set of Vue.js-based mobile component library, combined with weui.css style library, encapsulates a series of components, very suitable for Wechat official account and other mobile development. We-vue contains 35 + components, unit test coverage of more than 98%, support for babel-plugin-import, complete online documentation, detailed online examples.

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

14. Veui UI component library

Veui is a Vue enterprise UI component library developed by Baidu EFE team. There are no documents yet, only demo. GitHub says it's a work in progress. Then let's be patient.

Veui official website: https://ecomfe.github.io/.

15. Semantic-UI-Vue UI component library

Semantic-UI-Vue is based on Vue.js 's implementation of the Semantic-UI framework. As a development framework, Semantic helps developers build elegant and responsive layouts using the 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.

16 、 vue-beauty

Vue-beauty is a PC-side UI component library based on vue.js and ant-design style, which aims to help developers improve product experience and development efficiency and reduce maintenance costs. Vue-beauty contains a wealth of components, covering common scenarios, component-based development based on vue, data-driven view, encapsulating complexity, providing simple and friendly api, optimization based on ant design style.

Vue-beauty official website: https://fe-driver.github.io/.

17. NutUI component library

NutUI is a set of JD.com-style mobile Vue component library, which develops and serves enterprise-class front, middle and background products with mobile Web interface. NutUI component library supports cross-platform, automatic transfer to WeChat Mini Programs components (launch later, please look forward to), 30 + JD.com mobile project in use, based on JD.com APP 7.0visual specification, support for on-demand loading, detailed documentation and examples, support for customized themes, support for multiple languages (internationalization), support for TypeScript, support for server rendering (Vue SSR), unit test support, with Webpack-based build tools You can quickly create Vue projects that have built-in this component library.

NutUI official website: https://nutui.jd.com/#/index.

When choosing a framework, be sure to choose according to the actual Web development and the familiarity of the team. A good UI component library is too important for a Web project. A good UI component library can get twice the result with half the effort.

This is the end of the content of "which ui framework is used by vuejs mobile terminal". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.