module.exports = {
presets: [
'@vue/app'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}

npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible

  

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
plugins: {
autoprefixer: {}
},
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5,
propList: ['*'],
selectorBlackList: ['van-circle__layer']
})
]
}
}
}
};

import 'amfe-flexible';

这样整个rem适配就完成了。

案例:以Vant组件库中的Button按钮为例:
在main.js中引入

//按需引用
import { Button } from 'vant';
Vue.use(Button);
//或者全局引用
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

或者在单文件按需引入

<script>
import { button } from 'vant';
export default {
components:{
'van-button':button
//或者下面的方式
//[button.name]:button }
}
</script>

在结构中

<template>
<div class="home">
<div class='aaa'>111</div>
<van-button disabled type="primary" class="btn">主要按钮</van-button>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<script>
import { button } from 'vant';
export default {
components:{
'van-button':button
//或者下面的方式
//[button.name]:button }
}
</script>
<style lang="scss">
.aaa{
width:187.5px;
background: red;
height:20px;
font-size:18px;
}
.btn{
width: 375px;
height: 100px;
font-size: 18px;
}
</style>

结果如下,仔细看样式,变成了rem

vue-cli3移动端自适应配置 Vant组件库的更多相关文章

  1. Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】

    Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...

  2. 墨刀联合有赞Vant组件库,让你轻松设计出电商原型

    继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 有赞Vant组件库 (做电商的宝宝要捂嘴笑了)   Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收 ...

  3. HBuilderX使用Vant组件库

    HBuilderX使用Vant组件库 HBuilderX是一款由国人开发的开发工具,其官网称其为轻如编辑器.强如IDE的合体版本.但是官方的社区中关于Vant组件的安装大多都是针对微信小程序开发安装V ...

  4. 如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源

    1.前言 关于微信内部正在使用的网络层封装库Mars开源的消息,1个多月前就已满天飞(参见<微信Mars:微信内部正在使用的网络层封装库,即将开源>),不过微信团队没有失约,微信Mars ...

  5. 【转】如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源

    网上看到关于微信官方的跨平台跨业务的终端基础组件Mars的介绍文章,转载这这里.源代码: https://github.com/Tencent/mars作者:男人链接:https://zhuanlan ...

  6. 微信小程序引入Vant组件库

    前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...

  7. 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  8. 移动端Vant组件库REM适配

    REM适配 基础配置 在页面布局之前,对REM进行配置,以适配移动端特点. 官方参考 Vant文档---->快速上手---->进阶用法---->Rem适配----> Vant ...

  9. vue - 搭建 webapp 自适应项目-使用 vant 组件库 并 可自动调节大小

    1.创建个vue 项目,这里不详细写怎么创建,参考 vue - 指令创建 vue工程 - 岑惜 - 博客园 (cnblogs.com) https://www.cnblogs.com/c2g52013 ...

随机推荐

  1. (数据科学学习手札102)Python+Dash快速web应用开发——基础概念篇

    本文示例代码与数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的新系列教程Python+Dash快 ...

  2. 发现一个怪象windows 7系统上老是丢包windows 10网络正常

    不知何故障,同一个局域网,windows 10系统上不丢包,windows 7系统老是丢包,不知是不是这二个系统的差区别,还是大家都有这样的情况. 相互PC之间ping也又不丢包,只有windos 7 ...

  3. 十一:WEB渗透必懂知识点

    简述WEB层面上的漏洞以及类型,具体漏洞的危害等级, 如何形成以及如何发现 右边权重大于左边 CTF,SRC,红蓝对抗,实战 简要说明以上漏洞危害 简要说课以上漏洞等级划分 简要说明以上漏洞重点内容 ...

  4. MySQL select 语句指定字段查询

    指定字段查询 SELECT 语法 SELECT [ALL | DISTINCT] {* | table.* | [table.field1[as alias1][,table.field2[as al ...

  5. 入门OJ:郭嘉的消息传递

    题目描述 我们的郭嘉大大在曹操这过得逍遥自在,但是有一天曹操给了他一个任务,在建邺城内有N(<=1000)个袁绍的奸细 将他们从1到N进行编号,同时他们之间存在一种传递关系,即若C[i,j]=1 ...

  6. USB充电限流IC,可调到4.8A,输入 6V关闭

    随着手机充电电流的提升,和设备的多样化,USB限流芯片就随着需求的增加而越来越多,同时为了更好的保护电子设备,需要进行一路或者多路的负载进行限流. 一般说明 PW1503,PW1502是超低RDS(O ...

  7. 大数据系列2:Hdfs的读写操作

    在前文大数据系列1:一文初识Hdfs中,我们对Hdfs有了简单的认识. 在本文中,我们将会简单的介绍一下Hdfs文件的读写流程,为后续追踪读写流程的源码做准备. Hdfs 架构 首先来个Hdfs的架构 ...

  8. 浅析鸿蒙中的 Gn 与 Ninja(一)

    目录: Ninja简介 make 的 3 个特性 举例说明Ninja 的用法 如何向构建工具 Ninja 描述构建图 后记 鸿蒙系统的编译构建是基于 Gn 和 Ninja 完成的,那么 Gn 和 Ni ...

  9. C指针的这些使用技巧,掌握后立刻提升一个Level

    这是道哥的第016篇原创 关注+星标公众号,不错过最新文章 目录 一.前言 二.八个示例 1. 开胃菜:修改主调函数中的数据 2. 在被调用函数中,分配系统资源 2.1 错误用法 2.2 正确用法 3 ...

  10. Golang 单元测试:有哪些误区和实践?

    https://mp.weixin.qq.com/s/k8WNWpCIVl4xTmP3TQ_gxQ