使用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-11JS實(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簡(jiǎn)單談?wù)刯avascript中的變量、作用域和內(nèi)存問題
這篇文章主要介紹了簡(jiǎn)單談?wù)刯avascript中的變量、作用域和內(nèi)存問題的相關(guān)資料,需要的朋友可以參考下2015-08-08javascript實(shí)現(xiàn)捕捉鍵盤上按下的鍵
JavaScript取得按下鍵盤的鍵是哪個(gè),通過創(chuàng)建一個(gè)event.keyCode對(duì)象,可有效獲取鍵盤上的鍵,運(yùn)行代碼后,點(diǎn)擊鍵盤上的任意鍵,網(wǎng)頁上顯示你按下的是哪個(gè)鍵。2015-05-05javascript document.referrer 用法
document對(duì)象的referrer屬性,返回導(dǎo)航到當(dāng)前網(wǎng)頁的超鏈接所在網(wǎng)頁的URL。2009-04-04