前端開發環境多數基于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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/469764.html
標籤：.NET技术
上一篇：brother S2A資料采集兄弟S500 CNC監控brother S700實時監控兄弟CNC S1000狀態采集