使用Visual Studio 2022開發前端

尋找無名的特質發表於2022-05-06
前端

前端開發環境多數基於Node.js，好處不多說了。但與使用Visual Studio開發的後端Asp.Net Core專案一起除錯，卻不是很方便，所以試著在Visual Studio 2022中開發前端。

建立宿主專案

首先建立一個空的Asp.Net Core專案作為宿主，建立完成後將Program.cs中的程式碼修改如下：

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.Run();

app.UseStaticFiles()使這個Web應用支援靜態檔案，app.UseDefaultFiles()使這個Web應用使用預設的檔案，比如index.html作為預設的首頁。

然後在專案中建立wwwroot目錄，在這個目錄中，儲存靜態檔案。然後建立index.html，寫個Hello World，就可以執行了。

安裝前端庫

在瀏覽器中可以使用CDN源引用需要的客戶端庫，可如果在企業內網使用，無法訪問CDN源時，需要將客戶端庫下載到本地使用。
Visual Studio使用libman維護客戶端庫庫。在解決方案資源管理器的專案名稱上按右鍵，選擇“管理客戶端庫”：

會在專案中建立libman.json檔案，在這個檔案中儲存需要引用的客戶端庫。如果需要新增客戶端庫，在解決方案資源管理器的專案名稱上按右鍵，選擇新增->客戶端庫：

可以搜尋並選擇安裝的客戶端庫了：

在瀏覽器引入模組

現在可以進行客戶端開發了，這種模式還是使用瀏覽器作為開發執行環境。好訊息是瀏覽器也開始支援引入模組了，如Chrome和Edge已經支援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>

模組化開發

在瀏覽器上直接開發，還不支援vue等字尾的模組化檔案，但可以使用js檔案編寫獨立的模組，比如，下面的模組儲存在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>

執行效果如下：

相關文章