参考：

请先阅读大漠写的 vw-layout-in-vue

vue cli 2.x版本：

第一步：Vue cli 2.x安装

npm install -g vue-cli

桥接工具：npm i -g @vue/cli-init

vue init webpack vue-mobile

第二步：安装PostCSS相关插件：

postcss-aspect-ratio-mini

postcss-px-to-viewport

postcss-write-svg

postcss-cssnext

cssnano

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano --save-dev

npm i cssnano-preset-advanced --save-dev

第三步：修改.postcssrc.js

module.exports = {

  "plugins": {

    "postcss-import": {},

    "postcss-url": {},

    // to edit target browsers: use "browserslist" field in package.json

    // "autoprefixer": {},

    "postcss-aspect-ratio-mini": {},

    "postcss-write-svg": {

      utf8: false

    },

    "postcss-cssnext": {},

    "postcss-px-to-viewport": {

      viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750

      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置著

      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）

      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw

      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名

      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值

      mediaQuery: false, // 允许在媒体查询中转换`px`

      exclude: [/(\/|\\)(node_modules)(\/|\\)/] // 排除目录（重要，若安装第三方库，请加上这个，不然报错）

    },

    "cssnano": {

      preset: "advanced",

      autoprefixer: false,

      "postcss-zindex": false

    }

  }

}

第四步：Viewport适配（降级处理，解决兼容问题）

首先，在vue项目index.html引用js文件

http://g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js

<script src="static/viewport-units-buggyfill.min.js"></script>

并增加

<script>

window.onload = function () {

    window.viewportUnitsBuggyfill.init({

        hacks: window.viewportUnitsBuggyfillHacks

    });

}

</script>

安装：npm i --save-dev postcss-viewport-units

.postcssrc.js增加

module.exports = {

    "plugins": {

        "postcss-viewport-units": {},

    }

}

使用第三方库：

如mint-ui

安装：npm i mint-ui

main.js中引用

import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(MintUI)

.postcssrc.js增加（必须）

"postcss-px-to-viewport": {

    exclude: [/(\/|\\)(node_modules)(\/|\\)/] // 排除目录

},

安装sass

npm i node-sass sass-loader --save-dev

样式重置

npm i normalize.css --save-dev

main.js引入：

import 'normalize.css/normalize.css'

Ratio 1px解决方案：

@svg 1px-border {

    width: 4px;

    height: 4px;

    @rect {

        fill: transparent;

        width: 100%;

        height: 100%;

        stroke-width: 25%;

        stroke: var(--color, black);

    }

}

.example {

    border: 1px solid transparent;

    border-image: svg(1px-border param(--color #00b1ff)) 1 1 1 1 stretch;

}

有需要可查看完整github代码：

vue-mobile-vw-layout