使用Visual?Studio?2022開發(fā)前端的詳細(xì)教程
前端開發(fā)環(huán)境多數(shù)基于Node.js，好處不多說了。但與使用Visual Studio開發(fā)的后端Asp.Net Core項(xiàng)目一起調(diào)試，卻不是很方便，所以試著在Visual Studio 2022中開發(fā)前端。
創(chuàng)建宿主項(xiàng)目
首先創(chuàng)建一個(gè)空的Asp.Net Core項(xiàng)目作為宿主，創(chuàng)建完成后將Program.cs中的代碼修改如下：
var builder = WebApplication.CreateBuilder(args); var app = builder.Build(); app.UseDefaultFiles(); app.UseStaticFiles(); app.Run();
app.UseStaticFiles()使這個(gè)Web應(yīng)用支持靜態(tài)文件，app.UseDefaultFiles()使這個(gè)Web應(yīng)用使用缺省的文件，比如index.html作為缺省的首頁。
然后在項(xiàng)目中創(chuàng)建wwwroot目錄，在這個(gè)目錄中，保存靜態(tài)文件。然后創(chuàng)建index.html，寫個(gè)Hello World，就可以運(yùn)行了。
安裝前端庫
在瀏覽器中可以使用CDN源引用需要的客戶端庫，可如果在企業(yè)內(nèi)網(wǎng)使用，無法訪問CDN源時(shí)，需要將客戶端庫下載到本地使用。
Visual Studio使用libman維護(hù)客戶端庫庫。在解決方案資源管理器的項(xiàng)目名稱上按右鍵，選擇“管理客戶端庫”：
會(huì)在項(xiàng)目中創(chuàng)建libman.json文件，在這個(gè)文件中保存需要引用的客戶端庫。如果需要添加客戶端庫，在解決方案資源管理器的項(xiàng)目名稱上按右鍵，選擇添加->客戶端庫：
可以搜索并選擇安裝的客戶端庫了：
在瀏覽器引入模塊
現(xiàn)在可以進(jìn)行客戶端開發(fā)了，這種模式還是使用瀏覽器作為開發(fā)運(yùn)行環(huán)境。好消息是瀏覽器也開始支持引入模塊了，如Chrome和Edge已經(jīng)支持importmap，將js源導(dǎo)入為模塊。比如，下面的代碼引入vue：
<script type="importmap">
{
"imports": {
"vue": "./lib/vue/vue.esm-browser.js"
}
}
</script>在type="module"的script標(biāo)記中，可以使用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>模塊化開發(fā)
在瀏覽器上直接開發(fā)，還不支持vue等后綴的模塊化文件，但可以使用js文件編寫?yīng)毩⒌哪K，比如，下面的模塊保存在vuehello.js中：
export default {
data() {
return { message: "你好,模塊" }
},
template: `<div>{{ message }}</div>`
}在主頁面中可以使用importmap進(jìn)行映射，并使用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>運(yùn)行效果如下：
到此這篇關(guān)于使用Visual Studio 2022開發(fā)前端的文章就介紹到這了,更多相關(guān)Visual Studio 2022前端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用JavaScript和CSS實(shí)現(xiàn)文本隔行換色的方法
這篇文章主要介紹了使用JavaScript和CSS實(shí)現(xiàn)文本隔行換色的方法,當(dāng)然最普通的也可以單純用CSS實(shí)現(xiàn),需要的朋友可以參考下2015-11-11
JS實(shí)現(xiàn)jQuery的append功能
jQuery中可以直接使用$el.append()為元素添加字符串型dom, 但是最近轉(zhuǎn)戰(zhàn)Vue, 再使用jQuery明顯不合適了, 所以通過查找資料, 封裝一個(gè)可以實(shí)現(xiàn)同樣效果的方法.2021-05-05
使用window.prompt()實(shí)現(xiàn)彈出用戶輸入的對(duì)話框
window對(duì)象的最后一種對(duì)話框是提示對(duì)話框，它顯示了預(yù)先設(shè)置的信息并提供文本域供用戶輸入應(yīng)答。它包括兩個(gè)按鈕，即Cancel和Ok，允許用戶用兩個(gè)相反的期望值來關(guān)閉這個(gè)對(duì)話框：取消整個(gè)操作或接收輸入到對(duì)話框中的文本2015-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript仿聊天室聊天記錄實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
你是否知道JavaScript其實(shí)也是一個(gè)函數(shù)式編程語言呢？本文將教你如何利用JavaScript的函數(shù)式特性。2015-09-09
簡(jiǎn)單談?wù)刯avascript中的變量、作用域和內(nèi)存問題
這篇文章主要介紹了簡(jiǎn)單談?wù)刯avascript中的變量、作用域和內(nèi)存問題的相關(guān)資料,需要的朋友可以參考下2015-08-08
javascript實(shí)現(xiàn)捕捉鍵盤上按下的鍵
JavaScript取得按下鍵盤的鍵是哪個(gè)，通過創(chuàng)建一個(gè)event.keyCode對(duì)象，可有效獲取鍵盤上的鍵，運(yùn)行代碼后，點(diǎn)擊鍵盤上的任意鍵，網(wǎng)頁上顯示你按下的是哪個(gè)鍵。2015-05-05
javascript 打字游戲?qū)崿F(xiàn)代碼，非常不錯(cuò)的效果，功能還不是很完善，喜歡的朋友可以參考下。2010-04-04
javascript document.referrer 用法
document對(duì)象的referrer屬性，返回導(dǎo)航到當(dāng)前網(wǎng)頁的超鏈接所在網(wǎng)頁的URL。2009-04-04
這篇文章主要給大家介紹了關(guān)于javascript中如何判斷類型的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05