整合.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 项目。
项目基于以下技术构建,请先下载安装
安装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/,效果如下



相关链接
整合.NET WebAPI和 Vuejs——在.NET单体应用中使用 Vuejs 和 ElementUI的更多相关文章
- 【vuejs面试题】务必熟知的vuejs面试题「务必收藏」
如果能帮到你,点个赞吧,务必熟知的vuejs面试题「务必收藏」 vuejs 基础必备 1.active-class 是哪个组件的属性?嵌套路由怎么定义 (1).active-class 是 vue-r ...
- 使用MediatR重构单体应用中的事件发布/订阅
标题:使用MediatR重构单体应用中的事件发布/订阅 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/10640280.html 源代码:https ...
- 在Visual Studio中使用VueJS时,不可以用 v-bind 的简写 : 及 v-on的简写 @
在Visual Studio中使用VueJS时,不可以用 v-bind 的简写 : 及 v-on的简写 @ 一方面 @符号和 Razor引擎冲突, 另外,当使用VS的格式化代码功能时, 会把 html ...
- SpringCloud Sidecar 整合.Net WebApi
在整合.Net的过程中遇到不少问题,一般网上的例子只是调用一个简单的NodeJS示例,并未有详细的介绍及采坑过程. 首先,我的项目结构是:Vue前端 + SpringCloud后端 + .Net的We ...
- WebApi官网学习记录---web api中的路由
如果一条路由匹配,WebAPI选择controller和action通过如下方式: 1.找到controller,将"controller"赋值给{controller}变量 2. ...
- ASP.NET Core WebApi 返回统一格式参数(Json 中 Null 替换为空字符串)
相关博文:ASP.NET Core WebApi 返回统一格式参数 业务场景: 统一返回格式参数中,如果包含 Null 值,调用方会不太好处理,需要替换为空字符串,示例: { "respon ...
- springboot整合JSP以及发布项目到独立的tomcat中与打成jar包使用
之前研究了springboot整合freemarker与thymeleaf的使用.也研究了springboot发布到独立的tomcat的使用以及使用自带的tomcat打成jar包的使用,下面研究集成J ...
- 结合jquery的前后端加密解密 适用于WebApi的SQL注入过滤器 Web.config中customErrors异常信息配置 ife2018 零基础学院 day 4 ife2018 零基础学院 day 3 ife 零基础学院 day 2 ife 零基础学院 day 1 - 我为什么想学前端
在一个正常的项目中,登录注册的密码是密文传输到后台服务端的,也就是说,首先前端js对密码做处理,随后再传递到服务端,服务端解密再加密传出到数据库里面.Dotnet已经提供了RSA算法的加解密类库,我们 ...
- Vuejs input 和 textarea 元素中使用 v-model 实现双向数据绑定
demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
随机推荐
- PyQt(Python+Qt)学习随笔:Qt Designer中toolBar的orientation属性和iconSize属性
orientation属性 orientation属性用于确认工具栏是水平方向还是垂直方向,这个属性对于QMainWindow中的工具栏来说没有意义,因为QMainWindow中的工具栏支持在上下左右 ...
- Error.name 六种值对应的信息
1 EvalErroe:eval() 的使用与定义不一致 2 RangrError: 数值越界 3 ReferenceError:非法或不能识别的引用数值 4 SyntaxError:发生语法解析错 ...
- float和double有什么区别?
float和double在游戏行业肯定是用的很多的,虽然这是个很基础的问题,但是面试时被问到还是感觉说的不是很好. 所以还是总结一下: float 单精度浮点数在机内占 4 个字节,用 32 位二进制 ...
- 百度前端技术学院-基础-day22-24
第二十二天到第二十四天:JavaScript里面的居民们 task1 题目: <div> <label>Number A:<input id="radio-a& ...
- 权威部门接连下发文件,Panda交易所带你走进区块链概念股
Panda交易所获悉,7月21日,北京市地方金融监督管理局发文<北京股权交易中心获得首批开展区块链试点建设资格>,文中表示证监会7月7日发布<关于原则同意北京.上海.苏州.浙江.深圳 ...
- 【译】为什么Rust中的BTreeMap没有with_capacity()方法?
原文标题:Why doesn't Rust's BTreeMap have a with_capacity() method? 原文链接:https://www.nicolas-hahn.com/20 ...
- MySQL技术内幕InnoDB存储引擎(四)——表相关
表是什么? 就是关于特定实体地数据集合,是关系型数据库模型地核心. 索引组织表 什么是索引组织表? 表中数据都是根据主键的顺序组织存放的,这种存储方式就是索引组织表.就是存储在一个索引结构中的表. 也 ...
- docker容器之间通过bridge进行通信
创建用户自定义bridge docker network create my-net # 创建了一个名为"my-net"的网络 将容器加入到"my-net"中 ...
- 精尽Spring MVC源码分析 - WebApplicationContext 容器的初始化
该系列文档是本人在学习 Spring MVC 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释 Spring MVC 源码分析 GitHub 地址 进行阅读 Spring 版本:5.2. ...
- Typora+图床详解(小白都能学得会)
Typora+图床详解(小白都能学得会) 1 了解工作 博客中用的笔记软件--Typora(Markdown语法) 博客中用的图床--阿里云对象存储(Object Storage Service,简称 ...