使用Visual Studio 2022开发前端的详细教程
作者:寻找无名的特质 发布时间:2023-07-02 05:30:35
前端开发环境多数基于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>
运行效果如下:
来源:https://www.cnblogs.com/zhenl/p/16227232.html
猜你喜欢
- 博主在这个问题上卡了挺久的,贴出来解决方法帮助需要的朋友,直接上代码(测试环境:win10+Python2.7):# coding=utf-
- 前言Always On 可用性组活动辅助功能包括支持在辅助副本上执行备份操作。 备份操作可能会给 I/O 和 CPU 带来很大的压力(使用备
- 本文实例为大家分享了python计算器的具体代码,供大家参考,具体内容如下主要用到的工具是Python中的Tkinter库比较简单直接上图形
- 一. torch.cat()函数解析1. 函数说明1.1 官网:torch.cat(),函数定义及参数说明如下图所示:1.2 函数功能函数将
- 伴随着自然语言技术和机器学习技术的发展,越来越多的有意思的自然语言小项目呈现在大家的眼前,聊天机器人就是其中最典型的应用,今天小编就带领大家
- 目的是能使用Python进行rtmp推流,方便在h264帧里加入弹幕等操作。librtmp使用的是0.3.0,使用树莓派noir官方摄像头适
- 目录while语句if 语句for语句BreakContinuePass流程控制无非就是if else之类的控制语句,今天我们来看一下Pyt
- 每一字符串字符文字有一个字符集和一个校对规则,它不能为空。一个字符串文字可能有一个可选的字符集引介词和COLLATE子句:[_charset
- 基于微信开放的个人号接口python库itchat,实现对微信好友的获取,并对省份、性别、微信签名做数据分析。效果:直接上代码,建三个空文本
- PHP mysqli_set_charset()函数设置默认客户端字符集:<?php// 假定数据库用户名:root,密码:12345
- 概要基于 golang Gin 框架开发 web 服务时, 需要时不时的 go build , 然后重启服务查看运行结果.go build
- 本文实例讲述了Python流行ORM框架sqlalchemy安装与使用。分享给大家供大家参考,具体如下:安装http://docs.sqla
- 1. 引言在Python相关代码中,我们经常会遇到如下代码段:# stuffif __name__ == "__main__&qu
- 1. 安装pip3yum install python34-pip2. 安装python34develyum install python3
- 上一章请点击查看:pygame实现俄罗斯方块游戏(基础篇2)现在继续一、给每个方块设置不同的颜色根据代码这里可以判断正在下落的方块在那些Bl
- MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的。点击进入:下载地址1.下面是msi的下载和安装的步骤点击进去之后根据自己
- 这几天无聊的很看着china.nba.com焦点图效果捣鼓了一下有待完善!兼容性:IE6 , IE7 &nb
- 如何制作一个分页程序?确实,翻页程序可以相互借鉴,但具体到每一需求,还是有较大差别的。代码入下,供参考:<%language=&quo
- 一些命令行工具的使用能够大大简化代码脚本的维护成本,提升复用性,今天主要是借助于python提供的几种主流的参数解析工具来实现简单的功能,主
- 过程名:ManualPagination作 用:采用手动分页方式显示文章具体的内容参 数:ArticleID,strContentSub&n