Vue.js前端开发技术第11章-综合案例开发课件

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