整合.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
使用 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
相关链接
dotnet-vue
dotnet-element-admin
.NET 5.0
Node.js
Vue.js
Yarn