一、前言

?　　這幾年前端的發(fā)展速度就像坐上了火箭，各種的框架一個(gè)接一個(gè)的出現(xiàn)，需要學(xué)習(xí)的東西越來(lái)越多，分工也越來(lái)越細(xì)，作為一個(gè) .NET Web 程序猿，多了解了解行業(yè)的發(fā)展，讓自己擴(kuò)展出新的技能樹(shù)，對(duì)自己的職業(yè)發(fā)展還是很有幫助的。畢竟，現(xiàn)在都快到9102年了，如果你還是只會(huì) Web Form，或許還是能找到很多的工作機(jī)會(huì)，可是，這真的不再適應(yīng)未來(lái)的發(fā)展了。如果你準(zhǔn)備繼續(xù)在 .NET 平臺(tái)下進(jìn)行開(kāi)發(fā)，適時(shí)開(kāi)始擁抱開(kāi)源，擁抱 ASP.NET Core，即使，現(xiàn)在工作中可能用不到。
　　雪崩發(fā)生時(shí)，沒(méi)有一片雪花是無(wú)辜的，你也不會(huì)知道那片雪花，會(huì)引起最后的雪崩。有些自說(shuō)自話，見(jiàn)諒。

　　系列目錄地址：ASP.NET Core 項(xiàng)目實(shí)戰(zhàn)
　　倉(cāng)儲(chǔ)地址：https://github.com/Lanesra712/Grapefruit.VuCore

?二、Step by Step

　　在整個(gè)的開(kāi)發(fā)過(guò)程中，后端應(yīng)用使用 Visual Studio 2017 進(jìn)行開(kāi)發(fā)，對(duì)于前端項(xiàng)目，則是使用 Visual Studio Code 進(jìn)行開(kāi)發(fā)，嗯，使用專業(yè)的工具做相應(yīng)的事。對(duì)于前端的 Vue 項(xiàng)目，我采用的是 Vue CLI 來(lái)進(jìn)行構(gòu)建的，當(dāng)然，巨硬也為我們準(zhǔn)備了一套 Vue 的模板，如何使用的方法可以在附錄中進(jìn)行查看。

　　1、項(xiàng)目開(kāi)發(fā)環(huán)境搭建

　　1.1、安裝 .NET Core

　　.NET Core 與之前的 .NET Framework 不一樣，它不再緊緊的耦合在 Windows 系統(tǒng)上了，因此，我們可以在支持的操作系統(tǒng)上以安裝軟件的形式安裝我們的 .NET Core 開(kāi)發(fā)環(huán)境。

　　打開(kāi)官網(wǎng)的下載頁(yè)面（.NET Downloads），找到 .NET Core，這里因?yàn)槲覀冃枰诋?dāng)前環(huán)境進(jìn)行開(kāi)發(fā)，所以需要安裝 .NET Core SDK，下載完成后，一路 Next 即可。

　　當(dāng)我們安裝完成后，打開(kāi)控制臺(tái)，輸入命令，則會(huì)顯示出我們本機(jī)安裝的 .NET Core 版本。

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

　　在 .NET Core 中為我們提供了 .NET Core CLI 這一工具使我們使用命令行的方式創(chuàng)建我們的 .NET Core 應(yīng)用，這里我們還是使用 VS 來(lái)創(chuàng)建我們的應(yīng)用，有興趣的朋友，可以看看園子里的這篇文章?=》.NET Core dotnet 命令大全

　　1.2、安裝 Node.js & Vue CLI

　　在整個(gè)前后端分離的項(xiàng)目的搭建中，前端的 Vue 項(xiàng)目，是使用 Vue CLI 3 進(jìn)行搭建的腳手架項(xiàng)目，而 Vue CLI 本質(zhì)上是一個(gè)全局安裝的 npm 包，通過(guò)安裝這一 npm 包可以為我們提供終端里的 vue 命令，因此我們需要使用這一腳手架工具的前提，則是需要我們安裝 Node.js 環(huán)境。
　　打開(kāi) Node.js 官網(wǎng)（Node.js），選擇長(zhǎng)期支持版下載，之后一路 Next 下去即可。目前的 Node.js 安裝包中已經(jīng)包含了 npm，因此，我們安裝好 Node.js 即可。npm 可以類比于我們 .NET 平臺(tái)的 Nuget，而默認(rèn)我們安裝的全局組件和緩存默認(rèn)是在 C:\Users\用戶名\AppData\Roaming 下，如果你想修改緩存的地址或者全局安裝的包地址則需要自己配置環(huán)境，具體可參考?=》Node.js安裝及環(huán)境配置之Windows篇

