整合.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/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

在浏览器上访问地址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/,效果如下



相关链接

  • dotnet-vue

  • dotnet-element-admin

  • .NET 5.0

  • Node.js

  • Vue.js

  • Yarn

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/305921.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【gRPC】 在.Net core中使用gRPC

最近在学习.net core的微服务体系架构。微服务之间的通信常常通过gRPC进行同步通信,但是需要注意的是,大多数微服务之间的通信是通过事件总线进行异步通信。在微软介绍.net微服务体系架构的项目eShop中,微服务之间进行同步通信的场景很多&…

disconf mysql_Docker搭建disconf环境,三部曲之三:细说搭建过程

Docker下的disconf实战全文链接细说搭建过程在前两章中,我们利用远程或本地的镜像,快速体验了本地启动disconf的过程,本章我们一起来分析和梳理整个定制和搭建过程,了解这些后,我们就能根据自己的需要来定制本地的disc…

轻量级 Kubernetes K3s - Github热点

轻量级 Kubernetes k3sstar: 15.5kK3s是完全符合生产要求的Kubernetes发行版, 安装简单,可用于生产,整个二进制文件小于100M,作为单一文件打包部署,优势在于,你只需几秒钟就可以得到一个完全成熟的Kubernetes集群。htt…

java 固定长度队列_如何彻底搞懂 Java 数据结构?|CSDN 博文精选

作者 | 张振华.Jack责编 | 郭芮出品 | CSDN 博客本文和大家一起来重温《Java数据结构》经典之作。Java数据结构要理解Java数据结构,必须能清楚何为数据结构?数据结构:Data_Structure,它是储存数据的一种结构体,在此结构…

IdentityServer4 之 Resource Owner Password Credentials 其实有点尴尬

前言接着IdentityServer4的授权模式继续聊,这篇来说说 Resource Owner Password Credentials授权模式,这种模式在实际应用场景中使用的并不多,只怪其太开放啦,直接在客户端上拿着用户名和密码就去授权服务器获取AccessToken&#…

Xamarin使XRPC实现接口/委托远程调用

在之前的文章中已经介绍如何使用Beetlex.XRCP组件进行接口/委托远程调用;由于组件BeetleX.XRPC.Clients支持.NETStandard2,因此Xamarin同样可以使用它来实现基于接口/委托的数据交互通讯。接下来通过Xamarin实现一个简单的移动程序,并通过XRP…

mysql 拷贝安装_Mysql的安装和主从复制

安装mysql服务步骤一:首先下载mysql的yum源配置 ,下载mysql的yum源wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm步骤二:安装mysql的yum源yum -y install mysql57-community-release-el7-11.noarch.rpm步骤三&…

浅谈CLR基础知识

中午的时候,有一个小伙伴问我,CLR到底是进程还是线程,它和自己写的程序是怎么关联的。这一问,直接把我问懞了。下面我尝试用简单的语言来描述这个问题,有的地方无法讲的太细(不然内容会太多)&am…

Asp.Net Core使用Skywalking实现分布式链路追踪

介绍Skywalking 是 Apache 基金会下面的一个开源 APM 项目,是一套(APM)分布式追踪系统,提供了很多数据存储列如:Mysql,H2,Elasticsearch7 等。其中APM 全称是应用性能监测软件,主要是用来处理以及追踪分布式…

python 里什么时候缩进_python什么时候缩进

Python中的缩进(Indentation)决定了代码的作用域范围。这一点和传统的c/c有很大的不同(传统的c/c使用花括号花括号{}符决定作用域的范围;python使用缩进空格来表示作用域的范围,相同缩进行的代码是处于同一范围)。每行代码中开头的空格数(whitespace)用于…

C# 9 新特性 —— 补充篇

C# 9 新特性 —— 补充篇Intro前面我们分别介绍了一些 C# 9 中的新特性,还有一些我觉得需要了解一下的新特性,写一篇作为补充。Top-Level Statements在以往的代码里,一个应用程序必须要有 Main 方法才能运行,从 C# 9 开始&#xf…

使用Popup窗口创建无限级Web页菜单(5)

代码框架在(4)里面已经全部列出来了,现在工作就是按流程把他们完成。本来实现一个prototype的Menu菜单类只需要最多300行代码,可是后来做了一些操作习惯支持和UI显示上的优化后,代码猛增到了1000多行。不过final版本看起来确实比土不拉叽的pr…

【gRPC】ProtoBuf 语言快速学习指南

继上篇【gRPC】 在.Net core中使用gRPC了解了gRPC的使用,gRPC基于HTTP/2和ProtoBuf,ProtoBuf就非常有必要好好了解一下了,那么ProtoBuf究竟是什么?ProtoBuf Google Protocol Buffer是一种语言无关、平台无关、可扩展的序列化结构数…

vspythonqt混合_PYQT5 vscode联合操作qtdesigner的方法

除了使用pycharm外,还可使用vscode来操作pyqt,方法如下:1. 在vscode中配置相关的pyqt的相关根据自己实际情况修改第一项pyqt的路径2. 创建一个文件夹,右键,最后一项可以创建一个新窗口创建的新窗口后缀为 .ui右键中有以…

TIOBE 1 月榜单:Python年度语言四连冠,C 语言再次第一

喜欢就关注我们吧!TIOBE 公布了 2021 年 1 月的编程语言排行榜。TIOBE 本月公布了 2020 年度编程语言,Python 获得四连冠,是过去一年中最受欢迎的编程语言。Python 在 2020 年实现了 2.01% 的正增长;C 紧随其后&#x…

A piecture of J2EE Core Patterns

这张图是J2EE Core Patterns里面的一幅图片,在Enterprise Solution Patterns Using Microsoft.Net里面虽然模式的概念与应用大同小异,但是那张表现架构模式整体的图感觉有点不直观,相比之下这幅图显得更清晰一点。 发到这里供大家参考学习:&#xff09…

孙丕恕离开浪潮 仪器厂历时60年成为服务器龙头企业

2020年12月31日浪潮集团有限公司董事会选举邹庆忠为公司董事长(法定代表人);孙丕恕不再担任公司董事长;公司不再聘任孙丕恕为首席执行官。另外,经省委研究决定,拟任省直部门(单位)副…

java 数组 树_java使用顺序数组实现二叉树

顺序数组实现二叉树实现原理对于下标为index的节点其满足1.左孩子节点的下标为2index12.右孩子节点的下标为2index2代码实现package tree;public class ArrayBinaryTree {private int[] arr;public ArrayBinaryTree(int[] arr){this.arrarr;}public void preOrder(int index){i…

【Docker】Asp.net core在docker容器中的端口问题

还记得【One by one系列】一步步学习docker(三)——实战部署dotnetcore中遇到的问题么?容器内部启动始终是80端口,并不由命令左右。docker run --name container-name -p 81:5000 mywebapi所谓知其然就要知其所以然,浅…

.net 5.0 中的 JsonConsole

asp.net core 5.0 中的 JsonConsoleIntroasp.net core 5.0 中日志新增了 JsonConsole,还是输出日志到 Console,但是会应用 Json 格式的一个 Formatter 把日志格式化成 json 再输出到控制台Sample一起来看一个示例,以我的一个小项目为例子来演…