使用Visual Studio 2022开发前端的详细教程

更新时间：2022年05月06日 08:35:46 作者：寻找无名的特质

这篇文章主要介绍了使用Visual Studio 2022开发前端,在浏览器中可以使用CDN源引用需要的客户端库，可如果在企业内网使用，无法访问CDN源时，需要将客户端库下载到本地使用，需要的朋友可以参考下

创建宿主项目

首先创建一个空的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>

运行效果如下：

到此这篇关于使用Visual Studio 2022开发前端的文章就介绍到这了,更多相关Visual Studio 2022前端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用JavaScript和CSS实现文本隔行换色的方法
这篇文章主要介绍了使用JavaScript和CSS实现文本隔行换色的方法,当然最普通的也可以单纯用CSS实现,需要的朋友可以参考下
2015-11-11
JS实现jQuery的append功能
jQuery中可以直接使用$el.append()为元素添加字符串型dom, 但是最近转战Vue, 再使用jQuery明显不合适了, 所以通过查找资料, 封装一个可以实现同样效果的方法.
2021-05-05
使用window.prompt()实现弹出用户输入的对话框
window对象的最后一种对话框是提示对话框，它显示了预先设置的信息并提供文本域供用户输入应答。它包括两个按钮，即Cancel和Ok，允许用户用两个相反的期望值来关闭这个对话框：取消整个操作或接收输入到对话框中的文本
2015-04-04
JavaScript仿聊天室聊天记录
这篇文章主要为大家详细介绍了JavaScript仿聊天室聊天记录实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
浅谈javascript函数式编程
你是否知道JavaScript其实也是一个函数式编程语言呢？本文将教你如何利用JavaScript的函数式特性。
2015-09-09
简单谈谈javascript中的变量、作用域和内存问题
这篇文章主要介绍了简单谈谈javascript中的变量、作用域和内存问题的相关资料,需要的朋友可以参考下
2015-08-08
javascript实现捕捉键盘上按下的键
JavaScript取得按下键盘的键是哪个，通过创建一个event.keyCode对象，可有效获取键盘上的键，运行代码后，点击键盘上的任意键，网页上显示你按下的是哪个键。
2015-05-05
javascript 打字游戏实现代码
javascript 打字游戏实现代码，非常不错的效果，功能还不是很完善，喜欢的朋友可以参考下。
2010-04-04
javascript document.referrer 用法
document对象的referrer属性，返回导航到当前网页的超链接所在网页的URL。
2009-04-04
javascript中如何判断类型汇总
这篇文章主要给大家介绍了关于javascript中如何判断类型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05