為了讓大家更加簡單明了盏道，下面帶大家從基礎做起(? ??_??)?

使用Vue-cli來構建項目

開始項目之前稍浆，要先安裝好Nodejs、NPM和Webpack猜嘱。對于NodeJs衅枫、NPM和Webpack相關介紹，大家可以查閱其對應的官網朗伶。這里就不詳解了弦撩。
首先全局安裝vue-cli，并且現(xiàn)在不需要npm i 下載依賴

$ npm install -g vue-cli

如果安裝好了腕让，就使用命令
vue init webpack vw-layout-jl
創(chuàng)建項目
創(chuàng)建好了之后孤钦，切換到vw-layout-jl項目執(zhí)行npm run dev

安裝PostCSS插件

用vue-cli創(chuàng)建項目的根目錄之下默認有.postcssrc.js文件，Vue-cli默認配置了下面述三個PostCSS插件postcss-import纯丸、postcss-url偏形、autoprefixer

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}

Vue-cli默認配置了上述三個PostCSS插件，但我們要完成vw的布局兼容方案觉鼻，或者說讓我們能更專心的擼碼俊扭，還需要配置下面的幾個PostCSS插件：

• postcss-aspect-ratio-mini
• postcss-px-to-viewport
• postcss-write-svg
• postcss-cssnext
• cssnano
• postcss-viewport-units

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

接下來在.postcssrc.js里面修改配置

module.exports = {
  "plugins": { 
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false }, 
    "postcss-cssnext": {}, 
    "postcss-px-to-viewport": { 
     viewportWidth: 750,// (Number) 視窗的寬度，對應的是我們設計稿的寬度坠陈，一般是750 
      viewportHeight: 1334, // (Number) 窗的高度萨惑，根據750設備的寬度來指定，一般指定1334
      unitPrecision: 3, // (Number) 指定`px`轉換為視窗單位值的小數(shù)位數(shù)（很多時候無法整除）
      viewportUnit: 'vw', // 指定需要轉換成的視窗單位仇矾，建議使用vw 
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) 指定不轉換為視窗單位的類庸蔼，可以自定義，可以無限添加,建議定義一至兩個通用的類名
      minPixelValue: 1, // (Number) 小于或等于`1px`不轉換為視窗單位贮匕，你也可以設置為你想要的值
      mediaQuery: false // (Boolean) 允許在媒體查詢中轉換`px` 
      }, 
      "postcss-viewport-units":{},
      "cssnano": { 
        preset: "advanced", 
        autoprefixer: false, 
        "postcss-zindex": false 
      } 
    }
}

其中的# postcss-px-to-viewport是可以將px轉換為vw姐仅、vw、vh刻盐、vmin或者vmax這樣的視窗單位
比如你是這樣寫css

.class2 {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}

編譯之后就變成這樣

.class2 {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 6.25vw;
  line-height: 9.375vw;
}

在不想要把px轉換為vw的時候掏膏，首先在對應的元素（html）中添加配置中指定的類名.ignore或.hairlines如下：

<div class="class2 ignore"></div>

寫css的時候

.ignore { 
  margin: 10px; 
  background-color: red; 
} 
.class2{ 
  width: 180px;
  height: 300px;
 }

編譯的時候

.class2{
   width: 24vw;
   height: 40vw; 
} 
.ignore { 
  margin: 10px; /*.box元素中帶有.ignore類名，在這個類名寫的`px`不會被轉換*/
  background-color: red;
 }

到最后就是解決兼容性問題了
就是使用viewport的polyfill：Viewport Units Buggyfill敦锌。使用viewport-units-buggyfill主要分以下幾步走：

引入JavaScript文件

viewport-units-buggyfill主要有兩個JavaScript文件：viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js馒疹。你只需要在你的HTML文件中引入這兩個文件。比如在Vue項目中的index.html引入它們：

<script src="https://cdn.bootcss.com/viewport-units-buggyfill/0.6.2/viewport-units-buggyfill.min.js"></script>
<script src="https://cdn.bootcss.com/viewport-units-buggyfill/0.6.2/viewport-units-buggyfill.hacks.min.js"></script>

在HTML文件中調用viewport-units-buggyfill

<script>
 window.onload = function () { 
  window.viewportUnitsBuggyfill.init({ 
    hacks: window.viewportUnitsBuggyfillHacks 
  });
 }
 </script>

