前端主流的开发框架包括: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文件,然后修改文件代码如下:
pagemodelIndexModel{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语法显示文本的结果就实现了,运行后的结果如下图所示: