1 说明：
1.1 感谢原作者：luozhihao，本人对文件进行删减和对代码进行分析，复习相关vue的知识。
1.2 适合小白，通俗易懂，一秒入门。
1.3 推荐指数：★★
2 传送门地址：在index.html中，你懂的，此处省略。
3 效果图：
4 原文件结构：vue-puzzle-master
对小白来说，要入门头都要炸了，对吧？
只要游戏能够运行，对其他暂时无关的进行删除，加工后如下。
5 加工删除后的文件结构：
暂时命名文件夹为：555
5.1 index.html文件介绍：打开游戏的主界面，入口。
注释和修改后的代码，传送门的下载地址在此处。
<code>
vue-puzzle
/<code>5.2 复习知识====bootstrap.css 和 boostrap.min.css 的区别
5.2.1 前者是未压缩的，后者是压缩过的。
5.2.2 一般情况下，未压缩的用于开发环境，如果程序出错方便调试。
而压缩过的用生生产环境，大大减少网络数据传输量，便之更快更节约流量。
5.2.3 boostrap.min.css也是完整的库，只不过通过工具压缩，令相同的代码所占空间更小，
从而提升web性能，减少宽带的压力，然而这是以文件的可读性为代价的。当你打开min文件之后会发现代码挤在一起几乎没办法阅读。
========================
5.2.4 在线引入方法
5.2.5 也可以本地引入方法
复制上面的地址，用浏览器打开，按ctrl+a全选复制，新建一个txt，黏贴保存，重新命名为bootstrap.min.css，注意路径。
5.2.6 本游戏中，在app.vue中注释掉引入本地也能正常使用，此处只是复习相关知识。
6 为了便于理解，突出重点，将文件夹555，的内容进行无关删除，改为如下：
6.1 改的目的是适合小白，通俗易懂，突出重点，正规项目时不建议。
6.2 图
6.3 好了，一个用vue构建的html的游戏主要包含这几个模块。
7 分析上述5个文件的结构和作用
7.1 index.html，代码上面已经有了，就是一个打开的页面，代码结构和html一样。在body的div中有一个app接口，导入build.min.js文件。我注释掉一些东西，注意有些老版的浏览器可能不兼容。
7.2 main.js是模块的主入口；routers.js是路由模块的设置，build.min.js是游戏的主要核心js代码。
7.3 重点注意App.vue文件，这是一个vue特色的文件，有三个标签（代码块）。
7.3.1 标签：写类似html的div内容。
7.3.2
