基于Vue.js的手游Wiki网站

摘  要：着迷Wiki网站使更多游戏图鉴得到了编写，在百忙的日子中，人们只需要极少的时间就能找到自己所需要的资料，免除了上网各处查询的时间，极大程度上提高了休息时间的利用率。

    网站开发采用了DIV+CSS，Vue.js开发技术，以jQury框架完成网页功能的实现，有网站首页及方舟指令、碧蓝航线、阴阳师、崩坏三等Wiki的首页和图鉴页或是人物详情页，界面设计以各个游戏的图片为背景，极强的表现了网站的主旨。网站首页及各个Wiki首页的版块多以网页导航作为核心内容，紧贴网站主题。布局清爽大方，符合交互要求。网站结合JSON及jQury的使用完成了注册登录、评论等功能。

关键词：DIV+CSS Vue.js jQury Wiki网站 JSON  

目 录

1 引言 1

1.1 着迷Wiki网站的开发背景 1

1.2 着迷Wiki网站的意义与目的 1

2 开发工具及环境介绍 2

2.1 着迷Wiki网站的开发环境 2

2.2 本项目应用的主要开发工具 2

2.2.1 Node.js 2

2.2.2 Adobe Photoshop CS4 2

2.2.3 Hbuilder 3

2.2.4 火狐浏览器 3

2.3 本项目应用的主要开发技术 4

2.3.1 Vue.js 语言 4

2.3.2 DIV+CSS 4

2.3.3 jQuery框架 4

3 项目概述 5

3.1 项目概述 5

3.2 项目风险 5

3.3 项目进度计划 5

4 项目需求分析 6

4.1 业务分析 6

4.1.1 业务工作角色分析 6

4.2 概要设计 7

4.2.1 网站结构图 7

4.2.2 网站概要说明 8

4.3 现行研究存在的问题及解决办法 10

5 数据结构设计 11

5.1 主数据结构 11

5.2 子路由数据结构 12

6 网站实现 15

6.1 登录及注册模块 15

6.1.1 登录模块 15

6.1.2 注册模块 16

6.2 网站页面 17

6.2.1 网站首页界面 17

6.2.2 分路由Wiki首页界面 19

6.2.3 子路由页面 21

6.3 说明 22

6.3.1 项目文件命名规范 22

6.3.2 项目文件结构说明 22

6.4 Router文件夹下index.js 文件（即路由）配置 23

7 测试 28

7.1 测试 28

7.2 测试例子及其结果 29

7.2.1 页面效果测试 29

7.2.2 用户登录测试 29

7.2.3 用户注册测试 30

7.2.4 用户评论测试 33

8 总结与展望 35

致谢 36

参考文献 37