vue-cli2.x结合vant搭建项目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.安装MD5

cnpm install --save js-md5

5.安装axios

cnpm install axios --save

6.安装less

cnpm install less less-loader --save-dev

接下来找到bulid目录下的webpack.base.conf.js并打开，找到module下的rules写下

module: {
        rules: [
            {	// 加的这里
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
        ]
    },

7.安装vue-wechat-title（这是标题，我做微信公众号时候用的）

cnpm install --save vue-wechat-title

如何使用在我的这篇文章中有提示：
链接

https://blog.csdn.net/qq_39024950/article/details/99959210

8.安装vuex（如何使用点这里：vuex使用链接）

cnpm install vuex --save

9.安装js-cookie

cnpm install js-cookie --save

10.安装vant

cnpm install vant -S

11.以下是第3步安装那几个插件后的配置，打开.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": {}
  }
}

12.一下是main.js文件的部分配置（根据自己情况来）：

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import Vant from 'vant'
import axios from 'axios'
import 'vant/lib/index.css'
import router from './router'
import cookie from 'js-cookie'
import store from "@/vuex/store.js"
import VueWechatTitle from 'vue-wechat-title'

Vue.use(Vuex)
Vue.use(Vant)
Vue.use(VueWechatTitle)

Vue.prototype.$axios = axios  		//（这样写过后可以全局调用this.$axios）
Vue.prototype.$cookie = cookie		//（这样写过后可以全局调用this.$cookie）


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})