vuecli4中配置px自动转换vw

元气满满，直接干~~~

移动端使用vw实现响应式布局时，需要自己计算vm的数值，非常难用！

什么是vw：默认将屏幕宽度分为100份，1vw = 一份。

在vuecli4中使用一个插件，让我们在开发时照常写px，而插件可以将px自动转换vw。非常好用！

1. 下载 `npm i postcss-px-to-viewport -D`

2. 在项目根目录下创建 `.postcssrc.js` 作为配置文件

3. 添加以下配置：

const path = require('path');

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;

  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: designWidth, // UI设计稿的宽度  750/640
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw