使用Visual Studio 2012 開發 Html5 應用Html5現在發展的怎麼樣了？ Html5Client 工程模版 Html5 MVC4 Razor Responsive Web Template

Visual Studio 一直以來是開發微軟旗下應用的利器，隻要是開發微軟相關的應用無論是Windows程式，WPF，Asp.Net，WinRT Surface，WindowsPhone 等微軟旗下的應用都可以使用Visual Studio 來開發。如果您已經非常習慣了Visual Studio 的UI和操作，是不是有時候也想使用Visual Studio 像DreamWeaver 一樣來開發純浏覽器的Html5的應用呢? 後端您可以用Asp.Net，也可以使用非微軟的技術如: Ruby on Rails 或者Php 等，但是前端浏覽器的Html5開發完全可以使用Visual Studio 來開發，如果您已經習慣了Visual Studio，那麼開發效率應該比用DreamWeaver還高。

Html5現在發展的怎麼樣了？好像大家都在讨論Html5，Html5究竟怎麼樣，它的技術成熟了嗎? 看下Html5 的Hype Cycle:

<a href="http://images.cnitblog.com/blog/139239/201306/21102551-a809319423284cdeaaab5c9081662190.jpg"></a>

使用Visual Studio 的Html5 模版，可以非常友善的建立一個Html5 Website, 隻是簡單的點幾下，一個Html5的Website就建好了。

在Visual Studio 2012裡的New Project下搜尋關鍵字html5:

<a href="http://images.cnitblog.com/blog/139239/201306/21102553-9ed6c0183e704b3d8b54a34f8bd24ac2.jpg"></a>

會出現：Html5Client 和Html5 MVC4 Razor Responsive Web Template 這兩個工程模版。這兩個工程模版非常棒，可以幫你快速生成Html5 的 Website.

Html5Client 工程建立好以後，可以看到工程沒有引用 .Net的dll，隻有必要的頁面，JavaScript，和圖檔，都是前端浏覽器需要的東西：

<a href="http://images.cnitblog.com/blog/139239/201306/21102557-32d5b8508158456e8a87a2734e344e89.png"></a>

Scripts 包含了一些常用庫，如jQuery, bootstrap, knockout, modernizr, … 類似bootstrap，示例的幾個頁面也把常用的頁面元素給列出來了：

<a href="http://images.cnitblog.com/blog/139239/201306/21102559-1151989f97354a2393b1a31830617e56.jpg"></a>

<a href="http://images.cnitblog.com/blog/139239/201306/21102601-6a1eb8d7c8a74bbb9890fbecab563314.jpg"></a>

在這個工程基礎上，您可以開始裁剪，開始您自己的Html5Client工程了。

Html5 MVC4 Razor Responsive Web Template 工程模版不同于Html5Client模版，這個模版加入了.Net的後端示例代碼，可以快速搭起一個Asp.Net MVC4的響應式Website，其實這個模版是在原有的 MVC4 Razor工程模版基礎之上，加入了Html5的響應式設計。

<a href="http://images.cnitblog.com/blog/139239/201306/21102603-d47e92b79fbc4070bb4459be342ab1fe.png"></a>

<a href="http://images.cnitblog.com/blog/139239/201306/21102604-5914c7dea9c442d693b6db56f1c6b182.png"></a>

這個模版内置了jQuery mobile 庫，同時為頁面設計了Phone的View 和 Tablet 的View.

<a href="http://images.cnitblog.com/blog/139239/201306/21102606-c27bd88aaaa04b84aea84ea94d2db837.png"></a>

當開發Html5 Website時，使用Visual Studio 的這兩個工程模版，搭建項目開始開發工作，應該會為您節約些時間，提高效率吧。

<a></a>