1. 安裝 asp.net core匆赃，vscode, node etc.
2. Asp.net core 自帶的模板生成工具等
? ?1)?Microsoft.AspNetCore.SpaTemplates 提供了一些基礎(chǔ)模板(angular,react,knockout 等)
? ?2)?Microsoft.AspNetCore.SpaServices ：關(guān)于SpaTemplates生成的項(xiàng)目內(nèi)部如何工作的锐帜，為SPA提供了很多有用得特性，如服務(wù)器端渲染及與webpack的集成等
? ?3)?Microsoft.AspNetCore.NodeServices ：關(guān)于SpaServices內(nèi)部是如何工作的归薛，為構(gòu)造ASP.NET Core項(xiàng)目提供了一個(gè)快速健壯的在服務(wù)器端運(yùn)行的方法
? 以上提及的特性都能在github上找到：https://github.com/aspnet/JavaScriptServices?
? 可以直接安裝vs2017,里面包括了asp.net core?https://visualstudio.microsoft.com/zh-hans/vs/whatsnew/?rr=https%3A%2F%2Fdevblogs.microsoft.com%2Faspnet%2Fbuilding-single-page-applications-on-asp-net-core-with-javascriptservices%2F
1.運(yùn)行dotnet new(這里給出了很多實(shí)用的模板)
2.選擇一個(gè)mvc的項(xiàng)目，運(yùn)行dotnet new web
3.運(yùn)行dotnet restore
4.為ASP.NET指定運(yùn)行環(huán)境為development
? ? ?1）如果你是在windows下使用powershell:?$Env:ASPNETCORE_ENVIRONMENT = "Development"
? ? ?2）如果你是在使用cmd :?setx ASPNETCORE_ENVIRONMENT "Development" 并重啟你的cmd使配置生效
? ? ?3）如果你在使用Mac/Linux:??export ASPNETCORE_ENVIRONMENT=Development
5. 執(zhí)行 dotnet run把項(xiàng)目跑起來:
服務(wù)器端渲染：
? ? 服務(wù)器端渲染會(huì)使得你的初始UI出現(xiàn)得更快，因?yàn)橛脩魺o須等待他們的瀏覽器下載火本，評(píng)估，及執(zhí)行巨大的js文件聪建，我們將在服務(wù)器端執(zhí)行angular,react等組件钙畔，這也意味著及時(shí)在客戶端禁止的js，也能夠正常的渲染頁面金麸，從而也能保證你的網(wǎng)站能被搜素引擎抓取擎析。
NodeServices:
? ? 即使你不創(chuàng)建spa項(xiàng)目，它也能使你能在服務(wù)器端運(yùn)行js挥下，這也是SpaServices能工作的原因揍魂，比如如果你要在服務(wù)器端渲染一個(gè)angular或者React組件，通過使用NodeServices棚瘟，會(huì)創(chuàng)建一個(gè)Node.js的實(shí)例现斋，并且.net 提供了一個(gè)快速、健壯的方法調(diào)用它
? ?使用NodeServices:
? ?1. dotnet add package Microsoft.AspNetCoreNodeServices
? ?2. dotnet restore
? ?3. Startup.cs 添加 services.AddNodeServices(); （*可以添加不同配置解取，如允許debug： services.AddNodeServices(x=>x.LaunchWithDebugging = true)）
4. 在 index control中添加引用?using Microsoft.AspNetCore.NodeServices
5. 在index方法中使用nodeService
? 6.添加chartModule文件
? ? ?
7.在index.cshtml中直接輸出
8.運(yùn)行 dotnet run (后臺(tái)執(zhí)行完畢的js直接顯示)
?9. Chart示例步责， npm install --save node-chartist
10. 在index controller中添加mock數(shù)據(jù)
11.改寫chartModules.js?
12.在index.cshtml中引入對應(yīng)css文件
13. 運(yùn)行dotnet run
使用SapServices
? ? 添加對其引用，并運(yùn)行dotnet restore
添加對應(yīng)TagHelper
安裝npm包
1.npm init
2.npm install --save aspnet-prerendering
3. 在about頁面加上對應(yīng)代碼
4. 添加一個(gè)ClientApp目錄在此目錄下新建boot-server.js
5. 編寫一個(gè)測試用例：（引用aspnet-prerendering并返回一個(gè)Promise）
6：打開頁面：
為此js文件添加初始化數(shù)據(jù)
1.使用asp-prerender-data
2. 在js文件中調(diào)用傳過來的參數(shù)
3. 刷新頁面
更進(jìn)一步，使用ts:
1.npm install --save ts-loader typescript webpack
2.添加webpack配置文件
3. 添加tsconfig并把boot-server.js改成ts
4.將boot-server換成ts
5.執(zhí)行webpack,編譯后的文件已生成至ClientApp/dist目錄下,main-server.js
6.更改about頁面的引用為main-server(編譯后文件)
7. 再次運(yùn)行dotnet run
https://github.com/wuzinong/JsLearning/tree/master/DotNetCoreSingleApplication/ServerSideRendering
