1、 第十一章 綜合案例開發課程內容 綜合實例開發步驟 解析Vue生成文件目錄結構 vue-resource插件 實戰：單詞本 npm run devcnpm installvue init webpack my-project綜合實例開發步驟初始化項目目錄創建項目，打開 cmd，然后輸入 敲回車，其中 Install vue-router 選項選擇y。如圖11-1所示安裝依賴包，進入項目，輸入如圖11-2 所示運行項目，輸入 。如圖 11-3 所示綜合實例開發步驟初始化依賴包安裝項目依賴：安裝 vue 路由模塊和網絡請求模塊： 安裝js 依賴：安裝css 依賴： 安裝less 依賴：安裝后自動修

2、改 webpack.base.conf.js 文件，讓其支持外部的css 和 jscnpm installcnpm install vue-router vue-resource savecnpm install jquery -save-devcnpm install style-loader -save-dev cnpm install css-loader -save-dev cnpm install file-loader -save-devcnpm install less less-loader savecnpm install cnpm install vue-router -s

3、ave 綜合實例開發步驟安裝 vue-router 組件一種是在 package.json中的pendencies 屬性下添加當前需要安裝的版本號。配置完成之后再執行 即可安。 另一種是直接執行下面的命令：最新的版本號可以去 github 上面去搜綜合實例開發步驟創建 router 對象及配置路由 在 main.js 中引入vue 和 vue-router 并賦值給相應的Vue 和 Router 在 router 目錄下的 index.js 中通過 Vue 的 use 方法注入 Router，并創建 router 實例，然后配置路由具體路徑 綜合實例開發步驟 在 App.vue 中添加路由導航

4、 在 srccomponents 目錄下分別創建三個組件評論組件商品組件 商家組件 再次打開瀏覽器刷新如果看到如下的界面，說明 vue-router 配置使用成功。單擊商家切換到商家頁面并沒有刷新。如圖 11-4 所示解析Vue生成文件目錄結構解析Vue生成文件目錄結構build 文件夾config 文件夾node_modules 文件夾src 文件夾App.vue 與 main.jscnpm install vue-resourcevue-resource 插件vue-resource 是 Vue.js 的一款插件，它可以通過 XMLHttpRequest 或 JSONP 發起請求并處理響應

5、。vue-resource 還提供了 inteceptor 功能，使用 inteceptor 可以在請求前和請求后附加一些行為.vue-resource 基本使用安裝：引用：在src 的 main.js 中加入 resource在 router 下的 index.js 中引入 vue-resource在 App.vue 或者其他組件頁面中發起的數據請求配置好 vue-resource 插件后，并在 router 下的 index.js 中引入 vue-resource 就可以使用了vue-resource 插件發起 JSONP 請求App.vue 文件 Words.vue 文件 運行后調用數據

6、已經從服務器獲取，并且綁定到 words 數組，數據通過列表展示出來 實戰：單詞本 展示單詞本 單詞本增加了刪除，修改按鈕，添加首頁、上一頁、下一頁、末頁，輸入跳轉的頁碼，添加單詞完善頁面部分內容在 Words.vue 界面中增加代碼編寫函數 changePage 來實現上一頁、下一頁。 實戰：單詞本 修改刪除單詞 在 Words.vue 界面中增加代碼創建UpdWord.vue 文件在 Word.vue 中編寫函數 del 和 update 來實現。 實戰：單詞本 添加單詞 在 Words.vue 界面中增加代碼創建文件AddWord.vue，并編寫AddWord.vue 界面效果如圖 11-8 所示，輸入單詞信息后單擊添加，調用后臺接口添加成功后可以繼續添加單詞本章小結 本章通過vue-cli構建工具初始化項目目錄并初始化依賴包，安裝vu