第12章 综合案例开发.pptx

第12章Vue-cli构建项目

课程内容■综合实例开发步骤■解析Vue生成文件目录结构■axios接口调用■实战：单词本

npmrundevcnpminstallvueinitwebpackmy-project综合实例开发步骤初始化项目目录创建项目，打开cmd，然后输入回车，其中Installvue-router选项选择y。如图11-1所示安装依赖包，进入项目，输入 如图11-2所示运行项目，输入 。如图11-3所示

综合实例开发步骤初始化依赖包安装项目依赖：安装vue路由模块和网络请求模块：安装js依赖：安装css依赖：安装less依赖：安装后自动修改webpack.base.conf.js文件，让其支持外部的css和jscnpminstallcnpminstallvue-routeraxios–savecnpminstalljquery--save-devcnpminstallstyle-loader--save-devcnpminstallcss-loader--save-devcnpminstallfile-loader--save-devcnpminstalllessless-loader–save

cnpminstallcnpminstallvue-router--save综合实例开发步骤安装vue-router组件一种是在package.json中的pendencies属性下添加当前需要安装的版本号。配置完成之后再执行 即可。另一种是直接执行下面的命令： 最新的版本号可以去github上面去搜

综合实例开发步骤创建router对象及配置路由在main.js中引入vue和vue-router并赋值给相应的Vue和Router在router目录下的index.js中通过Vue的use方法注入Router，并创建router实例，然后配置路由具体路径

综合实例开发步骤在App.vue中添加路由导航在src\components目录下分别创建三个组件评论组件商品组件商家组件再次打开浏览器刷新如果看到如下的界面，说明vue-router配置使用成功。单击商家切换到商家页面并没有刷新。如图11-4所示

解析Vue生成文件目录结构解析Vue生成文件目录结构build文件夹config文件夹node_modules文件夹src文件夹App.vue与main.js

axios调用接口axios基本使用安装：引用：在src的main.js中加入axios在router下的index.js中引入axios在App.vue或者其他组件页面中发起的数据请求配置好axios插件后，并在router下的index.js中引入axios就可以使用了cnpminstallaxios

axios插件发起axiosGET和POST请求Words.vue文件运行后调用数据已经从服务器获取，并且绑定到words数组，数据通过ul列表展示出来

实战：单词本展示单词本单词本增加了删除，修改按钮，添加首页、上一页、下一页、末页，输入跳转的页码，添加单词完善页面部分内容在Words.vue界面中增加代码编写函数changePage来实现上一页、下一页。

实战：单词本修改删除单词在Words.vue界面中增加代码创建UpdWord.vue文件在Word.vue中编写函数del和update来实现。

实战：单词本添加单词在Words.vue界面中增加代码创建文件AddWord.vue，并编写AddWord.vue界面效果如图11-8所示，输入单词信息后单击添加，调用后台接口添加成功后可以继续添加单词

本章小结

本章通过vue-cli构建工具初始化项目目录并初始化依赖包，安装vue-router组件创建router对象及配置路由，在App.vue中添加路由。解析Vue生成文件目录结构，结合axios插件访问远程数据，并结合案例讲解具体开发流程。