使用Visual?Studio?2022開發(fā)前端的詳細教程
前端開發(fā)環(huán)境多數(shù)基于Node.js,好處不多說了。但與使用Visual Studio開發(fā)的后端Asp.Net Core項目一起調(diào)試,卻不是很方便,所以試著在Visual Studio 2022中開發(fā)前端。
創(chuàng)建宿主項目
首先創(chuàng)建一個空的Asp.Net Core項目作為宿主,創(chuàng)建完成后將Program.cs中的代碼修改如下:
var builder = WebApplication.CreateBuilder(args); var app = builder.Build(); app.UseDefaultFiles(); app.UseStaticFiles(); app.Run();
app.UseStaticFiles()使這個Web應(yīng)用支持靜態(tài)文件,app.UseDefaultFiles()使這個Web應(yīng)用使用缺省的文件,比如index.html作為缺省的首頁。
然后在項目中創(chuàng)建wwwroot目錄,在這個目錄中,保存靜態(tài)文件。然后創(chuàng)建index.html,寫個Hello World,就可以運行了。
安裝前端庫
在瀏覽器中可以使用CDN源引用需要的客戶端庫,可如果在企業(yè)內(nèi)網(wǎng)使用,無法訪問CDN源時,需要將客戶端庫下載到本地使用。
Visual Studio使用libman維護客戶端庫庫。在解決方案資源管理器的項目名稱上按右鍵,選擇“管理客戶端庫”:
會在項目中創(chuàng)建libman.json文件,在這個文件中保存需要引用的客戶端庫。如果需要添加客戶端庫,在解決方案資源管理器的項目名稱上按右鍵,選擇添加->客戶端庫:
可以搜索并選擇安裝的客戶端庫了:
在瀏覽器引入模塊
現(xiàn)在可以進行客戶端開發(fā)了,這種模式還是使用瀏覽器作為開發(fā)運行環(huán)境。好消息是瀏覽器也開始支持引入模塊了,如Chrome和Edge已經(jīng)支持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>
模塊化開發(fā)
在瀏覽器上直接開發(fā),還不支持vue等后綴的模塊化文件,但可以使用js文件編寫?yīng)毩⒌哪K,比如,下面的模塊保存在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>
運行效果如下:
到此這篇關(guān)于使用Visual Studio 2022開發(fā)前端的文章就介紹到這了,更多相關(guān)Visual Studio 2022前端內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用JavaScript和CSS實現(xiàn)文本隔行換色的方法
這篇文章主要介紹了使用JavaScript和CSS實現(xiàn)文本隔行換色的方法,當然最普通的也可以單純用CSS實現(xiàn),需要的朋友可以參考下2015-11-11使用window.prompt()實現(xiàn)彈出用戶輸入的對話框
window對象的最后一種對話框是提示對話框,它顯示了預(yù)先設(shè)置的信息并提供文本域供用戶輸入應(yīng)答。它包括兩個按鈕,即Cancel和Ok,允許用戶用兩個相反的期望值來關(guān)閉這個對話框:取消整個操作或接收輸入到對話框中的文本2015-04-04簡單談?wù)刯avascript中的變量、作用域和內(nèi)存問題
這篇文章主要介紹了簡單談?wù)刯avascript中的變量、作用域和內(nèi)存問題的相關(guān)資料,需要的朋友可以參考下2015-08-08javascript document.referrer 用法
document對象的referrer屬性,返回導航到當前網(wǎng)頁的超鏈接所在網(wǎng)頁的URL。2009-04-04