[指南] Dotnet 結合 Vue 的 MVC 專案規劃架構 – 開發階段

章節連結

Dotnet.5 Core MVC 專案整合 Vue 的開發,是近期於公司上遇到的一項挑戰。由於能參照的範本實屬稀少,於是這邊筆記下整備工作。至於日後在本機端模擬真實上線的步驟 ( 透過 IIS ),則留到下一篇。
dotnet


重點摘要

  • 採用 MVC 架構,因此 Vue-cli 改使用多頁輸出。換言之,每一個頁面都是一個獨立的 Vue Instance
  • 後端控制路由和 Controller
  • 前端開發時,先運行 dotnet run 將後端伺服器打開 https://localhost:5001 再開始
  • 前端開發時,有兩種方法可使用:
    1. 進入 client-app 下,使用 vue-cli 提供的 npm run serve 加速開發,並搭配 proxy 自根目錄轉址到 https://localhost:5001
    2. 在專案根目錄下 dotnetMultiVues/src/dotnetMultiVues.Web/,使用 env=dev dotnet watch run來開發,不過這樣每次前端有修改存檔時,都得花上時間等候較長的 npm run build
  • dotnet publish –configuration Release後,會在 bin 資料夾下生成 Release 資料夾和一系列的檔案。最後,將 bin/Release/net5.0/publish 作為 IIS 伺服器上的網站資料夾 ( 實體路徑 )
  • 不同的 Vue 實體間,可以利用如 vuex-persistedstate 來維持 state 的狀態。 不過在每次的初始載入前,要視情況決定是否載入儲存於 localStorage 的值。

Github Repo

https://github.com/andy922200/dotnet-mvc-multi-vue-template

Prerequisites


Step by Step

1. 前往 https://dotnet.microsoft.com/download 安裝好 Dotnet 5.0 SDK
2. 用 Dotnet new 的指令開啟一個 MVC 專案

3. 在根目錄中用 dotnet sln 來記錄下此根目錄下有哪些專案。若根目錄沒有 .sln,要先新增一個,並將專案加入這個 sln 清單內

4. 在根目錄下,先行配置好 .gitignore 、 .vscode/settings.json 和 vetur.config.js 檔案

.gitignore

請點選此處前往 Github 上觀看

.vscode/settings.json

vetir.config.js

5. 清除掉 dotnetMultiVues\src\dotnetMultiVues.Web\wwwroot裡的所有東西,因為這些會被 vue-cli build 出來的檔案給取代掉
6. 當你安裝好 npm 和 Vue CLI 後,執行以下指令來產生前端開發環境

你可以根據你的情境,安裝 Vue2 / Vue3 / Typescript / Vuex / Vue-Router … 等功能,以下是這次選擇的配置情況。

7. 在 client-app 中,打開顯示隱藏的資料夾,將其中的 .git 資料夾給全數刪除。因為在根目錄下已經有版本控制的 .git 了。
8. 在 client-app 下建立 vue.config.js,並調整為多頁輸出模式。若有兩頁名稱為 demo 和 dashboard 的話,可以調整成以下:

9. 調整前端頁面的設定檔和資料結構:

public/index.html

client-app/src

.eslintrc.js

.stylelintrc.json

請點選此處前往 Github 上觀看

pages/{folder}/*.vue

請點選此處前往 Github 上觀看

package.json

請點選此處前往 Github 上觀看

10. 調整 dotnet mvc 預設範本的內容

startup.cs

<project’s name>.csproj

views/shared/_layout.cshtml

views / asp-controller_name / asp-action_name

controllers


Reference

  1. Vue Multi Pages in Dotnet Core
  2. What routes do I add so I can have mixed MVC and Web API with both default Get and additional actions?
  3. Vue-CLI 製作 SPA 很方便,那需要多頁面的時候呢?
按讚加入粉絲團

延伸閱讀