使用Visual Studio 2022开发前端

前端开发环境多数基于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维护客户端库库。在解决方案资源管理器的项目名称上按右键,选择“管理客户端库”:
使用Visual Studio 2022开发前端

会在项目中创建libman.json文件,在这个文件中保存需要引用的客户端库。如果需要添加客户端库,在解决方案资源管理器的项目名称上按右键,选择添加->客户端库:
使用Visual Studio 2022开发前端

可以搜索并选择安装的客户端库了:
使用Visual Studio 2022开发前端

在浏览器引入模块

现在可以进行客户端开发了,这种模式还是使用浏览器作为开发运行环境。好消息是浏览器也开始支持引入模块了,如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开发前端

发表评论

相关文章