　　PS：Vue CLI 3 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。

　　當(dāng) Node 環(huán)境安裝好之后，我們就可以安裝 Vue CLI 3 腳手架工具了，如果你之前已經(jīng)全局安裝了舊版本的 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 相關(guān)幫助信息 vue --version ## 查看安裝的 vue cli 版本信息

　　1.3、安裝 Git

　　為代碼添加版本控制是必須的，它可以詳細(xì)的記錄你的每一次操作，以及當(dāng)你的某次作死導(dǎo)致的環(huán)境出錯(cuò)時(shí)，你可以很快的恢復(fù)環(huán)境。經(jīng)常作死的表示，這個(gè)巨需要。
????????Git 作為一個(gè)分布式的版本控制系統(tǒng)，與 SVN 這種集中式的版本控制系統(tǒng)不同，我們的本地倉(cāng)庫(kù)不僅包含了我們的代碼，還包含了每個(gè)人對(duì)代碼的操作歷史 log，而 SVN 的歷史操作記錄只存在于中央倉(cāng)庫(kù)中。
????????這樣有什么好處呢？假如，某天中央倉(cāng)庫(kù)出錯(cuò)了需要重新創(chuàng)建，因?yàn)槲覀儽镜氐拇a不包含操作歷史 log，你只能把代碼重新放置到中央倉(cāng)庫(kù)，而文件的歷史版本卻丟失了。如果使用 Git 進(jìn)行版本控制的話，因?yàn)槲覀儽镜氐膫}(cāng)庫(kù)是一個(gè)完整的包含歷史操作記錄的倉(cāng)庫(kù)，我們就可以毫無(wú)差別的重新搭建一個(gè)中央倉(cāng)庫(kù)。
????????Git 方面的學(xué)習(xí)教程，可以看看廖雪峰大神寫的這一系列的教程 =》Git 教程
????????打開(kāi) Git 官網(wǎng)（Git）下載安裝包安裝，一路 Next 即可。安裝完成后，開(kāi)始菜單里出現(xiàn) Git Bash 這個(gè)應(yīng)用，則說(shuō)明我們的 Git 已經(jīng)安裝成功了。安裝 Git 之后，我們需要設(shè)置我們的名字以及 Email，從而表明我們的身份，這里使用 Git Bash 設(shè)置即可。

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

　　2、應(yīng)用整體框架搭建

　　當(dāng)我們安裝好項(xiàng)目開(kāi)發(fā)的環(huán)境之后就可以搭建我們的項(xiàng)目框架了，這里我選擇將前后端的項(xiàng)目放到同一個(gè) Git 倉(cāng)儲(chǔ)中，你也可以根據(jù)你自己的喜好放到多個(gè) Git 倉(cāng)儲(chǔ)中。
　　新建一個(gè)文件夾作為倉(cāng)儲(chǔ)，在創(chuàng)建好的文件夾路徑下打開(kāi) Git Bash，初始化我們的倉(cāng)儲(chǔ)。如果你勾選了顯示隱藏文件夾，則會(huì)發(fā)現(xiàn)，當(dāng)我們執(zhí)行好初始化的命令之后，則會(huì)在當(dāng)前文件夾下創(chuàng)建一個(gè) .git 文件夾。

git init

　　當(dāng)然，你也可以使用 VS 進(jìn)行創(chuàng)建 Git 倉(cāng)儲(chǔ)，使用 VS 創(chuàng)建倉(cāng)儲(chǔ)后會(huì)自動(dòng)幫我們創(chuàng)建 .gitignore 和 .gitattributes 文件，同樣的，后續(xù)對(duì)于該倉(cāng)儲(chǔ)的任何 Git 操作，我們也可以通過(guò) VS 進(jìn)行。
　　gitignore 文件表示我們需要忽略的文件或目錄，而 gitattribute 則用于設(shè)置非文本文件的對(duì)比方式，這里我們使用 VS 創(chuàng)建 Git 倉(cāng)儲(chǔ)后生成的 gitignore 文件默認(rèn)會(huì)添加 .NET 項(xiàng)目需要忽略提交的文件和目錄。因?yàn)?#xff0c;前端的項(xiàng)目我是使用 VS Code 進(jìn)行開(kāi)發(fā)的，這里，我需要將一些 VS Code 生成的文件也添加到 gitignore 文件中。

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

　　創(chuàng)建 ASP.NET Core Web API 的具體過(guò)程就不演示了，這里采用的就是基礎(chǔ)的多層架構(gòu)，當(dāng)我們創(chuàng)建好項(xiàng)目之后，可以看到 VS 右下角鉛筆 icon 處會(huì)顯示我們未做提交的修改。點(diǎn)擊 icon ，輸入我們的提交信息后，就可以將我們的修改提交到倉(cāng)儲(chǔ)中。

