2021年1月6日星期三

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

.NET简介

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

  1. Web 应用、Web API 和微服务
  2. 云中的无服务器函数
  3. 云原生应用
  4. 移动应用
  5. 桌面应用
    1). Windows WPF
    2). Windows 窗体
    3). 通用 Windows 平台 (UWP)
  6. 游戏
  7. 物联网 (IoT)
  8. 机器学习
  9. 控制台应用
  10. 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/ConsoleClass library          classlib     [C#], F#, VB  Common/LibraryWPF Application         wpf      [C#]    Common/WPFWPF Class library         wpflib     [C#]    Common/WPFWPF Custom Control Library      wpfcustomcontrollib  [C#]    Common/WPFWPF User Control Library       wpfusercontrollib  [C#]    Common/WPFWindows Forms (WinForms) Application    winforms     [C#]    Common/WinFormsWindows Forms (WinForms) Class library   winformslib    [C#]    Common/WinFormsWorker Service         worker     [C#], F#   Common/Worker/WebUnit Test Project         mstest     [C#], F#, VB  Test/MSTestNUnit 3 Test Project        nunit     [C#], F#, VB  Test/NUnitNUnit 3 Test Item         nunit-test    [C#], F#, VB  Test/NUnitxUnit Test Project        xunit     [C#], F#, VB  Test/xUnitRazor Component         razorcomponent   [C#]    Web/ASP.NETRazor Page          page      [C#]    Web/ASP.NETMVC ViewImports         viewimports    [C#]    Web/ASP.NETMVC ViewStart          viewstart    [C#]    Web/ASP.NETBlazor Server App         blazorserver    [C#]    Web/BlazorBlazor WebAssembly App       blazorwasm    [C#]    Web/Blazor/WebAssemblyASP.NET Core Empty        web      [C#], F#   Web/EmptyASP.NET Core Web App (Model-View-Controller)  mvc      [C#], F#   Web/MVCASP.NET Core Web App        webapp     [C#]    Web/MVC/Razor PagesASP.NET Core with Angular       angular     [C#]    Web/MVC/SPAASP.NET Core with React.js      react     [C#]    Web/MVC/SPAASP.NET Core with React.js and Redux    reactredux    [C#]    Web/MVC/SPARazor Class Library        razorclasslib   [C#]    Web/Razor/LibraryASP.NET Core Web API        webapi     [C#], F#   Web/WebAPIASP.NET Core gRPC Service       grpc      [C#]    Web/gRPCdotnet gitignore file        gitignore         Configglobal.json file         globaljson         ConfigNuGet Config          nugetconfig        ConfigDotnet local tool manifest file     tool-manifest        ConfigWeb Config          webconfig         ConfigSolution File          sln          SolutionProtocol Buffer File        proto          Web/gRPC

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

Templates           Short Name    Language   Tags--------------------------------------------  -------------------  ------------  -------------------------------ASP.NET Core with Angular       angular     [C#]    Web/MVC/SPAASP.NET Core with React.js      react     [C#]    Web/MVC/SPAASP.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.Webdotnet run

在浏览器上访问地 src="https://img2020.cnblogs.com/blog/47875/202101/47875-20210106094853628-899633179.png" alt="" loading="lazy">

使用 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.Webdotnet run

在浏览器上访问地 src="https://img2020.cnblogs.com/blog/47875/202101/47875-20210106094944313-243524018.png" alt="" loading="lazy">

相关链接

  • dotnet-vue
  • dotnet-element-admin
  • .NET 5.0
  • Node.js
  • Vue.js
  • Yarn








原文转载：http://www.shaoqun.com/a/506012.html

跨境电商：https://www.ikjzd.com/

bol：https://www.ikjzd.com/w/291

拍拍网：https://www.ikjzd.com/w/2205


.NET简介.NET是一种用于构建多种应用的免费开源开发平台，例如：Web应用、WebAPI和微服务云中的无服务器函数云原生应用移动应用桌面应用1).WindowsWPF2).Windows窗体3).通用Windows平台(UWP)游戏物联网(IoT)机器学习控制台应用Windows服务跨平台可以为许多操作系统创建.NET应用，包括：WindowsmacOSLinuxAndroidiOStvOSw
蜜芽：蜜芽
aeo：aeo
进击日本站 | 超强广告关键词和流量指南一键get：进击日本站 | 超强广告关键词和流量指南一键get
德庆孔庙国庆节门票多少钱?德庆学宫十一国庆节活动?：德庆孔庙国庆节门票多少钱?德庆学宫十一国庆节活动?
中国江西南昌特色菜：豫章酥鸭 - ：中国江西南昌特色菜：豫章酥鸭 -
发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)