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

②在babel.config.js中进行配置插件:

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

第三步:Rem 适配
①安装插件
Vant 中的样式默认使用px作为单位,如果需要使用rem单位,需要安装postcss-pxtorem、lib-flexible两个插件
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值

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

②postcss 配置:
第一种配置方式:在postcss.config.js文件中配置:

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: ['*']
        }
    }
}

第二种配置方式:创建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';

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

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

import { Button } from 'vant';
Vue.use(Button);

在结构中

<template>
  <div class="home">
    <van-button disabled type="primary" class="btn">禁用状态</van-button>
  </div>
</template>

<style lang="less">
.btn{
  width: 375px;
  height: 100px;
  font-size: 18px;
}
</style>

结果:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