Web Template Studio 发布！在 VS Code 中轻松创建 Web 应用

2024-06-11 06:50:53

作为一个 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 应用是不是很方便？赶紧来试试吧！

插件下载：

https://marketplace.visualstudio.com/items?itemName=WASTeamAccount.WebTemplateStudio-dev-nightly
GitHub：

https://github.com/Microsoft/WebTemplateStudio

.NET社区新闻，深度好文，欢迎访问公众号文章汇总 http://www.csharpkit.com

Web Template Studio 发布！在 VS Code 中轻松创建 Web 应用相关推荐

在 Visual Studio Code 中体验 Java Web 开发
上一篇博文介绍了如何将 Visual Studio Code 作为 Java 的开发环境.我们知道,Java Web 开发是 Java 开发的主战场,那么在 VS Code 中开发 Java Web ...
在VS Code中直接调试Web程序，是怎样一种体验？
前言要在VS Code中启动Chrome或Microsoft Edge中调试任何Web程序,您只需按F5或选择菜单"运行"->"启动调试"来启动会话. ...
vscode vue解决跨域_在vs code 中如何创建一个自己的 Vue 模板代码
首先,在vs code 中打开定义模板代码的地方第一步,点击"设置"图标按钮,在弹出的菜单中点击的"用户代码片段"(也就是模板) 第二步,在弹出的框中选择新建 ...
还没使用过Web Worker? 推荐一款开源工具Workerize-Loader，让你在webpack项目中轻松使用Web Worker
还没使用过Web Worker? 推荐一款开源工具Workerize-Loader,让你在webpack项目中轻松使用Web Worker Workerize-Loader 将模块及其依赖项移动到 W ...
eclipse导入java web项目_Eclipse中轻松导入web项目的方法
今天介绍的是Eclipse中轻松导入web项目的方法,相信通过了解Eclipse中轻松导入web项目的操作步骤,大家对Eclipse编程工具一定会有更多的了解的! Eclipse中轻松导入web项目的 ...
wordpress创建_如何在WordPress中轻松创建T恤店
wordpress创建 Recently one of our readers asked if it was possible to add an automated T-Shirt shop in ...
JavaWeb开发---B/S和C/S模式 tomcat服务器 Tomcat项目部署和发布静态网页和动态网页 tomcat对web项目的目录要求使用idea开发工具创建web项目设置默认首页
目录 1. B/S和C/S模式 1.1 C/S模式 1.2 B/S模式 1.3 B/S和C/S区别 2.服务器 3.web 服务器 3.1.IIS 3.2.Tomcat 3.3.Zeus 3.4.Ng ...
在 VS Code 中轻松 review GitHub Pull Requests
相信大家在平时工作或者自己的项目中,一定都有在 GitHub 上进行 Code Review 的经历.对于韩老师来说,不论是平时工作的项目,还是自己的业余项目,代码基本都是在 GitHub 上.所以, ...
eclipse中怎样创建web项目
这篇博客主要是写怎样配置tomcat 在eclipse中创建web项目,全部按照默认就好.可以选择加入.xml文件,注意一下然后在windows ->preference中搜索tomcat . ...

最新文章

热门文章