vue 使用vant-ui结合vw适配移动端

1.安装vue-cli2.x脚手架

 npm intatll -g vue-cli 

安装完毕之后 可以检查安装版本即 vue -V

2.创建一个项目

vue init webpack YourProjectName

3.接下来安装vw布局需要的插件

我们需要安装7个插件
（1）postcss-px-to-viewport （2）postcss-write-svg （3）postcss-cssnext
（4）postcss-viewport-units （5）cssnano （6）postcss-aspect-ratio-mini

输入命令：

cnpm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

另一个插件是：

cnpm i cssnano-preset-advanced --save-dev

4.安装完个插件后的配置，打开.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-px-to-viewport": {
      viewportWidth: 750,
      // viewportHeight: 1334,      // 视口高度，根据750设备的宽度来指定，也可以不设置
      unitPrecision: 3,       // 单位精度
      viewportUnit: 'vw',     // 单位名称
      selectorBlackList: ['.ignore', '.hairlines', '.van-', /^(.van)/, /^(.igno)/], // 拥有该类名的元素保留px单位
      minPixeValue: 2,  // 小于或等于1px不转换为视窗单位，也可以设置为想要的值
      mediaQuery: false // 是否允许在媒体查询中转换px
    },
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    },
    "postcss-viewport-units": {}
  }
}

5.安装vant（vant也支持按需引入）

cnpm install vant -S

 关键的步骤就是这些，项目其他的插件在此不做赘述。。。