整合.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 项目。
项目基于以下技术构建，请先下载安装
安装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/，效果如下
