1 說明：

1.2 適合小白，通俗易懂，一秒入門。

2 傳送門地址：在index.html中，你懂的，此處省略。

3 效果圖：

4 原檔案結構：vue-puzzle-master

對小白來說，要入門頭都要炸了，對吧？

暫時命名資料夾為：555

5.1 index.html檔案介紹：開啟遊戲的主介面，入口。

註釋和修改後的程式碼，傳送門的下載地址在此處。

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.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 <template>標籤：寫類似html的div內容。

7.3.2 <script>標籤：寫類似html的JavaScript（js）檔案。

7.3.3 <style>標籤：寫類似與html的css檔案。

8 熟悉到此為止，有空進一步學習vue的相關知識，vue還是很紅的，注意如果報錯的話，可能需要提前安裝git或者vue。