VUE移动端及PC端适配方案
首先,我们先使用vue-cli创建一个初始化的vue项目。当项目创建好以后,我们在根目录下新建一个 vue.config.js ,想必大家也都懂这个文件是干什么的。
现在市面上移动设备大小各异,为了统一的产品形态和良好的用户体验,所以在做移动H5项目时,需要考虑到移动端适配问题。本文就讲讲 Vue +H5项目配置 rem 移动端适配。
font-size == viewport width),之后的布局单位全部使用rem来实现整体缩放。在使用动态 rem 布局的移动端页面中,很小的宽度如border-width 依然使用px,因为即使使用rem,当rem小于1px 时,依然会被浏览器当做1px 使用。
第三方库用的一般是使用px单位,无法使用rem适配不同设备的屏幕。解决办法:使用px2rem-loader插件将第三方ui库的px转换成rem单位。
vuevw+rem方案引入
1、vuevw+rem方案引入的步骤如下:安装postcss-px-to-viewport插件,在Vue项目中使用vw+rem方案,需要通过postcss-px-to-viewport插件将px单位转换为vw或rem单位。可以使用npm或yarn等工具进行安装。
2、创建rem文件 3在main.js中引入适配文件 import ./util/rem 4到vue.config.js中配置插件 注意: 此方法生效,是根据窗口来放大缩小的,但是缩小之后的效果没有那么理想。
3、现在市面上移动设备大小各异,为了统一的产品形态和良好的用户体验,所以在做移动H5项目时,需要考虑到移动端适配问题。本文就讲讲 Vue +H5项目配置 rem 移动端适配。
4、手机端页面开发,使用vue,UI框架用vant,设计稿是750px,单位用rem vant是按照375px设计稿开发,为单位的,如果配置根字体大小为35,设计稿就无法还原,配置75,vant组件就变小了。
5、项目中引用的图片都直接引用静态目录static下的图片,如果图片放到src\assets目录下,项目中引用图片的相对路径,在vue打包的时候会改变图片的引用名称,所以会出现访问不到图片的情况。
6、具体实现方式可以参考Vue官方文档中的异步组件部分。需要注意的是,因为Element组件库本身就是一款基于Vue的组件库,所以在引入多个版本的Element时,还需要考虑它们的Vue版本兼容性问题,以避免产生其他的不兼容问题。
手机端vue+vant+rem项目适配750px设计稿的配置
vant是按照375px设计稿开发,为单位的,如果配置根字体大小为35,设计稿就无法还原,配置75,vant组件就变小了。
Vue +H5项目配置 rem 移动端适配。提示: 如果项目使用了第三方的UI组件库(文本以 VantUI 为例),而又不想让组件库的 px 转为 rem ,则需要安装 postcss-px2rem-exclude 。
创建rem文件 3在main.js中引入适配文件 import ./util/rem 4到vue.config.js中配置插件 注意: 此方法生效,是根据窗口来放大缩小的,但是缩小之后的效果没有那么理想。
vuevw+rem方案引入的步骤如下:安装postcss-px-to-viewport插件,在Vue项目中使用vw+rem方案,需要通过postcss-px-to-viewport插件将px单位转换为vw或rem单位。可以使用npm或yarn等工具进行安装。
vue插件都有哪些UI组件和框架,能告诉我一下吗?
elementUI iview 这个UI框架是对标elementUI而生的,最大优点是官方有桌面版配置工具,只需使用鼠标就可以构建一个基于iview+vue的应用,免去手巧命令的烦恼。最新的版本为x。
vue只是一个js库,不算框架,他不限制你使用使用UI框架,理论上你可以使用任意UI框架。常见的vue的UI框架有:elementUI(饿了么的UI框架),Vux(微信UI风格),vue-strap,Vue-Blu等等。
cube-ui 滴滴团队开源。扩展性强,可以方便地基于现有组件实现二次开发。体验极致,以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。
vue3.0+vite实现移动端自适应布局
有时候会使用100vh,刚进入页面时是合适的,但是若果页面高度是动态添加的,那么当页面实际高度超过100vh的时候,100vh的高度设置就不够了。
step vue安装postcss-px-to-viewport插件。
在Vite中,启动本地服务器,是不需要提交编译文件的, 而是在浏览器请求对应URL时, 再提供文件,实现了真正的路由懒加载, 这个比起Webpack节省了不少时间。
等价于:Vue x的异步组件加载函数将不再接收 resolve 和 reject ,而且必须始终返回 Promise 。也就是说,工厂函数接收 resolve 回调的方式定义异步组件在 Vue x 不能使用了。