ASP.NET中怎么搭建前后端分離框架

本篇文章為大家展示了ASP.NET中怎么搭建前后端分離框架，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

        一、 項目開發環境搭建
        1、 安裝 .NET Core
         .NET Core 與之前的 .NET Framework 不一樣，它不再緊緊的耦合在 Windows 系統上了，因此，我們可以在支持的操作系統上以安裝軟件的形式安裝我們的 .NET Core 開發環境。
        打開官網的下載頁面（.NET Downloads），找到 .NET Core，這里因為我們需要在當前環境進行開發，所以需要安裝 .NET Core SDK，下載完成后，一路 Next 即可。

        當我們安裝完成后，打開控制臺，輸入命令，則會顯示出我們本機安裝的 .NET Core 版本。

1

dotnet --info ## 或者使用 dotnet --version 查看本機安裝的 .NET Core 版本信息

        在 .NET Core 中為我們提供了 .NET Core CLI 這一工具使我們使用命令行的方式創建我們的 .NET Core 應用，這里我們還是使用 VS 來創建我們的應用，有興趣的朋友，可以看看園子里的這篇文章 =》.NET Core dotnet 命令大全
        2、 安裝 Node.js & Vue CLI
        在整個前后端分離的項目的搭建中，前端的 Vue 項目，是使用 Vue CLI 3 進行搭建的腳手架項目，而 Vue CLI 本質上是一個全局安裝的 npm 包，通過安裝這一 npm 包可以為我們提供終端里的 vue 命令，因此我們需要使用這一腳手架工具的前提，則是需要我們安裝 Node.js 環境。
        打開 Node.js 官網（Node.js），選擇長期支持版下載，之后一路 Next 下去即可。目前的 Node.js 安裝包中已經包含了 npm，因此，我們安裝好 Node.js 即可。npm 可以類比于我們 .NET 平臺的 Nuget，而默認我們安裝的全局組件和緩存默認是在 C:\Users\用戶名\AppData\Roaming 下，如果你想修改緩存的地址或者全局安裝的包地址則需要自己配置環境，具體可參考 =》Node.js安裝及環境配置之Windows篇
        PS：Vue CLI 3 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。

1
2
3

npm uninstall vue-cli -g ## 卸載 vue-cli (1.x or 2.x)
node -v ## 查看安裝的 Node 版本
npm -v ## 查看安裝的 npm 版本

        當 Node 環境安裝好之后，我們就可以安裝 Vue CLI 3 腳手架工具了，如果你之前已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，則需要先卸載舊版本的 Vue CLI。

1
2

npm uninstall vue-cli -g ## 卸載 vue-cli (1.x or 2.x)
npm install -g @vue/cli

        安裝之后，我們就可以在命令行中使用 vue 命令。

1
2

vue ## 查看 vue 相關幫助信息
vue --version ## 查看安裝的 vue cli 版本信息

        3、 安裝 Git
        為代碼添加版本控制是必須的，它可以詳細的記錄你的每一次操作，以及當你的某次作死導致的環境出錯時，你可以很快的恢復環境。經常作死的表示，這個巨需要。
        Git 作為一個分布式的版本控制系統，與 SVN 這種集中式的版本控制系統不同，我們的本地倉庫不僅包含了我們的代碼，還包含了每個人對代碼的操作歷史 log，而 SVN 的歷史操作記錄只存在于中央倉庫中。
        這樣有什么好處呢？假如，某天中央倉庫出錯了需要重新創建，因為我們本地的代碼不包含操作歷史 log，你只能把代碼重新放置到中央倉庫，而文件的歷史版本卻丟失了。如果使用 Git 進行版本控制的話，因為我們本地的倉庫是一個完整的包含歷史操作記錄的倉庫，我們就可以毫無差別的重新搭建一個中央倉庫。
        Git 方面的學習教程，可以看看廖雪峰大神寫的這一系列的教程 =》Git 教程
        打開 Git 官網（Git）下載安裝包安裝，一路 Next 即可。安裝完成后，開始菜單里出現 Git Bash 這個應用，則說明我們的 Git 已經安裝成功了。安裝 Git 之后，我們需要設置我們的名字以及 Email，從而表明我們的身份，這里使用 Git Bash 設置即可。

1
2

