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

时间 2021-01-06

标签 css vue node react git github web json redux windows 栏目 CSS 繁體版

原文原文链接

.NET简介

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

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

跨平台

能够为许多操做系统建立 .NET 应用，包括：vue

Windows
macOS
Linux
Android
iOS
tvOS
watchOS

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

X64
x86
ARM32
ARM64

开源

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

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

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

下载安装.NET5以后，在命令行中运行如下命令github

dotnet

若是安装成功，你会看到如下的输出web

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.

而后再运行如下命令json

dotnet new -l

你会看到如下输出redux

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 和 reactwindows

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