? ? ? ? ?目前vue最新的腳手架是vue-cli3，相比之前的vue-cli2，vue-cli3更輕便泌射，而且新增了圖形界面管理。但是想要用好vue-cli3呢蚣驼，也需要開發(fā)者更了解webpack魄幕，vue-cli2與vue-cli3的比較，webpack的配置這些颖杏，都可以多了解一下纯陨，這里不多說，今天主要是簡(jiǎn)單講一下在vue-cli3中留储，我們?nèi)绾卧诒镜啬M接口翼抠。
一、利用vue-cli3腳手架創(chuàng)建一個(gè)項(xiàng)目（本次以vuecli3-mock為例）获讳，過程如下
1阴颖、vue-cli3的安裝。（這個(gè)對(duì)node版本有要求丐膝，必須是8.9以上版本）
輸入指令： npm install @vue/cli -g
安裝完成后可通過指令： vue --version? ? ?查看是否安裝成功量愧，若安裝成功了，會(huì)顯示當(dāng)前vue版本帅矗。
2偎肃、創(chuàng)建項(xiàng)目：create vuecli3-mock（溫馨提示：創(chuàng)建的項(xiàng)目名中是不支持大寫的字母，可以是數(shù)字浑此、小寫字母累颂、橫線）
3、打開vuecli3-mock:? ?cd vuecli3-mock
4凛俱、運(yùn)行程序：npm run serve
5紊馏、打開瀏覽器，訪問http://localhost:8080/
? ? ? ?如何使用vue-cli3腳手架創(chuàng)建vue項(xiàng)目是基本完成了蒲犬，那么本次的重點(diǎn)來了朱监，如何在本地模擬后臺(tái)接口數(shù)據(jù)
二、本地模擬數(shù)據(jù)
1暖哨、用編輯器打開剛剛創(chuàng)建的項(xiàng)目（我目前使用的是VS code編輯器赌朋，沒有用過的朋友可以試試凰狞，非常不錯(cuò)哦）篇裁，我們可以看到原生的項(xiàng)目結(jié)構(gòu)如下
? ? ? ? ? 那么我們需要在根目錄下創(chuàng)建一個(gè)名為vue.config.js的配置文件沛慢，以及在根路徑下創(chuàng)建一個(gè)名為data的文件夾，data文件下創(chuàng)建一個(gè)名為test.json（說明：data文件夾下存放所有模擬的json數(shù)據(jù)）
2达布、配置好如上數(shù)據(jù)团甲，重新啟動(dòng)一下項(xiàng)目，運(yùn)行npm run serve黍聂，我們可以通過訪問http://localhost:8080/test? 來獲取到test.json中的數(shù)據(jù)了
3躺苦、安裝axios，通過axios調(diào)用API接口
1）命令行中輸入npm install --save axios
2产还、打開src/components/HelloWorld.vue匹厘，引用axios，用axios請(qǐng)求接口數(shù)據(jù)脐区，并顯示出來
好了愈诚，本地模擬數(shù)據(jù)就到這里啦，當(dāng)然牛隅，在真實(shí)項(xiàng)目中炕柔，我們?yōu)榱烁玫墓芾眄?xiàng)目接口，一般是不會(huì)在每個(gè)頁(yè)面直接通過axios.去訪問接口的媒佣，我們會(huì)將接口進(jìn)行封裝匕累。因?yàn)槲覀円话愣枷Ｍ軌蚣泄芾硭械慕涌冢衙總€(gè)接口封裝成一個(gè)方法默伍，需要調(diào)用某個(gè)接口的時(shí)候直接調(diào)用該方法就好欢嘿。這樣也方便后期查看和維護(hù)。下章呢我將會(huì)寫一下也糊，如何封裝API接口炼蹦，統(tǒng)一管理API。