git config --global user.name "Your Name" ## 全局設置用戶名
git config --global user.email "email@example.com" ## 全局設置郵箱

        二、 應用整體框架搭建
        當我們安裝好項目開發的環境之后就可以搭建我們的項目框架了，這里我選擇將前后端的項目放到同一個 Git 倉儲中，你也可以根據你自己的喜好放到多個 Git 倉儲中。
        新建一個文件夾作為倉儲，在創建好的文件夾路徑下打開 Git Bash，初始化我們的倉儲。如果你勾選了顯示隱藏文件夾，則會發現，當我們執行好初始化的命令之后，則會在當前文件夾下創建一個 .git 文件夾。

1

git init

        當然，你也可以使用 VS 進行創建 Git 倉儲，使用 VS 創建倉儲后會自動幫我們創建 .gitignore 和 .gitattributes 文件，同樣的，后續對于該倉儲的任何 Git 操作，我們也可以通過 VS 進行。
        gitignore 文件表示我們需要忽略的文件或目錄，而 gitattribute 則用于設置非文本文件的對比方式，這里我們使用 VS 創建 Git 倉儲后生成的 gitignore 文件默認會添加 .NET 項目需要忽略提交的文件和目錄。因為，前端的項目我是使用 VS Code 進行開發的，這里，我需要將一些 VS Code 生成的文件也添加到 gitignore 文件中。

1
2
3
4
5

.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

        創建 ASP.NET Core Web API 的具體過程就不演示了，這里采用的就是基礎的多層架構，當我們創建好項目之后，可以看到 VS 右下角鉛筆 icon 處會顯示我們未做提交的修改。點擊 icon ，輸入我們的提交信息后，就可以將我們的修改提交到倉儲中。

        后端的 API 接口應用創建好了，現在我們使用 Vue CLI 來構建我們前端的 Vue 項目。這里，我選擇在解決方案的根目錄創建我們的前端項目。
        在 Vue CLI 3 中，我們不僅可以使用 vue create 命令來創建我們的項目，而且可以使用圖形化的頁面創建我們的應用。

1
2

vue create project-name ## 使用命令行的形式創建
vue ui ## 使用圖形化的方式創建

        當使用 vue ui 命令后會自動打開創建項目的頁面，可以看到，這個路徑下，并沒有創建好的項目，你可以選擇從別的路徑下導入，或者是直接創建新的項目。如果你有使用過 Vue CLI 之前的版本，使用大寫字母創建項目時是會報錯的，但是在 Vue CLI 3 版本中沒有出現這種問題。

        因為我將前端項目與后端的項目放到同一個倉儲中，所以這里就不需要再進行初始化 git 倉庫了，對于項目的配置，這里就采用默認的配置。點擊創建之后就會自動搭建我們的項目。如何啟動這個腳手架項目，可以按照生成的 README 文件中的步驟執行。

        到這里，基礎的 Vue 腳手架項目就已經搭建完成了，對于添加插件之類的內容，放到我們后面的內容中。另外，雖然我們在創建項目時并沒有勾選初始化 Git 倉儲，但是 Vue CLI 還是創建了一個 gitignore 文件，如果你和我一樣，是將前后端項目放到一個倉儲的話，可以把這個文件里的內容復制到項目根目錄中的 gitignore 文件中，然后把這個文件刪除。

附錄

        微軟官方有提供一套 Vue 的 SPA 應用模板，不過并沒有顯示在我們使用 VS 創建項目的頁面中，而且需要我們添加一個插件之后，使用 .NET Core CLI 的方式創建。因為自己并沒有詳細了解這塊的內容，這里只列出創建的方法，詳細的介紹請查看微軟的官方文檔（Building Single Page Applications on ASP.NET Core with JavaScriptServices ）。

1
2

## 安裝 SPA 模板
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

        當你安裝好模板之后，可以看到，多了使用 Aurelia、Vue、Knockout 創建 SPA 模板的選項，這時我們就可以使用 dotnet new 命令來創建包含 Vue 的模板應用。模板創建完成后需要安裝依賴的包。加載完依賴的包之后，我們就可以通過 VS 或 VS Code 開發調試我們的項目。

1
2

dotnet new vue ## 創建 Vue SPA 項目
npm install ## 還原依賴的 npm 包

上述內容就是ASP.NET中怎么搭建前后端分離框架，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。