程序地带

整合.NET WebAPI和 Vuejs——在.NET单体应用中使用 Vuejs 和 ElementUI


.NET简介

.NET 是一种用于构建多种应用的免费开源开发平台,例如:


Web 应用、Web API 和微服务
云中的无服务器函数
云原生应用
移动应用
桌面应用
1). Windows WPF
2). Windows 窗体
3). 通用 Windows 平台 (UWP)
游戏
物联网 (IoT)
机器学习
控制台应用
Windows 服务
跨平台

可以为许多操作系统创建 .NET 应用,包括:


Windows
macOS
Linux
Android
iOS
tvOS
watchOS

支持的处理器体系结构包括:


X64
x86
ARM32
ARM64
开源

.NET 是开放源代码,使用 MIT 和 Apache 2 许可证。 .NET 是 .NET Foundation 的项目。


有关详细信息,请参阅GitHub.com 上的项目存储库列表和文档。


以上信息来自.NET文档概述,例行吹嘘.NET到此结束,下面进入本文的正题

下载安装.NET5之后,在命令行中运行以下命令


dotnet

如果安装成功,你会看到以下的输出


Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute.

然后再运行以下命令


dotnet new -l

你会看到以下输出


Templates Short Name Language Tags
-------------------------------------------- ------------------- ------------ -------------------------------
Console Application console [C#], F#, VB Common/Console
Class library classlib [C#], F#, VB Common/Library
WPF Application wpf [C#] Common/WPF
WPF Class library wpflib [C#] Common/WPF
WPF Custom Control Library wpfcustomcontrollib [C#] Common/WPF
WPF User Control Library wpfusercontrollib [C#] Common/WPF
Windows Forms (WinForms) Application winforms [C#] Common/WinForms
Windows Forms (WinForms) Class library winformslib [C#] Common/WinForms
Worker Service worker [C#], F# Common/Worker/Web
Unit Test Project mstest [C#], F#, VB Test/MSTest
NUnit 3 Test Project nunit [C#], F#, VB Test/NUnit
NUnit 3 Test Item nunit-test [C#], F#, VB Test/NUnit
xUnit Test Project xunit [C#], F#, VB Test/xUnit
Razor Component razorcomponent [C#] Web/ASP.NET
Razor Page page [C#] Web/ASP.NET
MVC ViewImports viewimports [C#] Web/ASP.NET
MVC ViewStart viewstart [C#] Web/ASP.NET
Blazor Server App blazorserver [C#] Web/Blazor
Blazor WebAssembly App blazorwasm [C#] Web/Blazor/WebAssembly
ASP.NET Core Empty web [C#], F# Web/Empty
ASP.NET Core Web App (Model-View-Controller) mvc [C#], F# Web/MVC
ASP.NET Core Web App webapp [C#] Web/MVC/Razor Pages
ASP.NET Core with Angular angular [C#] Web/MVC/SPA
ASP.NET Core with React.js react [C#] Web/MVC/SPA
ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA
Razor Class Library razorclasslib [C#] Web/Razor/Library
ASP.NET Core Web API webapi [C#], F# Web/WebAPI
ASP.NET Core gRPC Service grpc [C#] Web/gRPC
dotnet gitignore file gitignore Config
global.json file globaljson Config
NuGet Config nugetconfig Config
Dotnet local tool manifest file tool-manifest Config
Web Config webconfig Config
Solution File sln Solution
Protocol Buffer File proto Web/gRPC

我们可以看到可用的 SPA 模板只支持 angular 和 react


Templates Short Name Language Tags
-------------------------------------------- ------------------- ------------ -------------------------------
ASP.NET Core with Angular angular [C#] Web/MVC/SPA
ASP.NET Core with React.js react [C#] Web/MVC/SPA
ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA
问题来了,我们如何使用 dotnet 命令创建基于 Vuejs 的 SPA 项目呢?

我在 GitHub 上创建了一个项目dotnet-vue,相关的包已经发布到 nuget.org,只需要执行以下命令即可创建一个基于 Vuejs 的 SPA 项目。


项目基于以下技术构建,请先下载安装


.NET 5.0
Node.js
Vue.js
Yarn

安装DotnetVue包


dotnet new --install DotnetVue::1.2.0

然后再运行以下命令


dotnet new -l

你会看到以下输出


Templates Short Name Language Tags
-------------------------------------------- ------------------- ------------ -------------------------------
ASP.NET Core with Vue vue [C#] Web/WebAPI/SPA/Vue

创建新项目


dotnet new vue -o Lemon.Blog.Web


然后执行运行命令


cd Lemon.Blog.Web
dotnet run

在浏览器上访问地址http://localhost:5000/,效果如下


使用 dotnet 命令创建基于 Vuejs 和 ElementUI 的后台管理项目

我在 GitHub 上创建了一个项目dotnet-element-admin,相关的包已经发布到 nuget.org,只需要执行以下命令即可创建一个基于 Vuejs 的 SPA 项目。


安装DotnetElementAdmin包


dotnet new --install DotnetElementAdmin::1.0.2

然后再运行以下命令


dotnet new -l

你会看到以下输出


Templates Short Name Language Tags
-------------------------------------------- ------------------- ------------ -------------------------------
ASP.NET Core with ElementAdmin element-admin [C#] Web/WebAPI/SPA/Vue/ElementAdmin

创建新项目


dotnet new element-admin -o Lemon.BlogAdmin.Web


然后执行运行命令


cd Lemon.BlogAdmin.Web
dotnet run

在浏览器上访问地址http://localhost:5000/,效果如下





相关链接
dotnet-vue
dotnet-element-admin
.NET 5.0
Node.js
Vue.js
Yarn

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/229015504/p/14239375.html

随机推荐

均线颜色怎么区分_如何区分不锈钢螺栓、镀锌和镀镍螺栓?

在中国这个大市场中,标准件包含了螺栓、螺钉、螺柱、螺母、机螺钉、自攻螺钉、垫圈、销、铆钉、挡圈、销键、膨胀螺栓、索具、工矿建筑、异型螺丝、各种设备、钢材、模具等都属于各个行业中的标准件。...

范汝诗 阅读(513)

python中的pandas库_Python Pandas库的学习(二)

python中的pandas库_Python Pandas库的学习(二)

今天我们继续讲下Python中一款数据分析很好的库。Pandas的学习接着上回讲到的,如果有人听不懂,麻烦去翻阅一下我前面讲到的Pandas学习(一ÿ...

weixin_39575170 阅读(443)

python编写小程序实例_python小程序开发实例

商品和服务质量,是用户最关心的,运营者要保证质量,并把用户的完整信息的质量传达给用户,将影响用户的留存与转化的。再小的店也有自己的品牌!一张小程...

weixin_39593460 阅读(170)

ROS学习(1)-- ROS入门

因为要研究SLAM相关的课题,要用到ROS。越学越发现ROS的强大(吹一波)。随着学习的深入,知识点甚多,因此做一下记录与大家分享...

飞天神猿 阅读(995)