vue 移动端适配,rem适配

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中使用一下

import 'amfe-flexible';

 

你可能感兴趣的:(vue 移动端适配,rem适配)