為什么打算寫這些文章？

沒有為什么，只是為了學習Angular和更了解.Net Core等技術

需要用到的技術？

• 后端使用.Net Core 2.1 + EF Core 2.1 + Mysql 5.7 + Identity （不知道Identity算不算一個獨立的技術點）

• 前端主要使用的是Angular 6.x +?Ant （出自阿里巴巴的一套angular開源組件庫）https://ng.ant.design/docs/introduce/zh

大綱

• 開發(fā)環(huán)境搭建

• Angular的使用姿勢

• ANT的使用姿勢

• .Net Core +?EFCore +?Mysql的使用姿勢

• Identity的使用姿勢

• 系統(tǒng)發(fā)布（Windows和Ubuntu的服務器環(huán)境配置，包括Https環(huán)境的配置）

以上大綱只是暫時性的，寫的過程中會隨時調整，以實際發(fā)布文章為主

---

開發(fā)環(huán)境的搭建

　　我記得我當年剛出來找工作的時候，整個前端圈子都流行JQuery，基本前端開發(fā)=JQuery+一堆插件，伴隨而生的也有一堆的UI庫（easy?UI，bootstrap。。。等的）。

　　如今才四五年過去，JQuery在不面向搜索引擎的網站中，基本上很難看到身影了（老舊的系統(tǒng)除外），新的各種BS軟件基本選擇都是Vue?Angular?React這三個框架了（統(tǒng)稱前端三巨頭）。前端的開發(fā)方式也發(fā)生了翻天覆地的變化，從引入一個Script就開始操作dom寫邏輯的方式，變成了先安裝NodejS，然后開始引入各種npm包啊，啥構建工具啊，然后再開始編碼，再然后發(fā)布的時候，還要編譯一下。。。，剛開始我也覺得這種方式特別麻煩。就感覺脫了褲子放屁一樣。

　　但是沒辦法，大趨勢就是這樣。面對變化，我們只能去擁抱，去適應。真正了解過一段時間之后，才發(fā)現這么做確實是有道理的。個人感覺這是前端工程化的一個體現。JavaScript從腳本進化成為了真正的編程語言。（當然今天的豬腳不是JavaScript，而是它的超集TypeScript）

1.安裝NodeJS

NodeJs的安裝方式非常簡單。https://nodejs.org/en/

下載LTS版本的安裝包，一路Next就好了。

安裝好了，在命令行里面查看一下

確認這樣，應該沒問題，也許你們的版本號和我不一樣。我這個是之前安裝的，和最新版是有小差別，但是完全不影響使用

?2.安裝Angular的包

2.1.首先全局安裝Angular

npm install -g @angular/cli

　　Angular官網要求Angular6.0必須在node?8.x?和 npm?5.x?以上的版本才能正常使用，更低的版本也許會出現N多問題。

?　　安裝成功后，在命令行上運行?ng -v

　　

　　如果出現這個東東，那么說明你成功的安裝了Angular的最新版

　　如果沒有出現這個東東，那么先重啟一下電腦。然后再看，還是不行的話，可以跳轉到第一步，連續(xù)重試三次，還是有問題，麻煩出門右轉Angular官網?https://angular.cn/guide/quickstart

?

2.2?創(chuàng)建一個Angular項目，并運行起來

　　隨便選擇一個電腦里面，你喜歡目錄（多次實踐，千萬不要選擇非英文的路徑，連C#也不行，必須純英文路徑，不然會有莫名錯誤），執(zhí)行命令

ng new testapp //testapp可以自己寫你喜歡的名字，就是你的項目名

　　輸入angular創(chuàng)建目錄的命令后，按回車鍵，angular-cli會自動創(chuàng)建一個angular的模板，只需要一首歌的時間可以創(chuàng)建完成

　　

　　如果是這樣的話，那么說明創(chuàng)建成功了，進入testapp的目錄 ，執(zhí)行npm start?,然后這次估計要好幾首歌的時間才能運行起來了。。。（看你的網速決定。。。如果實在是不行，可以把Npm的數據源切換到淘寶的源上去，但是請千萬不要使用cnpm來替換npm，因為也會遇到莫名且搞不定的問題。。）

　　

?

