Vue3移动端使用插件的适配

你是否需要项目中使用px作为单位?打包运行后,自动转换成Rem

首先项目里先下载 flexible,使用npm下载

第一步下载依赖包

npm i amfe-flexible

第二步导入 // 在main.js

在main.js 里做导入

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import router from './router/index'
let pinia = createPinia()

import Vant from 'vant'
import 'vant/lib/index.css'
import 'amfe-flexible'//导入
createApp(App)
  .use(pinia)
  .use(router)
  .use(Vant)
  .mount('#app')

下载依赖包

然后下载下载 postcss 和 postcss-pxtorem 注意：默认不带参数npm install postcss-pxtorem会安装最新版本，启动项目时会报错！！！所以一定要用@5.1.1版本

npm i postcss-pxtorem@5.1.1 --save-dev
npm i postcss

添加配置，来到项目根目录也就是跟package.json平级，新建 postcss.config.cjs(这里建议复制,因为你可能会少些一个c,cjs)，里面代码如下

// postcss.config.cjs
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

以后我们就可以在代码中直接写px单位，它运行时会自动转成rem

代码中与运行后

Vue3中的屏幕适配,使用postcss-pxtorem,postcss,flexible来完成

Vue3移动端使用插件的适配