使用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前端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文给大家分享日常中比较熟悉的常用的几个算法用JS的实现，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-11-11
这篇文章主要为大家详细介绍了JavaScript实现公告栏上下滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
在TypeScript里面,也会遇到需要遍历对象的时候,下面这篇文章主要给大家介绍了关于如何在TypeScript中正确的遍历一个对象的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了js如何清空input file的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了antDesign 自定义分页样式的实现代码，这里用到了自定义指令,如果大家用不到可以按照自己的实际效果开发,本文通过实例代码给大家详细讲解，需要的朋友可以参考下2022-10-10
JavaScript常量又称字面常量，是固化在程序代码中的信息。变量的主要作用是存取数据，提供一个存取信息的容器。2009-07-07
这篇文章主要介绍了如何用JS解析剪切板里的excel内容，对解析excel感兴趣的同学，可以参考下2021-04-04
如何用javascript来判断请求的url/链接有效(可连接,可用)?需要的朋友可以参考下。2011-10-10
JS树形菜单组件Bootstrap TreeView使用方法详解
这篇文章主要为大家详细介绍了js组件Bootstrap TreeView使用方法，本文一部分针对于bootstrap的treeview的实践，另一部分是介绍自己写的树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了微信小程序自定义tab实现多层tab嵌套，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论