安装Vant

  1. npm i vant -S 主要问题如何按需引用、REM适配
  2. 按需引入
babel-plugin-import 会在编译过程中将 import 的写法自动转换为按需引入的方式
//安装命令
npm i babel-plugin-import -D
复制代码
  1. 安装之后新建立babel.config.js文件
//babel.config.js
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

复制代码

4.这样就可以直接使用了,在main.js文件夹引入

import Vue from 'vue'
import { Button } from 'vant';
Vue.use(Button);
复制代码

rem适配

  1. 安装两个插件
npm i postcss-pxtorem -S
npm i amfe-flexible -S
复制代码
  1. 根据vue3提供的新配置方法,在vue-config.js中对CSS做配置:
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css:{
      sourceMap:false,
      loaderOptions: {
        postcss: {
          plugins: [
            autoprefixer(),
            pxtorem({
              rootValue: 37.5,
              propList: ['*']
            })
          ]
        }
      }
    }
}

复制代码
  1. rootValue  75.0的值其实就是代表ui设计稿的750px的像素,引用的时候css直接写宽750px就相当于100%,它会自动根据屏幕进行计算成rem,无需对原测量值进行REM的换算(这里推荐37.5,结合2x的设计图开发,因为vant的组件你会发现37.5更为适合)。
  2. 在main.js文件夹下引入
import 'amfe-flexible';
复制代码

这样就可以在html下对于font-size进行计算。达到自适应的,直接安照UI设计稿750px写像素单位,开发更加高效。

Logo

前往低代码交流专区

更多推荐