使用Visual Studio 2022开发前端的详细教程
目录
- 创建宿主项目
- 安装前端库
- 在浏览器引入模块
- 模块化开发
前端开发环境多数基于Node.js，好处不多说了。但与使用Visual Studio开发的后端Asp.Net Core项目一起调试，却不是很方便，所以试着在Visual Studio 2022中开发前端。
创建宿主项目
首先创建一个空的Asp.Net Core项目作为宿主，创建完成后将Program.cs中的代码修改如下：
var builder = WebApplication.CreateBuilder(args); var app = builder.Build(); app.UseDefaultFiles(); app.UseStaticFiles(); app.Run();
app.UseStaticFiles()使这个Web应用支持静态文件，app.UseDefaultFiles()使这个Web应用使用缺省的文件，比如index.html作为缺省的首页。
然后在项目中创建wwwroot目录，在这个目录中，保存静态文件。然后创建index.html，写个Hello World，就可以运行了。
安装前端库
在浏览器中可以使用CDN源引用需要的客户端库，可如果在企业内网使用，无法访问CDN源时，需要将客户端库下载到本地使用。
Visual Studio使用libman维护客户端库库。在解决方案资源管理器的项目名称上按右键，选择“管理客户端库”：
会在项目中创建libman.json文件，在这个文件中保存需要引用的客户端库。如果需要添加客户端库，在解决方案资源管理器的项目名称上按右键，选择添加->客户端库：
可以搜索并选择安装的客户端库了：
在浏览器引入模块
现在可以进行客户端开发了，这种模式还是使用浏览器作为开发运行环境。好消息是浏览器也开始支持引入模块了，如Chrome和Edge已经支持importmap，将js源导入为模块。比如，下面的代码引入vue：
<script type="importmap">
{
"imports": {
"vue": "./lib/vue/vue.esm-browser.js"
}
}
</script>
在type="module"的script标记中，可以使用import语句：
<script type="module">
import { createApp } from 'vue'
const myapp = {
data() {
return {
message: "你好"
}
}
}
const app = createApp(myapp)
app.mount('#app')
</script>
如果使用Firefox等不支持importmap的浏览器，需要增加es-module-shims：
<script async src="https://ga.jspm.io/npm:es-module-shims@1.5.4/dist/es-module-shims.js"></script>
完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.5.4/dist/es-module-shims.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="importmap">
{
"imports": {
"vue": "./lib/vue/vue.esm-browser.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
const myapp = {
data() {
return {
message: "你好"
}
}
}
const app = createApp(myapp)
app.mount('#app')
</script>
</body>
</html>
模块化开发
在浏览器上直接开发，还不支持vue等后缀的模块化文件，但可以使用js文件编写独立的模块，比如，下面的模块保存在vuehello.js中：
export default {
data() {
return { message: "你好,模块" }
},
template: `<div>{{ message }}</div>`
}
在主页面中可以使用importmap进行映射，并使用import引用：
<div id="app">
{{ message }}
<hello></hello>
</div>
<script type="importmap">
{
"imports": {
"vue": "./lib/vue/vue.esm-browser.js",
"vuehello":"./js/vueHello.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
import hello from 'vuehello'
const myapp = {
data() {
return {
message: "你好"
}
},
components :{
hello
}
}
const app = createApp(myapp)
app.mount('#app')
</script>
运行效果如下：
到此这篇关于使用Visual Studio 2022开发前端的文章就介绍到这了,更多相关Visual Studio 2022前端内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Visual Studio 2022 激活码(亲测可用)
目录 前言 下载地址 版本区别 系统要求 硬件要求 安装 体验 注册码 前言 Visual Studio 2022 正式版来了.新版本带有 go-live 许可证,可供生产使用.在 Visual Studio 2019 的基础上,新版集成开发坏境提供了非常多的改进,包括对 64 位..NET 6 的支持,为核心调试器提供更好的性能. 下载地址 https://visualstudio.microsoft.com/zh-hans/downloads/ 我们下载:https://www.jb51.n
-
Visual Studio 2022下载安装与使用超详细教程
目录 前言 一.Windows安装Visual Studio 2022 1.1 下载地址 1.2 开始安装 1.3 打开Visual Studio 二.Visual Studio创建一个新的项目 2.1 一些准备工作 2.2 创建一个新的项目 2.3 创建C文件 前言 本文用于记录Visual Studio 2022的安装与使用,将持续进行更新.当前版本:V1,2021.12.04 一.Windows安装Visual Studio 2022 1.1 下载地址 首先登陆Visual Studio官
-
Visual Studio 2022最新版安装教程(图文详解)
目录 一.官网下载 二.安装启动 三.项目测试 四.背景图设置 一.官网下载 1.点击蓝色链接---->Visual Studio官网,进入之后是这个界面,选择社区版Community下载(社区版Community是对个人免费的,一共有三个版本),这里下载的是.exe 可执行文件 ,比较小,大约1.57M. 2.安装文件图示: 二.安装启动 1.下载好后,放到桌面,点开 2.点击继续,等待下载安装一段时间后,进入到下图页面,来进行配置工作负荷 3.找桌面应用和移动应用模块中的使用C++的桌面开发
-
使用Visual Studio 2022开发前端的详细教程
目录 创建宿主项目 安装前端库 在浏览器引入模块 模块化开发 前端开发环境多数基于Node.js,好处不多说了.但与使用Visual Studio开发的后端Asp.Net Core项目一起调试,却不是很方便,所以试着在Visual Studio 2022中开发前端. 创建宿主项目 首先创建一个空的Asp.Net Core项目作为宿主,创建完成后将Program.cs中的代码修改如下: var builder = WebApplication.CreateBuilder(args); var ap
-
使用 Visual Studio 2022 开发 Linux C++ 应用程序的过程详解
使用 Visual Studio 2022 开发 Linux C++ 应用程序 使用 Visual Studio 2022 with WSL2 ! Visual Studio 2022 引入了用于 Linux C++ 开发的本机 WSL2 工具集,可以构建和调试 Linux C++ 代码,并提供了非常好的 Linux 文件系统性能.GUI 支持和完整的系统调用兼容性. CMake 是对使用 Visual Studio 2022 的 C++ 跨平台应用开发的推荐,因为它允许在 Windows.WS
-
Visual Studio 2022下载及配置OpenCV4.5.5的详细过程
目录 一.Visual Studio2022下载 二.OpenCV4.5.5下载 三.配置OpenCV环境变量 四. 在Visual Studio2022上配置OpenCV4.5.5 1.打开visual studio 2022创建新项目,选择C++控制台应用 2.点击顶部标签栏 项目 中 属性 3. 点击VC++目录中的包含目录,编辑,选择路径opencv\build\include,添加到我们的包含目录中 4.点击VC++目录中的库目录,编辑,选择路径opencv\build\x64\vc1
-
在Visual Studio Code中配置GO开发环境的详细教程
一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github.com/microsoft/vscode-go 这款插件的特性包括: Colorization 代码着彩色 Completion Lists 代码自动完成(使用gocode) Snippets 代码片段 Quick Info 快速提示信息(使用godef) Goto Definition 跳转到定
-
Visual Studio 2022 Preview 使用 C++20 Module的详细过程
作为C++20的一大特性,据说Module能够大大加快项目的编译速度,最近正好看到微软推出了Visual Studio 2022 预览版,随附了面向 C++20 的最新工具链,赶紧拿来体验一下. 体验项目很简单,就两个小文件: 1. hello.ixx export module mo.hello.cpp; export auto hello() { return "hello cpp module"; } 2. main.cpp import mo.hello.cpp; import
-
Visual Studio 2022 的安装和创建C++项目(图文教程)
目录 1.下载 2.安装 3.接下来就是创建项目 4.如果你想添加多个.cpp,并且想要运行成功,可以右键.cpp.属性, 下面我们来讲一下如何下载安装VS 2022并且创建C++项目. 1.下载 首先,我们来到VS的微软官网下载地址:https://visualstudio.microsoft.com/zh-hans/vs/ 然后点击下图我画红圈的这个版本:Visual Studio Community(VS 社区版)这个版本是不要钱的,社区版其实就是个人版,在开发.调试上有一些限制,下面两个
-
基于C#的图表控件库 ScottPlot编译visual studio 2022
目录 前言 C# 使用 ScottPlot 库 编译 ScottPlot 库 编译 运行 运行例程 小结 前言 基于 C# 的 图表控件库 ScottPlot,开源免费,可以用于开发一些上位机软件,如电压.电流波形的显示,开发[示波器]图形界面,可以显示一些图表.波形,总之功能比较的强大 ScottPlot 库的官方地址:https://github.com/ScottPlot/ScottPlot.git,里面提供了库相关的源代码,还有一些demo例程的源代码 C# 使用 ScottPlot 库