安卓开发-电影购票APP开发实战

电影购票APP开发实战
本章将介绍一个电影购票APP，它使用Vue脚手架进行搭建，页面
简洁、精致，其功能和一些常见的电影购票网站类似，例如支付宝中
的“淘票票电影”。
18.1 脚手架项目的搭建
选择好项目存放的目录，使用Vue脚手架创建一个脚手架项目，项
目名称为buyfilm。打开命令提示符窗口，输入以下命令创建脚手架。
vue create buyfilm
选择Manually select features，按照图18-1所示选择所需的功
能，选择Vue 3.x版本，然后选择路由器使用history模式，如图18-2
所示。
图18-1 在脚手架项目中选择需要的功能
图18-2 选择history模式
2 系统结构
本项目使用的都是本地静态的资源，主要是前端展示，没有涉及
后台的开发。使用脚手架搭建的项目，目录结构可以根据自己喜好进
行修改，但是要注意进行相应的配置。
其中public文件夹用来放置项目的静态文件，结构如图18-3所
示。
在src文件夹中，放置了所有的源码文件。其中components文件夹
用来放置一些比较小的、公用的组件，例如，头部和尾部组件，结构
如图18-4所示。views文件夹用来放置3个主页面的组件，是页面级别
的组件，如图18-5所示。routers文件夹用来放置路由，其中index.js
文件是主路由，目录结构如图18-6所示。main.js是项目入口文件的
JavaScript逻辑，在webpack打包之后将被注入到index.html页面中。
图18-3 public文件夹结构
图18-4 components文件夹结构
图18-5 views文件夹结构
图18-6 routers文件夹结构
18.3 系统运行效果
打开“DOS系统”窗口，使用cd命令进入电影购票系统文件夹
buyfilm，然后执行“npm run serve”命令&#x