《vue教程课件》_《vue教程课件》_9综合案例开发1.docxVIP

综合案例开发1-万家鲜果APP

本章运用前面所学知识进行案例开发，内容包括vue-cli初始化项目目录，vant插件的使用、创建router对象及配置路由，在项目添加路由及localStorage的使用等。通过“万家鲜果APP”案例学习Vue开发单页面应用。

学习目标：

掌握项目的创建方法

了解项目的整体结构

掌握项目中代码的实现

掌握项目的打包及发布

9.1项目前期准备工作

前面学习vue数据绑定、Vue组件、Vue路由、vuex以及开发相关的基础知识，本章将利用所学知识进行一个小型案例开发，通过实践项目的学习，加深对Vue前端开发有更深刻的认识。本章选用“万家鲜果APP”前端案例，在这个案例中，所有数据均来自本地，不涉及服务器端及第三方数据，这样的好处是将更多的精力集中到前端开发上。项目共五个页面，分别是首页、商品页、购物车、订单页及我的页面。如图9-1-9-5所示。

图9-1万家水果-首页

图9-2万家水果-商品页

图9-3万家水果--购物车页面

图9-4万家水果-订单页面

图9-5万家水果-我的页面

9.1.1准备数据

常用网站APP分为前台和后台，前台用来展示商品，购买商品和订单处理，后台用来提供API接口。本项目由于简单，项目所需数据由本地提供，数据文件为data.js，存放在项目的src目录下，内容如下：

exportdefault{

goo