Install Vant

  1. npm i vant -SThe main problem is how to quote on demand and REM adaptation
  2. According to the need to introduce
NPM I babel-plugin-import -d installs the command NPM I babel-plugin-import -d, which automatically converts import to import on demand during compilationCopy the code
  1. The babel.config.js file is newly created after installation
//babel.config.js
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']]}Copy the code

4. This way, you can use it directly. Import it from main.js

import Vue from 'vue'
import { Button } from 'vant';
Vue.use(Button);
Copy the code

Rem adaptation

  1. Install two plug-ins
npm i postcss-pxtorem -S
npm i amfe-flexible -S
Copy the code
  1. According to the new configuration method provided by VUe3, you can configure the CSS in vue-config.js:
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css:{
      sourceMap:falsePostcss: {plugins: [autoprefixer(), pxtorem({rootValue: 37.5, propList: [The '*']})]}}}}Copy the code
  1. RootValue 75.0 is actually a 750px pixel representing the UI design draft. When referencing, CSS write width of 750px is equal to 100%. It will automatically calculate into REM according to the screen, without rem conversion of the original measurement value (37.5 is recommended here, combined with the design drawing development of 2X, Because of vant components you will find 37.5 more suitable).
  2. Import in the main.js folder
import 'amfe-flexible';
Copy the code

This allows you to evaluate font size in HTML. To achieve adaptive, directly according to the UI design draft 750px write pixel units, more efficient development.