欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Visual?Studio?2022開發(fā)前端的詳細(xì)教程

 更新時(shí)間:2022年05月06日 08:35:46   作者:尋找無名的特質(zhì)  
這篇文章主要介紹了使用Visual?Studio?2022開發(fā)前端,在瀏覽器中可以使用CDN源引用需要的客戶端庫,可如果在企業(yè)內(nèi)網(wǎng)使用,無法訪問CDN源時(shí),需要將客戶端庫下載到本地使用,需要的朋友可以參考下

前端開發(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)文本隔行換色的方法

    這篇文章主要介紹了使用JavaScript和CSS實(shí)現(xiàn)文本隔行換色的方法,當(dāng)然最普通的也可以單純用CSS實(shí)現(xiàn),需要的朋友可以參考下
    2015-11-11
  • JS實(shí)現(xiàn)jQuery的append功能

    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.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
  • JavaScript仿聊天室聊天記錄

    JavaScript仿聊天室聊天記錄

    這篇文章主要為大家詳細(xì)介紹了JavaScript仿聊天室聊天記錄實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • 淺談javascript函數(shù)式編程

    淺談javascript函數(shù)式編程

    你是否知道JavaScript其實(shí)也是一個(gè)函數(shù)式編程語言呢?本文將教你如何利用JavaScript的函數(shù)式特性。
    2015-09-09
  • 簡(jiǎn)單談?wù)刯avascript中的變量、作用域和內(nèi)存問題

    簡(jiǎn)單談?wù)刯avascript中的變量、作用域和內(nèi)存問題

    這篇文章主要介紹了簡(jiǎn)單談?wù)刯avascript中的變量、作用域和內(nèi)存問題的相關(guān)資料,需要的朋友可以參考下
    2015-08-08
  • javascript實(shí)現(xiàn)捕捉鍵盤上按下的鍵

    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)代碼

    javascript 打字游戲?qū)崿F(xiàn)代碼

    javascript 打字游戲?qū)崿F(xiàn)代碼,非常不錯(cuò)的效果,功能還不是很完善,喜歡的朋友可以參考下。
    2010-04-04
  • javascript document.referrer 用法

    javascript document.referrer 用法

    document對(duì)象的referrer屬性,返回導(dǎo)航到當(dāng)前網(wǎng)頁的超鏈接所在網(wǎng)頁的URL。
    2009-04-04
  • javascript中如何判斷類型匯總

    javascript中如何判斷類型匯總

    這篇文章主要給大家介紹了關(guān)于javascript中如何判斷類型的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05

最新評(píng)論