.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 項目。

項目基于以下技術構建，請先下載安裝

• .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

總結

以上是生活随笔為你收集整理的整合.NET WebAPI和 Vuejs——在.NET单体应用中使用 Vuejs 和 ElementUI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。