整合.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 ...
随机推荐
- 利用Python特殊变量__dict__快速实现__repr__的一种方法
在<第8.15节 Python重写自定义类的__repr__方法>.<Python中repr(变量)和str(变量)的返回值有什么区别和联系>.<第8.13节 Pytho ...
- 关于open函数文件打开模式的有意思的一个现象
老猿前阵子学习了文件IO,最近正在回顾及进行各种验证和总结,老猿在对文件进行打开后的返回值检查属性时,发现文件打开返回的文件对象的读写模式与打开文件的模式并不完全相同,如下案例: fp1 = open ...
- Python学习随笔:PyCharm的错误检测使用及调整配置减少错误数量
老猿使用PyCharm有将近一个月了,发现PyCharm并不能很好的完成语法检查,有时运行时突然终止,仔细核查却发现是基本的语法错误,不过有次无意中移动鼠标到代码最右边的边框时发现其实PyCharm有 ...
- PyQt学习随笔:Model/View中诸如DisplayRole的数据角色及含义
在PyQt中,模型可以针对不同的组件(或者组件的不同部分,比如存储数据.界面展示数据.按钮的提示等)提供不同的数据.例如,Qt.DisplayRole用于视图的文本显示.通常来说,模型中的数据项包含一 ...
- 如何建一个SAM
部分改编自OI WIKI 先从一个简单的问题入手: 给定一个串,构造一个图,使其能够表示它的所有子串. 显然一个子串就是一个后缀的前缀.所以一个很显然的方式就是把所有后缀扔进trie里. 比如当前串是 ...
- 题解-CF1401E Divide Square
题面 CF1401E Divide Square 给一个正方形平面边长为 \(10^6\),给 \(n\) 条横线段和 \(m\) 条竖线段,每条线段都与正方形边缘相交且一条直线上不会有两条线段,求被 ...
- Kubernetes Python Client 初体验之Deployment
Kubernetes官方推荐我们使用各种Controller来管理Pod的生命周期,今天写一个最常用的Deployment的操作例子. 首先是创建Deployment: with open(path. ...
- C++ 消失的析构函数 —— virtual 实现的动态析构
在C++类的结构中可以使用类方法创建内存,使用类的析构函数去施放内存,但有这么一种情况会导致:即使在析构函数中释放了内存,但由于析构函数没有被调用而导致内存泄漏,如下代码. 1 #include &l ...
- jwt 简单基本使用加密解密
import jwt # 加密 encode_jwt=jwt.encode({'uid':'123'},'密钥123',algorithm='HS256') print(encode_jwt) # 解 ...
- WindowsPhone8中LongListSelector的扩展解决其不能绑定SelectdeItem的问题
微软在Wp8中集成了LongListSelector, 但是该控件在ViewModel中不能实现的SelectdeItem双向绑定,因为其不是DependencyProperty没办法只能实现扩展! ...