Ui frameworks available for vuejs mobile terminal: 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, etc.
The operating environment of this tutorial: windows7 system, vue2.9.6 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 formal use. After the development team used the Vue.js framework and UI component library, the development efficiency was greatly improved, they wrote 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.
iView is a set of open source UI component libraries based on Vue.js, which mainly serves mid- and back-end products for PC interfaces. iView's components are relatively complete, updated quickly, and the documentation is very detailed. Maintained by the company team, the 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/.
Vux is based on WeUI and Vue2 A mobile UI component library developed by .x, 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 by individuals. 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/.
Element, a set for developers, A desktop component library based on Vue 2.0 prepared by designers and product managers.
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.
Mint The UI is based on the Vue.js mobile component library, which is 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 of the 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, and half a year has passed so far. I don’t know if the project is relatively stable and has not been updated, or if the project may be abandoned. We will continue to pay attention to the dynamics of Mint UI.
Mint UI official website: http://mint-ui.github.io/.
Bootstrap -VUE provides the implementation of Bootstrap V4 components and grid system based on vue2, completing extensive and automated WAI ARA accessibility markup. uiv is a Bootstrap 3 implementation based on Vue2. 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/
uiv official website: https://uiv.wxsm.space/.
Ant Design Vue is the Vue implementation of Ant Design 3.X. It develops and serves 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.
AT- UI is a front-end UI component library based on Vue.js 2.0. It is mainly used to quickly develop middle and back-end products for PC websites. It supports 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/.
Vant is a light A large and reliable mobile Vue component library. Vant is open sourced by Youzan team and is mainly maintained by Youzan team. Vant Weapp is a 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, 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/.
cube-ui Yes 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/.
Muse- The 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.
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.
Mand Mobile is a Vue mobile for financial scenarios The terminal UI component library is rich, flexible and practical, allowing you to 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 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/.
we-vue It 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/.
veui is a software developed by Baidu EFE Vue enterprise-level UI component library developed by team. 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/.
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.
vue- Beauty is a PC-side UI component library based on vue.js and ant-design styles, designed to help developers improve product experience and development efficiency, and reduce maintenance costs. vue-beauty contains a wealth of components, covering common scenarios, based on vue component development, data-driven views, encapsulating complexity, providing a simple and friendly API, and based on ant design style optimization.
vue-beauty official website: https://fe-driver.github.io/.
NutUI is a JD style The mobile Vue component library develops and serves enterprise-level front, middle and back-end products for mobile web interfaces. The NutUI component library supports cross-platform, automatically converts to WeChat applet components (will be launched later, so stay tuned), is being used by 30 JD mobile terminal projects, is based on JD APP 7.0 visual specifications, supports on-demand loading, detailed documentation and examples, supports Customized theme, supports multi-language (internationalization), supports TypeScript, supports server-side rendering (Vue SSR), unit testing support, and is equipped with a construction tool based on Webpack, which can quickly create a Vue project with built-in this component library.
NutUI official website: https://nutui.jd.com/#/index.
When choosing a framework, you must choose it based on the actual web development situation and the familiarity of the team. A good UI component library is too important for a web project. A good UI component library can achieve twice the result with half the effort.
Related recommendations: "vue.js Tutorial"
The above is the detailed content of What UI framework is used for vuejs mobile terminal?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
