Vant:轻量、可靠的移动端 Vue 组件库 (推荐使用)
通过vue-cli搭建完项目后开始进行Vant配置
第一步:安装vant
npm i vant -S
yarn add vant
第二步:引入组件 (推荐自动按需引入组件)
① 安装babel-plugin-import插件
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
npm i babel-plugin-import -D
②
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
第三步:Rem 适配
①安装插件
Vant 中的样式默认使用px作为单位,如果需要使用rem单位,需要安装postcss-pxtorem、lib-flexible两个插件
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
npm install postcss-pxtorem@4.0 --save-dev
npm i -S amfe-flexible
②postcss 配置:
第一种配置方式:在postcss.config.js文件中配置:
module.exports = () => ({
plugins: [
require('autoprefixer')(),
// require('postcss-px2rem')({ remUnit: 75 })
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
})
第二种配置方式:创建vue.config.js配置:
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']
})
]
}
}
}
};
这段配置就算是css的预加载配置。rootValue 中设置37.5的值结合UI设计稿2x的设计图开发,引用的时候css直接写宽375px就相当于100%,它会自动根据屏幕进行计算成rem。如果rootValue 设置为75,则引用时写宽750px就相当于100%(这是因为Vant组件默认10rem为100%)。selectorBlackList中写不想被转成rem的类名。
第四步:在main.js中引入amfe-flexible
import 'amfe-flexible';