Web Template Studio 發佈！在 VS Code 中輕鬆建立 Web 應用

摘要： 統一各個框架的模板仍是頗有價值的。

• 原文：Web Template Studio 發佈！在 VS Code 中輕鬆建立 Web 應用
• 做者：韓駿

Fundebug經受權轉載，版權歸原做者全部。

做爲一個 Web 應用開發者，Scaffolding Tool（腳手架工具）必定是在建立項目時的重要工具。許多開發者會習慣於使用基於 CLI 的腳手架工具來建立 Web 應用，也有許多開發者喜歡使用相似於 VS IDE 的基於 UI 的 Wizard 嚮導。

近期（2019 年 5 月 15 日），微軟發佈了 Web Template Studio for VS Code，使得開發者在 VS Code 中能夠經過基於 UI 的 Wizard 嚮導，快速地建立 Web 應用。

下面咱們就來看看，如何使用 Web Template Studio 方便地建立 Web 應用。

打開 Web Template Studio

安裝好 Web Template Studio 後，在 VS Code 中，按下 Ctrl+Shift+P，而後輸入 Web Template Studio: Launch，按下回車，就能打開 Web Template Studio 了。

項目信息

在 Web Template Studio 首頁，輸入項目名稱和項目文件夾的路徑。

項目類型

選擇將要建立的項目類型。目前僅支持全棧 Web 應用。在將來，Web Template Studio 會考慮支持單頁應用以及 RESTful 應用。

框架

目前，Web Template Studio 支持 React 做爲前端框架，Node.js/Express 做爲後端框架。固然，Augular 和 Vue.js 的童鞋不要着急~ 會有更多的框架支持的，文末會提到~

頁面模板

Web Template Studio 內置了各種頁面模板，你能夠選擇適合的頁面模板，來快速構建你的項目。

雲服務

雲計算時代已經來臨，一個好的 Web 應用固然離不開好的雲計算服務。經過 Web Template Studio，你能夠選擇 Azure Functions 和 Azure Cosmos DB 爲你的 Web 應用添磚加瓦！

生成 Web 應用

通過前面的一系列步驟以後，點擊「Generate Template」，就能快速地生成你的 Web 應用啦！

運行 Web 應用

打開新生成的 Web 應用，根據 README 的指引，運行「yarn install」和「yarn start」，你的 Web 應用立刻就能在本地運行起來了！

更多的功能支持

經過打開 Preview Mode 的開關，你能夠得到 Angular 的支持。Web Template Studio 在短時間內也將添加 Vue.js 的支持。

怎麼樣？使用 Web Template Studio 來建立 Web 應用是否是很方便？趕忙來試試吧！

• 插件下載：marketplace.visualstudio.com/items?itemN…
• GitHub：github.com/Microsoft/W…