快捷導(dǎo)航

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

更新時(shí)間：2022年05月06日 08:35:46 作者：尋找無(wú)名的特質(zhì)

這篇文章主要介紹了使用Visual?Studio?2022開(kāi)發(fā)前端,在瀏覽器中可以使用CDN源引用需要的客戶(hù)端庫(kù)，可如果在企業(yè)內(nèi)網(wǎng)使用，無(wú)法訪問(wèn)CDN源時(shí)，需要將客戶(hù)端庫(kù)下載到本地使用，需要的朋友可以參考下

創(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作為缺省的首頁(yè)。

然后在項(xiàng)目中創(chuàng)建wwwroot目錄，在這個(gè)目錄中，保存靜態(tài)文件。然后創(chuàng)建index.html，寫(xiě)個(gè)Hello World，就可以運(yùn)行了。

安裝前端庫(kù)

在瀏覽器中可以使用CDN源引用需要的客戶(hù)端庫(kù)，可如果在企業(yè)內(nèi)網(wǎng)使用，無(wú)法訪問(wèn)CDN源時(shí)，需要將客戶(hù)端庫(kù)下載到本地使用。
Visual Studio使用libman維護(hù)客戶(hù)端庫(kù)庫(kù)。在解決方案資源管理器的項(xiàng)目名稱(chēng)上按右鍵，選擇“管理客戶(hù)端庫(kù)”：

會(huì)在項(xiàng)目中創(chuàng)建libman.json文件，在這個(gè)文件中保存需要引用的客戶(hù)端庫(kù)。如果需要添加客戶(hù)端庫(kù)，在解決方案資源管理器的項(xiàng)目名稱(chēng)上按右鍵，選擇添加->客戶(hù)端庫(kù)：

可以搜索并選擇安裝的客戶(hù)端庫(kù)了：

在瀏覽器引入模塊

現(xiàn)在可以進(jìn)行客戶(hù)端開(kāi)發(fā)了，這種模式還是使用瀏覽器作為開(kāi)發(fā)運(yùn)行環(huán)境。好消息是瀏覽器也開(kāi)始支持引入模塊了，如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語(yǔ)句：

 <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>

模塊化開(kāi)發(fā)

在瀏覽器上直接開(kāi)發(fā)，還不支持vue等后綴的模塊化文件，但可以使用js文件編寫(xiě)?yīng)毩⒌哪K，比如，下面的模塊保存在vuehello.js中：

export default {
    data() {
        return { message: "你好,模塊" }
    },
    template: `<div>{{ message }}</div>`
}

在主頁(yè)面中可以使用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)行效果如下：