以上算是完成了適配的工作了乙墙，記住幾個要點：
1.在.postcssrc.js里面配置postcss-zindex颖变，如果不設置為false生均，z-index的值就會重置為1。這是一個天坑悼做，記得將postcss-zindex設置為false
2.寫css的時候疯特，是按照設計圖750寬度來進行樣式書寫，即設置viewportWidth為750px肛走，所以沒有樣式圖的話漓雅，如果想要16px字體，那就是就將字體*2朽色，將字體設置font-size:32px;邻吞；如果要其他插件的話，如果其他插件是px為單位的葫男，那就將viewportWidth為375px抱冷，設置樣式的話，如果需要16px樣式的梢褐，就設置font-size:32px;這樣子旺遮，插件也可以將px修改為vw了

接下來，我們進行一個小項目練習盈咳，利用axios+vue-router+mock+vuex來做一個小平臺把耿眉，以下分為幾個步驟

安裝配置axios

npm install axios

具體請看https://github.com/axios/axios
接下來，我們就可以了解它的兩種基本用法了

axios.get('/user', {
    params: {
      ID: 654321
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.post('/user' , {
  params: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

但是如果在比較中大型的項目下如果每個都要寫這些請求鱼响，就會變得異常臃腫鸣剪，代碼不好管理
，而且不能統(tǒng)一處理錯誤信息丈积；因此我們可以進行封裝axios筐骇，統(tǒng)一處理異常、配置通用代碼
我們知道在普通用法中江滨，.then()處理響應铛纬，.catch()處理錯誤，通過攔截器唬滑，可以提前判斷饺鹃，并返回二者之一。我們可以在src里面創(chuàng)建文件夾common间雀，再創(chuàng)建serviceHttp.js來統(tǒng)一處理

全局配置

axios.defaults.timeout=10000;//超時時間
axios.defaults.baseURL = '協(xié)議名://域名:端口號';//配置baseURL 

運用攔截器

// 請求時的攔截
axios.interceptors.request.use(function (config) {
    // 發(fā)送請求之前做一些處理
  if(true){
    //攔截器統(tǒng)一加上請求頭
    config.headers['Authorization'] = '2132143432';
  }
    return config;
  }, function (error) {
    // 當請求異常時做一些處理
    return Promise.reject(error);
  });

// 響應時攔截
axios.interceptors.response.use(function (response) {
    // 返回響應時做一些處理
    return response;
  }, function (error) {
    // 當響應異常時做一些處理
    return Promise.reject(error);
  });

這里將響應或者錯誤返回到get/post請求的結果中，通過鏈式處理镊屎。

封裝get惹挟，post方法

*基本配置
包括請求方法，基礎url缝驳，相對url连锯，參數(shù)归苍，超時時間，請求頭等运怖。如果需要用到配置編譯環(huán)境和線上環(huán)境之間的切換拼弃，在下文再叫大家修改
*checkStatus()
鏈式處理第一步，判斷http狀態(tài)碼是否正常摇展，和攔截器一樣吻氧，請求正常則返回響應，請求異常則返回錯誤咏连，最后返回結果給checkCode()盯孙。
*checkCode()
鏈式處理第二步，處理上一步的結果祟滴，分別處理網絡異常振惰，以及后端返回的異常
*調用方法的時候，可以根據async和wait來調用垄懂，如下：

methods:{
     fetchData:async()=>{
     let params = {
      }
      const res = await http.get('/abc/defgh', params)
        return res
     }
}
mounted: function () {
    this.fetchData().then(function(val){console.log(val)})
}

但Acsic/AsAcess是ECMAScript 2017的一部分骑晶，在Internet Explorer和舊瀏覽器中不支持，所以請謹慎使用草慧。我們平時可以這樣子來用：

mounted: function () {
    http.get('/abc/defg',{})
    .then(function(response) {
      console.log('response',response.data)
    });
  },

有些小伙伴提出桶蛔，那我執(zhí)行多個并發(fā)請求怎么做尼，也很簡單冠蒋，看著官網來做就好了哦羽圃，比如：

methods: {
    fetchData(){
      return http.get('/abc/defg',{});//記得這里是return哦！
    },
    fetchData1(){
      return http.get('/abc/defg',{})
    }
  },
  mounted: function () {
    var that=this;
    axios.all([that.fetchData(),that.fetchData1()])
    .then(axios.spread((acct,aaa)=>{
      // 兩個請求現(xiàn)在都執(zhí)行完成
      console.log('acct',acct)
    }));
  },

大家可能會有疑問抖剿，那如果我要修改某些請求的url,那豈不是每個文件夾都找一遍來修改嘛朽寞？那我們干脆把url統(tǒng)一放到一個文件夾來處理咯，新建api文件斩郎；這里就不啰嗦了脑融，直接上例子：
在api.js里面

import http from './serviceHttp.js'
export default {
    fetchData:async(val)=>{
        const res = await http.get('/abc/defg', val)
        return res
    }
}

在組件里面引用
首先引用import api from '../common/api.js';
在mounted函數(shù)里面調用

api.fetchData({})
    .then((val)=>{
      console.log(val)
    })

如果還要其他的要求就不細說了。
一般項目里面都會用到編譯環(huán)境和配置環(huán)境的切換請求缩宜，因為涉及的比較詳細肘迎，我將它寫到另一篇文章里面描述了，詳情請移步：http://www.reibang.com/p/a5f206ec6a3e
小的們( ?? ω ?? )y锻煌，完成了以上的步驟妓布，讓我們繼續(xù)來“深造”

安裝vue-router

npm install vue-router

vue-router詳情請看：https://router.vuejs.org/zh/installation.html
在src下面有router文件夾，里面的index.js是路由配置宋梧，如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

看到這里匣沼，你是不是覺得需要配置文件之類的開始寫項目啦，先別急哦捂龄，咱們的vuex還沒有下載尼释涛！為啥還要這個尼加叁，小寶貝們別急，以后會用到哈唇撬！( ????? )

下載vuex

npm install vuex

呼~~下載好之后它匕，新建文件夾及其子文件，如圖

image.png

好了窖认，先教大家基礎的豫柬，后續(xù)復雜的再寫上(? ??_??)?
在store里的index.js里面寫上基礎的

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'

Vue.use(Vuex)
const state = {
    message111:'aaa',
}

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
})

再在main.js里面引用，如：

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store/'
Vue.config.productionTip = false

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

-----------vuex的就暫告一個段落了----------------
說好的用mock尼耀态，哈哈哈轮傍，先讓大家來了解以下什么是mock

mock.js基礎了解

1）能生成隨機數(shù)據，攔截ajax首装，前后端分離创夜，讓前端攻城師獨立于后端進行開發(fā)。
2）開發(fā)無侵入仙逻，不需要修改既有代碼驰吓，就可以攔截 Ajax 請求，返回模擬的響應數(shù)據系奉。
3）數(shù)據類型豐富檬贰，支持生成隨機的文本、數(shù)字缺亮、布爾值翁涤、日期、郵箱萌踱、鏈接葵礼、圖片、顏色等并鸵。
4）增加單元測試的真實性鸳粉，通過隨機數(shù)據，模擬各種場景园担。
5）用法簡單届谈，符合直覺的接口。
6）方便擴展弯汰，支持支持擴展更多數(shù)據類型艰山，支持自定義函數(shù)和正則。

開始安裝mock.js

npm install mockjs

呼~~~~_安裝好了~~在src下面新建mock文件夾咏闪，在文件夾下面新建homepage.js程剥，我一般在里面是這樣子寫的

let data = [
    {
        "roomId": 1010201,
        "roomName": "A棟 705",
        "cardType": 1,
        "name": "張三",
        "phone": "18888888888",
        "timestamp": "2018-09-09"
    },
    {
        "roomId": 1010201,
        "roomName": "A棟 705",
        "cardType": 1,
        "name": "張三",
        "phone": "18888888888",
        "timestamp": "2018-09-09"
    }    
  ]
  
  const Mock = require('mockjs');
  Mock.mock(
    /abc\/def\/ghi\/jk/,//請求的url，需要\來轉義
    {
      code: "0",
      msg: "ok",
      data: data
    }
  );

然后再main.js里面引用js就可以了：import './mock';
其他的就不用管了，只要你請求的url跟在mock里面寫的url一致就好了织鲸，是不是很簡單尼？
------------------------這會真的是暫告一段落了-------------------------
因為最最基礎的搭好了哦溪胶，這會某些寶寶是不是（才）不（那么）開（一）心（點）了搂擦，別急哈，因為其他的細節(jié)方面顯得太啰嗦了哗脖，后續(xù)會有文章出來的瀑踢，喜歡的點個愛心_(≧▽≦)/
參考文章：https://www.w3cplus.com/PostCSS/using-postcss-for-minification-and-optimization.html