• 整合.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 项目。

    项目基于以下技术构建,请先下载安装

    安装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/,效果如下



    相关链接

    作者:黄明基
    出处:http://www.cnblogs.com/229015504/
    如果你喜欢本文章,欢迎转载,请保留此段声明,且在文章页面明显位置给出原文连接。
    如果文中有什么错误,欢迎指出。以免更多的人被误导。欢迎大家扫描右边二维码关注公众号。
  • 相关阅读:
    实验四: Android程序设计
    实验三 敏捷开发与XP实践-1
    mini dc课堂练习补交
    20155216 2016-2017-2 《Java程序设计》第十周学习总结
    第十二周课上练习
    20155210 潘滢昊 Java第三次实验
    20155210 2016-2017-2 《Java程序设计》第10周学习总结
    20155210 潘滢昊2016-2017-2 《Java程序设计》第9周学习总结
    20155210潘滢昊 Java第二次试验
    20155210潘滢昊 2016-2017-2 《Java程序设计》第8周学习总结
  • 原文地址:https://www.cnblogs.com/huangmingji/p/14239375.html
Copyright © 2020-2023  润新知