新建一个h5项目相关配置

1.新建一个vue2.0的项目

在这里插入代码片

2.安装vant

 npm i vant -S

3.安装桌面端配置

npm i @vant/touch-emulator -S

4.Rem 布局适配

4.1安装插件

npm install postcss-pxtorem --save-dev

4.2配置vue项目中.postcssrc.js文件中配置（前提安装了vant）

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

4.3工具utils文件下建rem.js

const baseSize = 75; // 这个是设计稿中1rem的大小。
function setRem() {
  // 实际设备页面宽度和设计稿的比值
  const scale = document.documentElement.clientWidth / 750;
  // 计算实际的rem值并赋予给html的font-size
  document.documentElement.style.fontSize = (baseSize * scale) + 'px';
}
setRem();
window.addEventListener('resize', () => {
  setRem();
});

5.main.js中引入

import Vant from 'vant';
import 'vant/lib/index.css';
import './utils/rem'
// 桌面端使用vant,引入自动生效
import '@vant/touch-emulator';

Vue.use(Vant);

注意：在引入vant css样式时，2.10版本引入是import ‘vant/lib/index.css’，然后2.12版本按照之前一如会报错改为import 'vant/lib/index’就OK了

这次在配置的过程中报错 Error loading PostCSS config: Invalid PostCSS Plugin found，因为postcss-pxtorem已经步入6.0版本，降低版本package降低之前用过的版本5.1.1，就OK了。