　　后端的 API 接口應(yīng)用創(chuàng)建好了，現(xiàn)在我們使用 Vue CLI 來(lái)構(gòu)建我們前端的 Vue 項(xiàng)目。這里，我選擇在解決方案的根目錄創(chuàng)建我們的前端項(xiàng)目。
　　在 Vue CLI 3 中，我們不僅可以使用 vue create 命令來(lái)創(chuàng)建我們的項(xiàng)目，而且可以使用圖形化的頁(yè)面創(chuàng)建我們的應(yīng)用。

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

　　

　　當(dāng)使用 vue ui 命令后會(huì)自動(dòng)打開(kāi)創(chuàng)建項(xiàng)目的頁(yè)面，可以看到，這個(gè)路徑下，并沒(méi)有創(chuàng)建好的項(xiàng)目，你可以選擇從別的路徑下導(dǎo)入，或者是直接創(chuàng)建新的項(xiàng)目。如果你有使用過(guò) Vue CLI 之前的版本，使用大寫字母創(chuàng)建項(xiàng)目時(shí)是會(huì)報(bào)錯(cuò)的，但是在 Vue CLI 3 版本中沒(méi)有出現(xiàn)這種問(wèn)題。

　　因?yàn)槲覍⑶岸隧?xiàng)目與后端的項(xiàng)目放到同一個(gè)倉(cāng)儲(chǔ)中，所以這里就不需要再進(jìn)行初始化 git 倉(cāng)庫(kù)了，對(duì)于項(xiàng)目的配置，這里就采用默認(rèn)的配置。點(diǎn)擊創(chuàng)建之后就會(huì)自動(dòng)搭建我們的項(xiàng)目。如何啟動(dòng)這個(gè)腳手架項(xiàng)目，可以按照生成的 README 文件中的步驟執(zhí)行。

　　到這里，基礎(chǔ)的 Vue 腳手架項(xiàng)目就已經(jīng)搭建完成了，對(duì)于添加插件之類的內(nèi)容，放到我們后面的內(nèi)容中。另外，雖然我們?cè)趧?chuàng)建項(xiàng)目時(shí)并沒(méi)有勾選初始化 Git 倉(cāng)儲(chǔ)，但是 Vue CLI 還是創(chuàng)建了一個(gè) gitignore 文件，如果你和我一樣，是將前后端項(xiàng)目放到一個(gè)倉(cāng)儲(chǔ)的話，可以把這個(gè)文件里的內(nèi)容復(fù)制到項(xiàng)目根目錄中的 gitignore 文件中，然后把這個(gè)文件刪除。

?三、附錄

?　　微軟官方有提供一套 Vue 的 SPA 應(yīng)用模板，不過(guò)并沒(méi)有顯示在我們使用 VS 創(chuàng)建項(xiàng)目的頁(yè)面中，而且需要我們添加一個(gè)插件之后，使用 .NET Core CLI 的方式創(chuàng)建。因?yàn)樽约翰](méi)有詳細(xì)了解這塊的內(nèi)容，這里只列出創(chuàng)建的方法，詳細(xì)的介紹請(qǐng)查看微軟的官方文檔（Building Single Page Applications on ASP.NET Core with JavaScriptServices?）。

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

　　當(dāng)你安裝好模板之后，可以看到，多了使用 Aurelia、Vue、Knockout 創(chuàng)建 SPA 模板的選項(xiàng)，這時(shí)我們就可以使用 dotnet new 命令來(lái)創(chuàng)建包含 Vue 的模板應(yīng)用。模板創(chuàng)建完成后需要安裝依賴的包。加載完依賴的包之后，我們就可以通過(guò) VS 或 VS Code 開(kāi)發(fā)調(diào)試我們的項(xiàng)目。

dotnet new vue ## 創(chuàng)建 Vue SPA 項(xiàng)目 npm install ## 還原依賴的 npm 包

?四、總結(jié)

?　　這一章沒(méi)有包含很多的內(nèi)容，主要就是如何搭建我們的 .NET Core 和 Vue 的開(kāi)發(fā)環(huán)境，以及創(chuàng)建我們的項(xiàng)目架構(gòu)，在后面的文章中則會(huì)慢慢的闡述整個(gè)項(xiàng)目的開(kāi)發(fā)過(guò)程，希望可以能對(duì)你有一丟丟的幫助。

總結(jié)

以上是生活随笔為你收集整理的ASP.NET Core 实战：使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。