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

時間 2019-11-08

標籤 asp.net asp core 實戰使用 web api vue.js vue 搭建後端分離框架欄目 ASP 简体版

原文原文鏈接

前言

這幾年前端的發展速度就像坐上了火箭，各類的框架一個接一個的出現，須要學習的東西愈來愈多，分工也愈來愈細，做爲一個 .NET Web 程序猿，多瞭解瞭解行業的發展，讓本身擴展出新的技能樹，對本身的職業發展仍是頗有幫助的。畢竟，如今都快到9102年了，若是你仍是隻會 Web Form，或許仍是能找到不少的工做機會，但是，這真的再也不適應將來的發展了。若是你準備繼續在 .NET 平臺下進行開發，適時開始擁抱開源，擁抱 ASP.NET Core，即便，如今工做中可能用不到。雪崩發生時，沒有一片雪花是無辜的，你也不會知道那片雪花，會引發最後的雪崩。有些自說自話，見諒。javascript

系列目錄地址：ASP.NET Core 項目實戰html

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

Step by Step

在整個的開發過程當中，後端應用使用 Visual Studio 2017 進行開發，對於前端項目，則是使用 Visual Studio Code 進行開發，嗯，使用專業的工具作相應的事。對於前端的 Vue 項目，我採用的是 Vue CLI 來進行構建的，固然，巨硬也爲咱們準備了一套 Vue 的模板，這裏我沒有使用，有須要的能夠到附錄中進行了解（點此穿越）vue

1、項目開發環境搭建java

一、安裝 .NET Corenode

.NET Core 與以前的 .NET Framework 不同，它再也不牢牢的耦合在 Windows 系統上了，所以，咱們能夠在支持的操做系統上以安裝軟件的形式安裝咱們的 .NET Core 開發環境。git

打開官網的下載頁面（.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 命令大全

二、安裝 Node.js & Vue CLIgithub

在整個先後端分離的項目的搭建中，前端的 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篇web

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 版本信息
複製代碼

三、安裝 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" ## 全局設置郵箱
複製代碼

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 的開發環境，以及建立咱們的項目架構，在後面的文章中則會慢慢的闡述整個項目的開發過程，但願能夠能對你有一丟丟的幫助。

佔坑

        做者：墨墨墨墨小宇
        我的簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程序員，槍手死忠，喵星人。於2016年12月開始.NET程序員生涯，微軟.NET技術的堅決堅持者，立志成爲雲養貓的少年中面向谷歌編程最厲害的.NET程序員。
        我的博客：yuiter.com
        博客園博客：www.cnblogs.com/danvic712