A. Vue項目中引入第三方已做好的H5游戲
Vue網站項目中，需要引入第三方已做好的H5游戲
方法一，對游戲做單頁重構；
方法二，利用static文件夾的特性，直接引入整個H5游戲。
方法一，重構涉及的工作量大，而且對於H5游戲和其掛載的網站項目本身來講，H5游戲一般是獨立的頁面，極少和其掛載的網站項目本身有共用組件，所以沒必要合並入單頁中。
方法二，將游戲部署在vue項目static文件夾中，在主項目為H5游戲做一個索引鏈接組件，點擊時跳轉到static文件夾的游戲文件就好。
1，我們來看一下vue項目打包前後的文件目錄結構，可以發現開發環境中static目錄中的文件被原封不動的放進生產dist文件中的static文件夾中，而且static文件夾和主index.html是同級的，所以我們可以直接把做好的H5游戲文件直接放入static文件夾中以待訪問：
2，在vue項目中建立一個game.vue文件，作為game跳轉的索引，跳轉地址寫法為：
這里說明一下目錄結構，打包後的vue項目，index.html和static文件夾同級，所以開頭為./static.....
此設置已驗證OK，需要看源碼的同學，可以克隆如下項目查看：
demo的github地址： https://github.com/tom-wong666/xiaoa.git
B. h5是什麼，簡單講
先科普一下，HTML5並不是一項技術，而是一個標准。
標準的意思就是：學生准則手冊。你可以按照準則做，甚至可以超出准則更加嚴格的要求自己，也可以不按照準則來，但是會被老師訓斥小夥伴討厭，別人都不找你玩，就像IE6一樣。
那HTML5這些標准瀏覽器廠商到底姿持不姿持呢這要看他們各自的尿性了。像chrome這種不僅在很多標准上支持的非常好，還積極上進很多地方超出了標准，支持一些標准中還是草案的部分。
所以其實要麼我們是作為理論派討論HTML5標准，要麼是作為實踐派討論HTML5標准在某瀏覽器的應用。但是實際上我們在說到H5的時候，並不是指標准，也不是指標準的應用，而是一個硬生生造出來的奇怪概念合集，所以我是旗幟鮮明的反對這個稱呼的。
最近一年的時間，我主要靠這個東西養家（並沒有家）糊口。所以我是懂得甲方打電話過來詢問，「你是不是會做H5開發」的時候，我知道他們要的是那種可以在朋友圈分享的，看起來很酷炫的小頁面，他們實際要的東西拆開來看大概包括以下技術點;
1.頁面素材預載入技術，可以使用createJS之中的preloadJS。我沒有看preloadJS的源碼，不過預載入並不是HTML5標准中更新的方法。
2.音樂載入播放技術，createJS中同樣有soundJS可以實現，而且這部分說起來確實是HTML5標准支持的內容，在上個時代並沒有audio這樣的標簽。
3.可以滑動的頁面，大多數是用了swiper.js這個Jquery插件，也有一些是手寫的swipe，比較拙劣的手寫版頁面是不會跟手滑動的，其中touchstart等四個touch系列的事件是HTML5標准中的事件
4.可以塗抹擦除，多半是canvas疊加層，canvas是HTML5標准裡面的標簽，是代表了先進生產力的標簽。
5.有動態的文字和圖片，常見的是使用了css3或者直接使用js動畫。很多時候提到HTML5多半還會帶上CSS3，而CSS的分級又是另外的一個問題了，在不同的項目標准上，CSS會獨立定級，以後應該不會有CSS4這個東西，所以大家也不用擔心在H5以後又冒出來了C4（不過真是想用C4炸死那些每天把H5掛在嘴上的人）
6.可以填表報名，這是最基本的表單，是有網頁以來就有的東西。
7.可以支持分享自定義的文案和圖片，這個是用到了微信的jssdk，和HTML標准半毛錢關系都沒有。
8.還有其他我想起來再補充的。
所以我們在談論H5的時候，實際上是一個解決方案，一個看起來酷炫的移動端onepage網站的解決方案。而這個解決方案不僅包含了HTML5新增的audio標簽，canvas，拖拽特性，本地存儲，websocket通信，同時也包括了盒模型，包括絕對定位，包括一切前端的基本知識。
有學弟來問我說，學長我想學H5，應該從哪裡開始
我說HTML5新增特性在W3C上都可以查得到的。
學弟說，不，我想學的是H5，想做H5的頁面。
於是我猜測他所指的就是上面論述的這種酷炫小頁面，我就說，那你要先學習HTML，包括HTML5的新標准和之前的全部標准，然後學CSS以及CSS3，了解它們在瀏覽器的實現情況，原生JS了解一點就可以，大多的操作可以用Jquery，了解常用的幾個Jquery插件的用法，應該就差不多了。如果想要做更酷炫的的，學一下egret或者cocos2d更好。如果要優化載入速度，還要學一下grunt一類的自動化工具。微信的sdk有很多坑，至少nodejs或者php一類的後端語言要會一點。
學弟說，那這不就是前端了么我只是想學H5啊。
所以你看，當我們對一個概念的內涵無法統一的時候，我們根本不知道彼此之間在談論的是什麼。
」H5「本應是一個技術合集，卻被意會成了一項技術，變成可以在質上而不是量上描述的概念。
對於營銷來說，我們只要講我們可以做H5或者不能做，這種定性的描述就夠了。但是對於技術上，這是定量的事情，只能在具體某個技術項上是否，無法對這個本不存在的概念說是否。
就比如我遇到過有甲方說，我們之前找了一個人做H5，做的還不錯，但是這個case他又說做不了，我也搞不懂H5和H5之間也有那麼大差別嗎我只能笑笑和他說，世界這么大，各種各樣的H5都是有的。
這就是為什麼我反對H5，因為這個名詞和它表示的內涵是嚴重不符的，這讓我們難以溝通，讓營銷人和技術人之間產生誤解，讓渾水摸魚的培訓師們賺的盆滿缽滿，讓技術新人不踏踏實實的學習技術。
C. 如何在移動設備上調試html5開發的網頁
1、打開手機web檢查器。
通過【設置】>【Safari】>【高級】>【Web檢查器】打開。見下圖（點擊查看大圖），並且你會看到該選項下面對電腦操作的相應描述，照做就好。
