Developing front end using Visual Studio 2022

Most front-end development environments are based on node JS, I won't say much about the benefits. However, it is different from the back-end asp.net developed using visual studio Net core project debugging together, but it is not very convenient, so try to develop the front end in Visual Studio 2022.

Create host project

First create an empty ASP Net core project as the host. After the creation, the program The code in CS is modified as follows:

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

app.UseStaticFiles() enables this Web application to support static files, app Usedefaultfiles () enables the Web application to use default files, such as index HTML as the default home page.

Then create the wwwroot directory in the project, and in this directory, save the static files. Then create index HTML, write a Hello World, and you can run it.

Install front end Library

The CDN source can be used in the browser to reference the required client library. If it is used in the enterprise intranet and the CDN source cannot be accessed, the client library needs to be downloaded locally for use.
Visual Studio uses libman to maintain client libraries. Right click the project name in solution explorer and select manage client libraries:

Libman.com is created in the project JSON file, in which the client library to be referenced is saved. If you need to add a client library, right-click the project name in solution explorer and select Add - > Client Library:

You can search and select the installed client libraries:

Introducing modules in the browser

Now you can develop the client. This mode still uses the browser as the development and running environment. The good news is that browsers are also beginning to support the introduction of modules. For example, Chrome and Edge already support importmap and import js sources into modules. For example, the following code introduces vue:

    <script type="importmap">
        {
          "imports": {
            "vue": "./lib/vue/vue.esm-browser.js"
          }
        }
    </script>

In the script tag of type="module", you can use the import statement:

    <script type="module">
        import { createApp } from 'vue'
        const myapp = {
            data() {
                return {
                    message: "Hello"
                }
            }
        }
        const app = createApp(myapp)
        app.mount('#app')
    </script>

If you use Firefox and other browsers that do not support importmap, you need to add es module ships:

    <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.4/dist/es-module-shims.js"></script>

The complete code is as follows:

<!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: "Hello"
                }
            }
        }
        const app = createApp(myapp)
        app.mount('#app')
    </script>
</body>
</html>

Modular development

Direct development on the browser does not support modular files with suffixes such as vue, but you can use js files to write independent modules. For example, the following modules are saved in vuehello JS:

export default {
    data() {
        return { message: "Hello,modular" }
    },
    template: `<div>{{ message }}</div>`
}

In the main page, you can use importmap for mapping and import reference:

    <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: "Hello"
                }
            },
            components :{
                hello
            }

        }
        const app = createApp(myapp)
        app.mount('#app')
    </script>

The operation effect is as follows:

Tags: Front-end Visual Studio

Posted by ihenman on Fri, 06 May 2022 06:16:33 +0300