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

一、前言這幾年前端的發展速度就像坐上了火箭，各種的框架一個接一個的出現，需要學習的東西越來越多，分工也越來越細，作為一個 .NET Web 程式猿，多瞭解瞭解行業的發展，讓自己擴展出新的技能樹，對自己的職業發展還是很有幫助的。畢竟，現在都快到9102年了，如果你還是只會 Web Form，或許還是 ...

一、前言

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

　　系列目錄地址：ASP.NET Core 項目實戰
　　倉儲地址：https://github.com/Lanesra712/Grapefruit.VuCore

二、Step by Step

　　在整個的開發過程中，後端應用使用 Visual Studio 2017 進行開發，對於前端項目，則是使用 Visual Studio Code 進行開發，嗯，使用專業的工具做相應的事。對於前端的 Vue 項目，我採用的是 Vue CLI 來進行構建的，當然，巨硬也為我們準備了一套 Vue 的模板，如何使用的方法可以在附錄中進行查看。

　　1、項目開發環境搭建

　　1.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 命令大全

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

　　當 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 版本信息

　　1.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 protected]" ## 全局設置郵箱

　　2、應用整體框架搭建

　　當我們安裝好項目開發的環境之後就可以搭建我們的項目框架了，這裡我選擇將前後端的項目放到同一個 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 的開發環境，以及創建我們的項目架構，在後面的文章中則會慢慢的闡述整個項目的開發過程，希望可以能對你有一丟丟的幫助。