　　啟動成功后，在瀏覽器界面輸入 http://localhost:4200就可以看到Angular的默認界面了

　　

　　到這里之后，說明Angular已經安裝成功了

Angular權威教程

作者：[美]阿里·勒納Ari Lerne）, [巴西]費利佩·庫里Felipe Cour）, [美]內特·默里Nate Murray, [巴西]卡洛斯·塔沃爾達

當當 廣告 購買

　　2.3?安裝ANT?組件庫

?　　在新版的NG cli里面提供了一個賊好用的命令 ng add 。。。。

　　恰好ant官方緊跟著就支持了。我們可以很方便的使用ng add?ng-zorro-antd?[options]?命令把ANT組件庫添加到我們新建的angular項目中

　　

　　如果沒有報錯的話，那就npm?install?ng-zorro-antd一下 ,我公司電腦就不用走這一步，但是家里電腦需要走這一步，不然就報錯，不知道為啥，如果有知道的大佬可以指點一下

　　再次訪問localhost:4200 ,當當當當。。。就會看到下邊的這個圖標，那么說明你的ant安裝好了

　　3.創(chuàng)建asp.Net Mvc Core? 的項目

　　　　記得升級你們的猥瑣死丟丟到最新版。。。不然Angular模板創(chuàng)建出來默認是4.x，是webpack的的模板，難用的一批。。。升級到最新版就是angular-cli的工程模板了。

　　3.1?創(chuàng)建工程

　　

　　然后點擊確定。。。

　　3.2?點擊運行

　　第一次運行的時候，大家可以先泡一杯茶，然后打開抖音（此處廣告五毛），然后使勁的嗨一會兒。再回來估計都還沒運行起來。原因很簡單，第一次運行的時候，會下載默認工程里面的angular所引用的包，賊慢。。

　　等待了一陣之后，瀏覽器突然彈出來一個頁面

　　

　　說明我們的.Net Core +?Angular5.x的項目就搭建好了。。。

　　看到這里，某些細心的園友可能會覺得很無語。后面直接用猥瑣死丟丟創(chuàng)建項目就好了，為毛前面要折騰那么多沒卵用的東西？

　　因為Angular自帶的模板是Angular5.x，但是最新的angular已經6.x了，5升級到6，不是那么簡單。因為其中涉及到Rxjs的升級，還有angular的本身的一些API的升級，所以我打算把自己揣摩的方式告訴大家，當然大家也可以參照官方的升級文檔進行升級?https://update.angular.io。

　　3.3?如何簡單粗暴的升級Angular5.x到6.x

　　我剛開始學習的時候，先按照官方升級的指南升級的，爬了一堆坑，最后還是沒搞定。最后用兩個詞搞定了 ‘復制’->‘粘貼’

　　　　3.3.1?復制我們前面創(chuàng)建的ng+ant的前端工程文件

　　　　

　　　　3.3.2?直接刪除掉.Net Core下的ClientApp下的全部文件

　　　　

　　　　就這一堆東西，然后粘貼前端的工程文件到這里，

　　　　再然后就點擊運行，會成功看到之前運行成的Ant的界面，

　　　　這樣我們就成功把默認項目的5.x升級到6.x了

　　　　到這里呢，就算是已經搭建好了asp.net core?mvc+angular6.x的開發(fā)環(huán)境

---

?

　　但是呢，本篇文章還沒有結束，我打算分享一些我個人開發(fā)SPA項目的一些小經驗（也或者說是小技巧）

?寫angular的程序，盡量使用vscode，猥瑣死丟丟寫TypeScript的體驗真的比不上vscode（個人感覺）

在后臺運行一個ps1界面，使用npm?start?增量編譯Angular,可以不用每次修改后，都等一首歌的時間才能看到效果

開發(fā)環(huán)境下，使用UseProxyToSpaDevelopmentServer("http://localhost:4200");替換UseAngularCliServer(npmScript: "start");，這樣可以極大提高工作效率。

?

如果有愿意一起交流的大佬，可以加我們的qq群：80669150 ,可吹水，可斗圖，可學習

原文地址：https://www.cnblogs.com/chenxincoder/p/9333074.html

.NET社區(qū)新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結

以上是生活随笔為你收集整理的【asp.net Core MVC + angular6实战】 - 1. 环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。