第12章 綜合案例開發(fā)

第12章Vue-cli構(gòu)建項(xiàng)目課程內(nèi)容■綜合實(shí)例開發(fā)步驟■解析Vue生成文件目錄結(jié)構(gòu)■axios接口調(diào)用■實(shí)戰(zhàn)：?jiǎn)卧~本npmrundevcnpminstallvueinitwebpackmy-project綜合實(shí)例開發(fā)步驟初始化項(xiàng)目目錄創(chuàng)建項(xiàng)目，打開cmd，然后輸入回車，其中Installvue-router選項(xiàng)選擇y。如圖11-1所示安裝依賴包，進(jìn)入項(xiàng)目，輸入

如圖11-2所示運(yùn)行項(xiàng)目，輸入

。如圖11-3所示綜合實(shí)例開發(fā)步驟初始化依賴包安裝項(xiàng)目依賴：安裝vue路由模塊和網(wǎng)絡(luò)請(qǐng)求模塊：

安裝js依賴：安裝css依賴：安裝less依賴：安裝后自動(dòng)修改webpack.base.conf.js文件，讓其支持外部的css和jscnpminstallcnpminstallvue-routeraxios–savecnpminstalljquery--save-devcnpminstallstyle-loader--save-devcnpminstallcss-loader--save-devcnpminstallfile-loader--save-devcnpminstalllessless-loader–savecnpminstallcnpminstallvue-router--save綜合實(shí)例開發(fā)步驟安裝vue-router組件一種是在package.json中的pendencies屬性下添加當(dāng)前需要安裝的版本號(hào)。配置完成之后再執(zhí)行

即可。另一種是直接執(zhí)行下面的命令：

最新的版本號(hào)可以去github上面去搜綜合實(shí)例開發(fā)步驟創(chuàng)建router對(duì)象及配置路由在main.js中引入vue和vue-router并賦值給相應(yīng)的Vue和Router在router目錄下的index.js中通過(guò)Vue的use方法注入Router，并創(chuàng)建router實(shí)例，然后配置路由具體路徑綜合實(shí)例開發(fā)步驟在App.vue中添加路由導(dǎo)航在src\components目錄下分別創(chuàng)建三個(gè)組件評(píng)論組件商品組件商家組件再次打開瀏覽器刷新如果看到如下的界面，說(shuō)明vue-router配置使用成功。單擊商家切換到商家頁(yè)面并沒(méi)有刷新。如圖11-4所示解析Vue生成文件目錄結(jié)構(gòu)解析Vue生成文件目錄結(jié)構(gòu)build文件夾config文件夾node_modules文件夾src文件夾App.vue與main.jsaxios調(diào)用接口axios基本使用安裝：引用：在src的main.js中加入axios在router下的index.js中引入axios在App.vue或者其他組件頁(yè)面中發(fā)起的數(shù)據(jù)請(qǐng)求配置好axios插件后，并在router下的index.js中引入axios就可以使用了cnpminstallaxiosaxios插件發(fā)起axiosGET和POST請(qǐng)求Words.vue文件運(yùn)行后調(diào)用數(shù)據(jù)已經(jīng)從服務(wù)器獲取，并且綁定到words數(shù)組，數(shù)據(jù)通過(guò)<ul>列表展示出來(lái)實(shí)戰(zhàn)：?jiǎn)卧~本展示單詞本單詞本增加了刪除，修改按鈕，添加首頁(yè)、上一頁(yè)、下一頁(yè)、末頁(yè)，輸入跳轉(zhuǎn)的頁(yè)碼，添加單詞完善頁(yè)面部分內(nèi)容在Words.vue界面中增加代碼編寫函數(shù)changePage來(lái)實(shí)現(xiàn)上一頁(yè)、下一頁(yè)。實(shí)戰(zhàn)：?jiǎn)卧~本修改刪除單詞在Words.vue界面中增加代碼創(chuàng)建UpdWord.vue文件在Word.vue中編寫函數(shù)del和update來(lái)實(shí)現(xiàn)。實(shí)戰(zhàn)：?jiǎn)卧~本添加單詞在Words.vue界面中增加代碼創(chuàng)建文件AddWord.vue，并編寫AddWord.vue界面效果如圖11-8所示，輸入單詞信息后單擊添加，調(diào)用后臺(tái)接口添加成功后可以繼續(xù)添加單詞本章小結(jié)

本章通過(guò)vue-cli構(gòu)建工具初始化項(xiàng)目目錄并初始化依賴包，安裝v