使用vue3 搭建app移动端适配的3种方式

一、引入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",要安装指定版本否则会报错

第三种方式，后面单独设为一片文章