博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
整合.NET WebAPI和 Vuejs——在.NET单体应用中使用 Vuejs 和 ElementUI
阅读量:4033 次
发布时间:2019-05-24

本文共 6725 字,大约阅读时间需要 22 分钟。

.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

在浏览器上访问地址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.Webdotnet run

在浏览器上访问地址http://localhost:5000/,效果如下

相关链接

  • dotnet-vue

  • dotnet-element-admin

  • .NET 5.0

  • Node.js

  • Vue.js

  • Yarn

转载地址:http://myudi.baihongyu.com/

你可能感兴趣的文章
今日互联网关注(写在清明节后):每天都有值得关注的大变化
查看>>
”舍得“大法:把自己的优点当缺点倒出去
查看>>
[今日关注]鼓吹“互联网泡沫,到底为了什么”
查看>>
[互联网学习]如何提高网站的GooglePR值
查看>>
[关注大学生]求职不可不知——怎样的大学生不受欢迎
查看>>
[关注大学生]读“贫困大学生的自白”
查看>>
[互联网关注]李开复教大学生回答如何学好编程
查看>>
[关注大学生]李开复给中国计算机系大学生的7点建议
查看>>
[关注大学生]大学毕业生择业:是当"鸡头"还是"凤尾"?
查看>>
[茶余饭后]10大毕业生必听得歌曲
查看>>
gdb调试命令的三种调试方式和简单命令介绍
查看>>
C++程序员的几种境界
查看>>
VC++ MFC SQL ADO数据库访问技术使用的基本步骤及方法
查看>>
VUE-Vue.js之$refs,父组件访问、修改子组件中 的数据
查看>>
Vue-子组件改变父级组件的信息
查看>>
Python自动化之pytest常用插件
查看>>
Python自动化之pytest框架使用详解
查看>>
【正则表达式】以个人的理解帮助大家认识正则表达式
查看>>
性能调优之iostat命令详解
查看>>
性能调优之iftop命令详解
查看>>