方式app端适配(方式按需单位视窗组件)「方式模式」

一、引入vant的几种方式（1）引入全部组件，在没有配置按需引入的前提下

main.js中// 引入vant (引入全部组件) Tips: 配置按需引入后，将不允许直接导入所有组件
import Vant from 'vant';import 'vant/lib/index.css';const app = createApp(App)app.use(store)  .use(router)  .use(Vant)  .mount('#app')

（2）手动按需引入

main.js中// 手动按需引入import Button from 'vant/lib/button';import 'vant/lib/button/style';app.use(store)  .use(router)  // 手动按需引入  .use(Button)  .mount('#app')

babel.config.js 文件中  module.exports = {  presets: [    '@vue/cli-plugin-babel/preset',  ],  // 自动按需引入    plugins: [    ['import', {      libraryName: 'vant',      libraryDirectory: 'es',      style: true    }, 'vant']  ]};

适配方式第一种适配方式 viewport

安装 cnpm install postcss-px-to-viewport -D新建postcss.config.js   module.exports = {  plugins: {    'postcss-px-to-viewport': {      viewportWidth: 375,    },  },};或者module.exports = {  plugins: {    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等    "postcss-px-to-viewport": {      unitToConvert: "px", // 要转化的单位      viewportWidth: 750, // UI设计稿的宽度      unitPrecision: 6, // 转换后的精度，即小数点位数      propList: [""], // 指定转换的css属性的单位，代表全部css属性的单位都进行转换      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false      replace: true, // 是否转换后直接更换属性值      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配      landscape: false, // 是否处理横屏情况    },  },};

第二种方式 vant 提供的rem在vue.config.js中添加在main.js中添加import 'amfe-flexible';或者在postcss.config.js中添加（两种方式任选其一
）结果如图所示注意："postcss-pxtorem": "^5.0.0",要安装指定版本否则会报错第三种方式，后面单独设为一片文章