安装插件进行移动端适配

VW方案适配

• 先把vue脚手架升级到最新

  npm i -g @vue/cli@latest

• 安装 postcss-px2vp

  npm i -D postcss-px2vp

• 插件安装完成后，创建一个和vue.config.js同级的文件,名称为：postcss.config.js,在里面输入如下内容:

  module.exports = {
  plugins: {
  ‘postcss-px2vp’: {
  viewportWidth(rule){
  // 如果设计稿宽度是 750px + 使用 Vant
  const file = rule.source?.input.file
  return file?.includes(‘vant’)?375:750
  },
  // viewportWidth: 750, //如果设计稿宽度是 750px + 不使用 Vant
  // viewportWidth: 375, //如果设计稿宽度是 375px + 无论是否使用 Vant
  /**
  * 下面是设置那些不进行转换的，字体，行高不转换，
  * 如果想要字体也抓转换的话，就改成 [““], 这样
  *
  * ** /
  ​ propList: ["”, "!font”,“!line-height”,“!letter-spacing”],
  ​ }
  ​ }
  }

rem适配

• 第一步安装 amfe-flexible

  第一步： npm i amfe-flexible

  第二布：在man.js文件中写入 import ‘amfe-flexible’

• 第二步安装 postcss-pxtorem

  第一步： npm i -D postcss-pxtorem

• 第三步：插件安装完成后，创建一个和vue.config.js同级的文件,名称为：postcss.config.js,在里面输入如下内容:

  module.exports = {
  plugins: {
  ‘postcss-pxtorem’: {
  rootValue({ file }) {
  // 如果设计稿宽度是 750px + 使用 Vant
  return file.indexOf(‘vant’) !== -1 ? 37.5 : 75
  },
  //rootValue:75 //如果设计稿宽度是 750px + 不使用 Vant
  //rootValue:37.5 //如果设计稿宽度是 375px + 无论是否使用 Vant
  /**
  * 下面是设置那些不进行转换的，字体，行高不转换，
  * 如果想要字体也抓转换的话，就改成 [““], 这样
  *
  * ** /
  ​ propList: ["”, "!font”, “!line-height”, “!letter-spacing”],
  ​ }
  ​ }
  }