vue-cli3移动端自适应配置 Vant组件库
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组件库的更多相关文章
- Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...
- 墨刀联合有赞Vant组件库,让你轻松设计出电商原型
继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 有赞Vant组件库 (做电商的宝宝要捂嘴笑了) Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收 ...
- HBuilderX使用Vant组件库
HBuilderX使用Vant组件库 HBuilderX是一款由国人开发的开发工具,其官网称其为轻如编辑器.强如IDE的合体版本.但是官方的社区中关于Vant组件的安装大多都是针对微信小程序开发安装V ...
- 如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源
1.前言 关于微信内部正在使用的网络层封装库Mars开源的消息,1个多月前就已满天飞(参见<微信Mars:微信内部正在使用的网络层封装库,即将开源>),不过微信团队没有失约,微信Mars ...
- 【转】如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源
网上看到关于微信官方的跨平台跨业务的终端基础组件Mars的介绍文章,转载这这里.源代码: https://github.com/Tencent/mars作者:男人链接:https://zhuanlan ...
- 微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
- 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求
最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...
- 移动端Vant组件库REM适配
REM适配 基础配置 在页面布局之前,对REM进行配置,以适配移动端特点. 官方参考 Vant文档---->快速上手---->进阶用法---->Rem适配----> Vant ...
- vue - 搭建 webapp 自适应项目-使用 vant 组件库 并 可自动调节大小
1.创建个vue 项目,这里不详细写怎么创建,参考 vue - 指令创建 vue工程 - 岑惜 - 博客园 (cnblogs.com) https://www.cnblogs.com/c2g52013 ...
随机推荐
- SQL操作符的优化
操作符优化 IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格. 但是用IN的SQL性能总是比较低的,从ORACLE执行的步骤来分析用IN的SQ ...
- MySQL 标识符到底区分大小写么——官方文档告诉你
最近在阿里云服务器上部署一个自己写的小 demo 时遇到一点问题,查看 Tomcat 日志后定位到问题出现在与数据库服务器交互的地方,执行 SQL 语句时会返回 指定列.指定名 不存在的错误.多方查证 ...
- fastjson复现项目代码
详情请见:https://www.cnblogs.com/yunmuq/p/14268028.html 以下是代码 // FastjsonDemo.java package test; import ...
- 想学Python不知如何入门,教你!
一.入门引导 想必有很多小伙伴想学习Python,又不知道如何入门,总觉得学习一定要头悬梁,锥刺股!NO,今天给大家分享下如何轻松入门Python! 首先,我们要学习Python,那一定要和你 ...
- 【Java基础】Eclipse 和数组
Eclipse 和数组 Eclipse 安装和使用 ... 数组的概述 数组(Array):是多个相同类型数据按一定顺序排列的集合,并使用一个名字命名,并通过编号的方式对这些数据进行统一管理. 数组相 ...
- PAT甲级 1155 Heap Paths (30分) 堆模拟
题意分析: 给出一个1000以内的整数N,以及N个整数,并且这N个数是按照完全二叉树的层序遍历输出的序列,输出所有的整条的先序遍历的序列(根 右 左),以及判断整棵树是否是符合堆排序的规则(判断是大顶 ...
- 【Linux】find删除365天以前的文件详细解析
find . -name "*" -mtime +365 -exec rm -rf {} \; -mtime +365 文件被修改的时间,最后一次发生到现在365天 -atime ...
- CSS实现迷你键盘
最近做了一个迷你键盘的dome,这里分享给大家 dome下载地址(点击下载) 代码如下: <!DOCTYPE html> <html lang="en" > ...
- 从零开始学spring源码之xml解析(二):默认标签和自定义标签解析
默认标签: 上一篇说到spring的默认标签和自定义标签,发现这里面东西还蛮多的.决定还是拆开来写.今天就来好好聊聊这两块是怎么玩的,首先我们先看看默认标签: private void parseDe ...
- JavaScript中函数的调用!
JavaScript中函数的调用! 1 普通函数 // 1 普通函数 function fn() { console.log(123); } // 函数名 + 一个小括号! 或者 函数名.call() ...