使用Visual Studio 2022开发前端
<p>前端开发环境多数基于Node.js，好处不多说了。但与使用Visual Studio开发的后端Asp.Net Core项目一起调试，却不是很方便，所以试着在Visual Studio 2022中开发前端。</p><h2 id="创建宿主项目">创建宿主项目</h2>
<p>首先创建一个空的Asp.Net Core项目作为宿主，创建完成后将Program.cs中的代码修改如下：</p>
<pre><code>var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.Run();
</code></pre>
<p>app.UseStaticFiles()使这个Web应用支持静态文件，app.UseDefaultFiles()使这个Web应用使用缺省的文件，比如index.html作为缺省的首页。</p>
<p>然后在项目中创建wwwroot目录，在这个目录中，保存静态文件。然后创建index.html，写个Hello World，就可以运行了。</p>
<h2 id="安装前端库">安装前端库</h2>
<p>在浏览器中可以使用CDN源引用需要的客户端库，可如果在企业内网使用，无法访问CDN源时，需要将客户端库下载到本地使用。<br>
Visual Studio使用libman维护客户端库库。在解决方案资源管理器的项目名称上按右键，选择“管理客户端库”：<br>
<img src="https://img2022.cnblogs.com/blog/4131/202205/4131-20220506075851049-1364752473.png" alt="" loading="lazy"></p>
<p>会在项目中创建libman.json文件，在这个文件中保存需要引用的客户端库。如果需要添加客户端库，在解决方案资源管理器的项目名称上按右键，选择添加->客户端库：<br>
<img src="https://img2022.cnblogs.com/blog/4131/202205/4131-20220506080127710-1537766060.png" alt="" loading="lazy"></p>
<p>可以搜索并选择安装的客户端库了：<br>
<img src="https://img2022.cnblogs.com/blog/4131/202205/4131-20220506080245414-298675608.png" alt="" loading="lazy"></p>
<h2 id="在浏览器引入模块">在浏览器引入模块</h2>
<p>现在可以进行客户端开发了，这种模式还是使用浏览器作为开发运行环境。好消息是浏览器也开始支持引入模块了，如Chrome和Edge已经支持importmap，将js源导入为模块。比如，下面的代码引入vue：</p>
<pre><code> <script type="importmap">
{
"imports": {
"vue": "./lib/vue/vue.esm-browser.js"
}
}
</script>
</code></pre>
<p>在type="module"的script标记中，可以使用import语句：</p>
<pre><code> <script type="module">
import { createApp } from 'vue'
const myapp = {
data() {
return {
message: "你好"
}
}
}
const app = createApp(myapp)
app.mount('#app')
</script>
</code></pre>
<p>如果使用Firefox等不支持importmap的浏览器，需要增加es-module-shims：</p>
<pre><code> <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.4/dist/es-module-shims.js"></script>
</code></pre>
<p>完整的代码如下：</p>
<pre><code><!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>
</code></pre>
<h2 id="模块化开发">模块化开发</h2>
<p>在浏览器上直接开发，还不支持vue等后缀的模块化文件，但可以使用js文件编写独立的模块，比如，下面的模块保存在vuehello.js中：</p>
<pre><code>export default {
data() {
return { message: "你好,模块" }
},
template: `<div>{{ message }}</div>`
}
</code></pre>
<p>在主页面中可以使用importmap进行映射，并使用import引用：</p>
<pre><code> <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'
importhello from 'vuehello'
const myapp = {
data() {
return {
message: "你好"
}
},
components :{
hello
}
}
const app = createApp(myapp)
app.mount('#app')
</script>
</code></pre>
<p>运行效果如下：<br>
<img src="https://img2022.cnblogs.com/blog/4131/202205/4131-20220506081841913-1603983168.png" alt="" loading="lazy"></p>
</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：寻找无名的特质，转载请注明原文链接：https://www.cnblogs.com/zhenl/p/16227232.html</p><br><br>
来源：https://www.cnblogs.com/zhenl/p/16227232.html
頁:
[1]