几款实用的VUE移动端UI框架

JavaScript010

几款实用的VUE移动端UI框架,第1张

文档地址:https://doc.vux.li/zh-CN/

演示地址:https://vux.li/demos/v2/?x-page=v2-doc-home#/

基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式(下拉刷新上拉加载组件不再维护,其余组件相对丰富)

文档地址:https://wangdahoo.github.io/vonic-documents/#/

演示地址:https://wangdahoo.github.io/vonic/docs/#/home

 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约

文档地址:https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

演示地址:https://didi.github.io/cube-ui/#/zh-CN/example

滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库;组件效果优;视觉效果很棒

文档地址:http://mint-ui.github.io/docs/#/

演示地址:http://elemefe.github.io/mint-ui/#/

最接近原生APP体验的高性能前端框架

文档地址:https://youzan.github.io/vant/#/zh-CN/intro

演示地址:https://youzan.github.io/vant/mobile.html#/zh-CN/

有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件

文档:http://nutui.jd.com/#/intro

演示地址:http://nutui.jd.com/demo.html#/index

一套京东风格的轻量级移动端Vue组件库

特性

跨平台,自动转微信小程序组件(稍后上线,敬请期待)

30+ 京东移动端项目正在使用

基于京东APP 7.0 视觉规范

支持按需加载

详尽的文档和示例

支持定制主题

支持多语言(国际化)

支持 TypeScript

支持服务端渲染(Vue SSR)

单元测试加持

配套有基于Webpack的构建工具,可快速创建已内置本组件库的Vue工程

前几天开发公司产品官网的时候,遇到了一些适配问题,当时选择用postcss-px-to-viewport方案来实现适配,效果也很显著,每个页面都适配到位

step1. vue安装postcss-px-to-viewport插件。

step2. 配置适配插件的参数

使用PostCss配置文件时,在<u>postcss.config.js</u>添加如下配置:

或者在<u>package.json</u>中,添加以下配置:

说明下几个重要参数的使用:

适配存在的问题点:

注:执行指令后在package.json的devDependencies分支可以看到相应的版本,

2. 在main.js中导入lib-fixible.

如果未使用vue的伙伴可以直接在前端中直接使用阿里的CDN,如下:

注:此处是postcss-px2rem而不是px2rem-loader,网上很多文章都引用是后者,会导致在配置时候无法成功配置。

在vue.config.js中配置如下配置即可,如未有此文件请自行搜索查询创建配置。

集成以上两个步骤,基本前端即可根据屏幕自行适配,但可能有部分伙伴会遇到data-dpr始终为1,遇到这个情况多半是因为在html头中自己设置了<meta name="viewport" ...>,

查看lib-flexble做了配置,默认会根据屏幕为我们添加头文件的,如果自行设置,那么只会进行修改设置的值而已,并不会再添加,所以导致data-dpr始终为1,所以把<metaname="viewport" ...>去除.