Web开发

首页 » 常识 » 常识 » NET5下ASPNETCoreWeb项
TUhjnbcbe - 2024/8/21 16:52:00

前端主流的开发框架包括:Angular、React和Vue,下面将介绍下.NET5下ASP.NETCoreWeb项目中添加和使用客户端Vue库进行Razor视图页面开发。

1、打开本地电脑上已经安装的VisualStudio,如下图所示:

2、点击“创建新项目”,如下图所示:

3、项目模板中,选择“ASP.NETCoreWeb应用程序”,然后点击“下一步”,如下图所示:

4、输入项目的名称,浏览项目的存储路径,然后点击“创建”,如下图所示:

5、选择“ASP.NETCoreWeb应用”,然后点击“创建”,如下图所示:

6、右键创建的项目名称,依次选择“添加(D)”-“客户端库(L)...”,如下图所示:

7、在弹出的添加客户端库对话框中,在库(L)后面输入要引入的前端库名vue,后面选择对应的版本,然后点击“安装”,如下图所示:

8、添加完成以后,我们会发现项目根目录下多了个libman.json文件,里面包括引入的vue的库版本及位置,如下图所示:

9、我们打开Pages目录下的Index.cshtml文件,然后修改文件代码如下:

page

modelIndexModel

{

Layout=null;

ViewData[Title]=Homepage;

}

scriptsrc=~/lib/vue/vue.js/script

divclass=text-center

divid=app

{{message}}

/div

script

newVue({

el:#app,

data:{

message:在ASP.NETCoreRazor视图中使用Vue前端技术

}

});

/script

/div

10、然后依次点击菜单栏中的“调试(D)”-“开始执行(不调试)(H)”,如下图所示:

11、一个简单的利用Vue的Mustach语法显示文本的结果就实现了,运行后的结果如下图所示:

1
查看完整版本: NET5下ASPNETCoreWeb项