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

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

云中的无服务器函数

云原生应用

移动应用

桌面应用
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

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

然后执行运行命令

cd Lemon.Blog.Web dotnet run

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

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

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

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

安装DotnetElementAdmin包

dotnet new --install DotnetElementAdmin::1.0.2

然后再运行以下命令

dotnet new -l

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpgdzy.html