ASP.NET Core 實戰：使用 ASP.NET Core Web API 和 Vue.js，搭建前後端分離框架

前言

        這幾年前端的發展速度就像坐上了火箭，各種的框架一個接一個的出現，需要學習的東西越來越多，分工也越來越細，作為一個 .NET Web 程式猿，多瞭解瞭解行業的發展，讓自己擴充套件出新的技能樹，對自己的職業發展還是很有幫助的。畢竟，現在都快到9102年了，如果你還是隻會 Web Form，或許還是能找到很多的工作機會，可是，這真的不再適應未來的發展了。如果你準備繼續在 .NET 平臺下進行開發，適時開始擁抱開源，擁抱 ASP.NET Core，即使，現在工作中可能用不到。         雪崩發生時，沒有一片雪花是無辜的，你也不會知道那片雪花，會引起最後的雪崩。有些自說自話，見諒。

        系列目錄地址：ASP.NET Core 專案實戰

        倉儲地址：github.com/Lanesra712/…

Step by Step

        在整個的開發過程中，後端應用使用 Visual Studio 2017 進行開發，對於前端專案，則是使用 Visual Studio Code 進行開發，嗯，使用專業的工具做相應的事。對於前端的 Vue 專案，我採用的是 Vue CLI 來進行構建的，當然，巨硬也為我們準備了一套 Vue 的模板，這裡我沒有使用，有需要的可以到附錄中進行了解（點此穿越）

        一、 專案開發環境搭建

        1、 安裝 .NET Core

         .NET Core 與之前的 .NET Framework 不一樣，它不再緊緊的耦合在 Windows 系統上了，因此，我們可以在支援的作業系統上以安裝軟體的形式安裝我們的 .NET Core 開發環境。

        開啟官網的下載頁面（.NET Downloads），找到 .NET Core，這裡因為我們需要在當前環境進行開發，所以需要安裝 .NET Core SDK，下載完成後，一路 Next 即可。

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

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+)。

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。

npm uninstall vue-cli -g ## 解除安裝 vue-cli (1.x or 2.x)
npm install -g @vue/cli
複製程式碼

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

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 設定即可。

git config --global user.name "Your Name" ## 全域性設定使用者名稱
git config --global user.email "email@example.com" ## 全域性設定郵箱
複製程式碼

        二、 應用整體框架搭建

        當我們安裝好專案開發的環境之後就可以搭建我們的專案框架了，這裡我選擇將前後端的專案放到同一個 Git 倉儲中，你也可以根據你自己的喜好放到多個 Git 倉儲中。

        新建一個資料夾作為倉儲，在建立好的資料夾路徑下開啟 Git Bash，初始化我們的倉儲。如果你勾選了顯示隱藏資料夾，則會發現，當我們執行好初始化的命令之後，則會在當前資料夾下建立一個 .git 資料夾。

git init
複製程式碼

        當然，你也可以使用 VS 進行建立 Git 倉儲，使用 VS 建立倉儲後會自動幫我們建立 .gitignore 和 .gitattributes 檔案，同樣的，後續對於該倉儲的任何 Git 操作，我們也可以通過 VS 進行。

        gitignore 檔案表示我們需要忽略的檔案或目錄，而 gitattribute 則用於設定非文字檔案的對比方式，這裡我們使用 VS 建立 Git 倉儲後生成的 gitignore 檔案預設會新增 .NET 專案需要忽略提交的檔案和目錄。因為，前端的專案我是使用 VS Code 進行開發的，這裡，我需要將一些 VS Code 生成的檔案也新增到 gitignore 檔案中。

.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 命令來建立我們的專案，而且可以使用圖形化的頁面建立我們的應用。

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 ）。

## 安裝 SPA 模板
dotnet new --install Microsoft.AspNetCore.SpaTemplates::* 
複製程式碼

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

dotnet new vue ## 建立 Vue SPA 專案
npm install ## 還原依賴的 npm 包
複製程式碼

總結

        這一章沒有包含很多的內容，主要就是如何搭建我們的 .NET Core 和 Vue 的開發環境，以及建立我們的專案架構，在後面的文章中則會慢慢的闡述整個專案的開發過程，希望可以能對你有一丟丟的幫助。

佔坑

        作者：墨墨墨墨小宇
        個人簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程式設計師，槍手死忠，喵星人。於2016年12月開始.NET程式設計師生涯，微軟.NET技術的堅定堅持者，立志成為雲養貓的少年中面向谷歌程式設計最厲害的.NET程式設計師。
        個人部落格：yuiter.com
        部落格園部落格：www.cnblogs.com/danvic712