1 说明：
1.1 感谢原作者：luozhihao，本人对文件进行删减和对代码进行分析，复习相关vue的知识。
1.2 适合小白，通俗易懂，一秒入门。
1.3 推3 V :荐指数：★★
2 传送门地址：6 w M *在index.html中，你懂的，此处省略。
3 效果图：
4 原文件结构：vue-puzzle-master
对小白来说，要入门头都要炸了，对吧？
只要游戏能够运行，对其他暂时无关的进行删除，加工后如下。
5 加工删除后的文件结构：
暂时命名文件夹为：555
5.1 index.html文件介绍：打开游戏的主界面，入口。
注释和修改后的代码，传送门的下载地址在此处。0 = V V
<!--一款基于vue的拼图小游戏介绍-->
<!--https://github.com/luozhihao/vue-puzzle-->
<!DOCTYPE html6 r I&gN M pt;
<html>
<head>
<meta charseR c t Z p k c 2 9t=\"utf-8\">
<!--meta http-eqh F ! z G #uiv=p r @ ^ - u E c I\"X-UQ R nAo f ; ^ . ` W O Z-Compatible\" content=\"IE=edge,chrome=1\"-->
<!--meta name=\"renderer\" content=, # 3 j ) -\"webkit\"-->
<!--meta name=\"viewport\" content=\"width=device-a . } X I vwidth, initial-scale=1.0\"-->
<D B + 8title>vue-puzzle</title>
</h9 ` O Bead>
<body>
<div id=\0 9 2 G"app\"></div>
<!--script type=\"text/javascript\" src=\"./dist/build.min.js\"></script-->
<script src=\"./dist/build.min.js\"></script>
</body>
</html&| e J >5.2 复习知识====bootstrap.css 和 boostrap.min.css 的区别
5.2.1 前者是未压缩的，后者是压缩R ) V p Y A ? q过的。
5.2.2 一般情况下，未压缩的用于开发环境，如果程序出错方便调试。
而压缩过的用生生产环境，大大减少网络数据传输量，便之更快更节约流量。
5.2.3 boostrap.mr T 4 A kin.css也是完整的库，只不过通过工具压缩，令相同的代码所占空间更小，
从而提升web性能，减少宽带的压力，然而这是以文件的可读性为代价的。当你打开min文件之后会发现代码挤在一起几乎没办法阅读。
========================
5.2.4 在线引入方法
&q 2 z I k 4lX G , l Y F _ bt;link href=\s o t }"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">
5.2.5 也可以本地引入方法
复制上( F m 8 3 | W面的地址，用浏览器打开，按ctrl+a全选复制，新建一个txt，) T _ O黏贴保存，重新命名为bootstrap.min.css，注意路径。
5.2.6 本游u 3 Y 2 h ( K c戏中，在app.vue中注释掉引入本地也能正常使用，此处只是复习相关知识。
6 为了便于理解，突出重点，将文件夹555，的内容进行无关删除，改为如下：
6.1 改的目的是适合小白，通俗易懂，突出重点，正规项目时不建议。
6.2 图
6.3 好, U % V 了，一个用vue构建的htmlC W Z $ R D W }的游戏主要包含这几个模块( a G F。
7 分析上述5个文件的结构和作用
7.1 index.html，代码上面已经有了，就是一个打z u Z开的页面，代码c s E A K L d结构和html一样。在body的div中有一个app接口，导入build.min.js文件。我注释掉一些东西，注意有些老q 1 7版的浏览器可能不兼容。
7.2 main.js是模块的主入口；routers.js是路由模块的设置，build.min.js是游戏的主要核心js代码。
7.3 重点注意App.vue文件，这是一个vue特色的文件，有三个标签（代码块）。s } K 0 s 3 K l 7
7.3.1 &l7 K . L p Y j ?t;template>标签：写类似b ] f phtml的div内容。
7.3.2 <script>标签：写类似html的JavaScript（js）文件。
7.3.3 <style>标签：写类似与html的css文件。u @ _
8 熟悉到此为止，有空进一步学习vud l @e的相关知识，v. J l s = ~ 7 .ue还是很火的，注意E c w 2 G b p p如果报错的话，可能需要提前安装git或者vue。