vuecli3 + vw布局

网上有很多关于vw布局的部署可以参考比如大漠老师的，这里我只是作个记录，方便查看。

• vuecli3起手
  根据提示安装babel, pwa, router, vuex, sass。

• vw
  貌似在之前的cli版本中，构建出来的文件自带.postcssrc.js文件里面vuecli自带了
  postcss-import；
  postcss-url；
  autoprefixer；
  三个插件；在vuecli3创建的项目中如果选择配置信息都在package.json里面会看到有关postcss的配置项，这里我选择的是配置信息分成独立的文件，所以需要自己在根目录下面创建postcss.config.js文件
  安装依赖：
  npm install
  postcss-aspect-ratio-mini

  postcss-px-to-viewport

  1. 主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位；
  2. 在不想要把px转换为vw的时候，首先在对应的元素（html）中添加配置中指定的类名.ignore或.hairlines；
  3. 使用范围：
     容器适配，可以使用vw
     文本的适配，可以使用vw
     大于1px的边框、圆角、阴影都可以使用vw
     内距和外距，可以使用vw

  postcss-write-svg

  1. 主要用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理；

  postcss-cssnext

  1. 该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理；

  postcss-viewport-units

  1. 主要是给CSS的属性添加content的属性，配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的操作；

  cssnano

  1. 主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。不过你也可以使用postcss-loader显式的使用cssnano；

  -S (安装dev)

因为需要在cssnano的配置中，使用preset: “advanced”，所以我们需要另外安装：
npm install cssnano-preset-advanced -D

注意：

1. 因为postcss-viewport-units会在计算vw时自动添加content内容,但是content会有一定的副作用,所以添加一个全局的css。

img {
    content: normal !important;
}

2. 解决vw在苹果浏览器下vh问题
   需要参考这个插件 viewport-units-buggyfill
   在index.html文件中body标签引入操作：

<!-- 解决vw的兼容性问题 -->
  <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
  <script>
    window.onload = function() {
      window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
      });
    };
  </script>

postcss.config.js配置：

module.exports = {
  plugins: {
    // "postcss-import": {}, // 1. vuecli自带 带@import 引入
    // "postcss-url": {}, // 2. vuecli自带
    //autoprefixer: {}, // 3. cssnano中包含此功能 任意注释一个
    "postcss-write-svg": {
      utf8: false
    }, // 4. 这个东西是通过border-image,background-image来直接画svg 我试了下感觉css2svg还是有学习成本 我打算还是用伪类+transform来算了
    "postcss-cssnext": {}, // 5. 使用下一代css新特性
    "postcss-viewport-units": {
      filterRule: rule =>
        rule.selector.indexOf("::after") === -1 &&
        rule.selector.indexOf("::before") === -1 &&
        rule.selector.indexOf(":after") === -1 &&
        rule.selector.indexOf(":before") === -1
    }, // 6. 自动添加content属性 （但是注意使用伪类的里面同时带了after,before，需要排除）
    cssnano: {
      preset: "advanced",
      autoprefixer: true, // 同上3
      "postcss-zindex": false
    },
    "postcss-px-to-viewport": {
      viewportWidth: 750, //视口宽度，对应的是我们设计稿的宽度，一般是750
      //viewportHeight: 1334,    //视口高度
      unitPrecision: 3, //单位精度
      viewportUnit: "vw", //单位名称
      selectorBlackList: [
        ".ignore",
        ".hairlines",
        ".van-", // 貌似这种方式还是会改变我们的vantUI 后面该插件更新了 增加了exclude配置
        /^(.van)/,
        /^(.igno)/
      ], //配置白名单拥有该类名的元素保留px单位
      minPixelValue: 1, //小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, //允许在媒体查询中转换`px`
      exclude: /(\/|\\)(node_modules)(\/|\\)/ //不转换我们引入的第三方包 特别是我们的vantUI组件的大小
    }
  }
};