演示地址: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" ...>去除.