ASP.NET Core 实战：使用 ASP.NET Core Web API 和 Vue.js 搭建先后端分离项目

 1、前言

 　　这几年前端的发展速度就像坐上了火箭，各类的框架一个接一个的出现，须要学习的东西愈来愈多，分工也愈来愈细，做为一个 .NET Web 程序猿，多了解了解行业的发展，让本身扩展出新的技能树，对本身的职业发展仍是颇有帮助的。毕竟，如今都快到9102年了，若是你仍是只会 Web Form，或许仍是能找到不少的工做机会，但是，这真的再也不适应将来的发展了。若是你准备继续在 .NET 平台下进行开发，适时开始拥抱开源，拥抱 ASP.NET Core，即便，如今工做中可能用不到。
　　雪崩发生时，没有一片雪花是无辜的，你也不会知道那片雪花，会引发最后的雪崩。有些自说自话，见谅。

　　系列目录地址：ASP.NET Core 项目实战
　　仓储地址：https://github.com/Lanesra712/Grapefruit.VuCore

 2、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 命令大全

　　1.二、安装 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.三、安装 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 文件中，而后把这个文件删除。

 3、附录

 　　微软官方有提供一套 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 包

 4、总结

 　　这一章没有包含不少的内容，主要就是如何搭建咱们的 .NET Core 和 Vue 的开发环境，以及建立咱们的项目架构，在后面的文章中则会慢慢的阐述整个项目的开发过程，但愿能够能对你有一丢丢的帮助。