前端開發環境多數基於Node.js，好處不多說了。但與使用Visual Studio開發的後端Asp.Net Core項目一起調試，卻不是很方便，所以試著在Visual Studio 2022中開發前端。 創建宿主項目 首先創建一個空的Asp.Net Core項目作為宿主，創建完成後將Program ...
前端開發環境多數基於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:[email protected]/dist/es-module-shims.js"></script>
完整的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script async src="https://ga.jspm.io/npm:[email protected]/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
