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/>'
})