vue3+vant 移动端应用（1）

安装Vant

1. npm i vant -S 主要问题如何按需引用、REM适配
2. 按需引入

babel-plugin-import 会在编译过程中将 import 的写法自动转换为按需引入的方式
//安装命令
npm i babel-plugin-import -D
复制代码

3. 安装之后新建立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
复制代码

2. 根据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: ['*']
            })
          ]
        }
      }
    }
}

复制代码

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

import 'amfe-flexible';
复制代码

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