一雀摘、創(chuàng)建項(xiàng)目
使用vue開(kāi)發(fā)項(xiàng)目時(shí)实愚，通過(guò)腳手架工具vue-cli可以很方便的構(gòu)建項(xiàng)目纬傲，熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置都一并創(chuàng)建好贴铜。
# 全局安裝 vue-cli
$ npm install -g vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴
$ cd my-project
$ npm install
更具體的可以看官方文檔：http://cn.vuejs.org/v2/guide/installation.html
二粪摘、安裝網(wǎng)絡(luò)請(qǐng)求模塊
vue2.0后官方不再推薦vue-resource 作為 ajax 方案。(具體原因看這:https://github.com/vuefe/vuefe.github.io/issues/186)?
在這里使用axios處理ajax請(qǐng)求阀湿，對(duì)應(yīng)的vue插件:vue-axios
# 安裝 axios 和 vue-axios
$ npm install --save axios vue-axios
# 在main.js中引入
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
# 在組件中使用axios
this.axios.get('/api/user').then((response) => {
? ? console.log(response.data)
}).catch((error) => {
? ? console.error(error)
})
axios更詳細(xì)的使用方法看這里:https://github.com/mzabriskie/axios
三赶熟、Json-Server
項(xiàng)目搭建好了，需要本地模擬數(shù)據(jù)來(lái)測(cè)試接口效果陷嘴。
這里的思路是啟動(dòng)一個(gè)本地Server來(lái)處理請(qǐng)求返回模擬數(shù)據(jù)，項(xiàng)目中通過(guò)webpack的proxy代理過(guò)去间坐。
這里使用Json-Server這個(gè)工具來(lái)構(gòu)建本地Server
# 安裝Json-Server
$ npm install -g json-server
安裝完成后灾挨，在項(xiàng)目中創(chuàng)建db.json文件模擬返回的數(shù)據(jù)內(nèi)容。
{
? ? "user": {
? ? ? ? "name" : "Sugar",
? ? ? ? "age" : 22,
? ? ? ? "sex" : "girl"
? ? }
}
然后執(zhí)行 json-server db.json
執(zhí)行成功后會(huì)提示已經(jīng)啟動(dòng)了一個(gè)端口為3000的服務(wù)竹宋，在瀏覽器中輸入localhost:3000 能看到如下的頁(yè)面：
點(diǎn)擊 'user' 就能看到我們定義的數(shù)據(jù)信息
到此劳澄，本地Mock Server 已經(jīng)搭建完成
四、向本地Server請(qǐng)求數(shù)據(jù)
在項(xiàng)目中如何向本地Server請(qǐng)求數(shù)據(jù)呢蜈七？
通過(guò)webpack的proxy秒拔，可以將本地的Ajax請(qǐng)求代理到Mock Server上
在config/index.js文件中加入如下配置
配置完成啟動(dòng) npm run dev 進(jìn)行測(cè)試吧。
更多proxy配置信息飒硅，請(qǐng)參考以下相關(guān)資料：
https://vuejs-templates.github.io/webpack/proxy.html
http://webpack.github.io/docs/webpack-dev-server.html#proxy
五砂缩、使用Mock.js
Mock Server中 db.json 中的數(shù)據(jù)是是死的作谚，我們可以借助 Mock.js 生成動(dòng)態(tài)數(shù)據(jù)，增加測(cè)試的真實(shí)性庵芭。
# 安裝mock.js
npm install mockjs --save-dev
項(xiàng)目中創(chuàng)建mock/ db.js 文件妹懒，內(nèi)容如下：
執(zhí)行 json-server db.js 再次查看 localhost:3000/user 已經(jīng)能看到數(shù)據(jù)效果了
Mock.js的詳細(xì)用法參考：http://mockjs.com/examples.html
六、整合
項(xiàng)目開(kāi)發(fā)時(shí)双吆，分別要輸入兩條命令比較麻煩眨唬。
我們?cè)趐ackage.json中配置一條mockdev命令 ，以方便開(kāi)發(fā)好乐。
在 scripts 里加入如下兩條配置：
"mock": "node_modules/.bin/json-server --watch mock/db.js --port 3000",
"mockdev": "npm run mock & npm run dev"
到此 vue + axios + mock server的環(huán)境已經(jīng)搭建完成匾竿。
