vue 移动端适配，rem适配

最新推荐文章于 2024-07-12 01:53:44 发布

yangliweigauguagua

最新推荐文章于 2024-07-12 01:53:44 发布

阅读量930

点赞数

文章标签： vue rem

本文链接：https://blog.csdn.net/qq_32674347/article/details/87701298

版权

1，安装vue

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

2，安装 postcss-pxtorem lib-flexible

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值

3，在vue.config.js中写入以下配置：（如果没有就新建一个vue.config.js）

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
  outputDir: 'docs',
  publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
};

4,在main.js中使用一下