需求说明：使用Vue脚手架进行搭建，页面简洁、精致，和一些常见的电影网站类似，例如支付宝中的“淘票票电影”。在项目中使用页面布局技术（表格，vue.js框架，DIV+CSS或者混合使用）进行页面设计，使网站功能齐全，界面美观大方，有一定的交互性。

功能分析：系统主要分为七个页面：分别是电影页面，影院页面，我的页面，地区页面，正在热映页面，即将上映页面和查找页面。

1. 电影页面：作为程序默认的主页面，可以跳转到七个页面中的任一个页面，并可以在不切换movie目录的情况下浏览有什么电影正在上映和即将上映还有切换查找页面。
2. 影院页面：可以浏览在哪些地方有电影院并且该电影院有什么活动。
3. 我的页面:可以看到登录相关的样式和点击按钮。
4. 地区页面;可以看到有哪些地区有相关电影。
5. 正在热映页面：可以看到有哪些电影正在上映和电影的基本信息。
6. 即将上映页面：可以看到有哪些电影即将上映和电影的基本信息。
7. 查找页面：可以看到默认的查找页面。

2 程序概要设计

项目开发环境

编辑器VS code，Node.js，npm,vue脚手架，和测试浏览器Google(开发者模式)。

1. 电影页面：通过redirect属性确保重定向为程序默认的主页面，通过vue-route的component属性参数可以跳转到七个页面中的任一个页面，并可以在不切换movie目录的情况下浏览有什么电影正在上映和即将上映还有切换查找页面。
2. 影院页面：通过HTML和css的设计确保页面能够正常显示页面内容不会错乱。
3. 我的页面: 通过HTML和css的设计可以看到登录相关的样式和点击按钮。
4. 地区页面;利用HTML和css的设计确保地区能够有层次的显示出来。
5. 正在热映页面：利用HTML和css的设计确保看到有哪些电影正在上映和电影的基本信息。
6. 即将上映页面：利用HTML和css的设计确保看到有哪些电影即将上映和电影的基本信息。
7. 查找页面：利用前端相关属性确保可以看到默认的查找页面和图片。
8. 

图1.神影视频项目框架

程序框架整体采用组件来简化代码结构去降低代码冗余度和方便调试项目。

3 程序详细设计

本项目首先需要通过vue脚手架来搭建环境，具体环境的搭建如下

1. 首先打开要创建的项目目录
2. 然后打开cmd 窗口，先切换对应的磁盘，然后在窗口中输入cd D:\前端大作业命令（切换工作目录），按Enter键进入项目目录。
3. 使用 vue create 语句创建项目，然后对项目进行命名，注意项目名称不要大写，否则无法创建。
4. 按Enter键后，在提示的两种项目配置下选择自定义的配置，根据项目需要选择合适的模块按Enter键。（本项目选择Babel,Router,Vuex,Css Pre-processors）。
5. 模块选择完，按Ender键，输入y键使用history模式的路由再按下Ender键
6. 接下来选择Sass/SCSS来作为预编译的CSS，然后选择“In package.json”,作为配置内容的写入位置。
7. 

图2.启动Vue项目

1. 最后在命令行输入“n”按Ender键完成项目环境的配置。在命令行输入cd shenying 按Ender键；然后再输入“npm run serve ”启动项目，如果一段时间后窗口提供了两个域名即环境彻底搭建成功。

然后打开我们的vue项目右键——>打开文件夹，然后导入项目（我的项目在D盘，文件夹名为shenying）。

文件夹已经下载好了，现在就可以进入文件夹，输入： cd my-vue 回车，因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，输入命令：cnpm install

已经安装好之后，现在要来测试一下我们下载好的模板能不能正常的运行，在命令行输入：npm run serve 回车即可，

8080是默认的端口，直接在谷歌浏览器输入localhost:8080就可以打开默认的模板了；

主组件(app.vue)

  <!--<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM-->

    <keep-alive>

    <router-view></router-view>