.NET 出到 6 之後，原本官方的 SPA 套件被棄用，新版改成使用 Vue-CLI + SPA Proxy。我們就從零開始建立新的 .NET6 + Vue-CLI (Webpack base) + Vuetify 專案吧～

安裝 .NET 6 & Node.js

要先安裝 .NET 6 & Node.js，並確認版本是否正確。

1
dotnet --version

此篇 dotnet 使用 6.0.200

1
node --version

此篇 node 使用 v16.4.0

起始 dotnet template

這次我們先起始一個 react 官方的模板，再從裡面修改檔案。

1
dotnet new react

會看到起始專案長這樣。

dotnet new react

主要 SPA 放置的地方就在 ClientApp 裡面，所以我們只要用 Vue-CLI 建立新的 Vue 專案，把對應的資料夾和設定值替換掉即可。

Vue-CLI 建立專案

先安裝 Vue-CLI，並確認版本。

1
npm install -g @vue/cli
1
vue --version

此篇 Vue-CLI 使用 v5.0.1

接著用 Vue-CLI 建立新專案，但因為 Vue-CLI 不允許使用字母大寫，所以我們把資料夾取名 client-app。

1
vue create client-app

接著選擇要的 preset，因為 Vuetify 還沒有用到 Vue 3 ，所以這邊就選擇 Vue 2 的選項。也可以依自己的喜好選 Manual 的方式組合。

接著進入 client-app 裡面，安裝 Vuetify。

1
cd client-app
1
vue add vuetify

Vuetify 的模板就先選擇 recommended 即可。

Vue 模板都安裝完後，可以先試跑看有沒有成功。

1
npm run serve

可以看到在 8080 port 有跑出建置好的 Vue + Vuetify 專案。

Vue + Vuetify 專案

確認安裝成功，就可以把舊的 ClientApp 刪掉。

設定 config

接著我們把一些 proxy config 設定上去，讓 dotnet 可以和 Vue-CLI 銜接起來。

打開 csproj 檔案。把 SpaRoot 的部分改成新建的資料夾 client-app\，並注意這裡的 SpaProxyServerUrl port 是 44405 且 SpaProxyLaunchCommand 是 npm start。所以我們要把 Vue-CLI 的設定改成對應的 port 和npm 指令。

注意！若 SpaProxyServerUrl 若是 https 要改成 http。

PS. 每次 dotnet 模板起始的 port 都不一樣，請以當次建立的 port 為準。

1
2
3
4
5
6
7
8
9
10
11
...
  <PropertyGroup>
    ...
    <SpaRoot>client-app\</SpaRoot>
    ...
    <SpaProxyServerUrl>http://localhost:44405</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    <RootNamespace>dotnet_core_vue_cli</RootNamespace>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
  ...

打開 package.json，把 “serve” 改成 “start” 。

1
2
3
4
5
"scripts": {
  "start": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

打開 vue.config.js，將 devServer port 換成 44405。

1
2
3
4
5
6
7
8
9
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    port: 44405,
  },
  transpileDependencies: [
    'vuetify'
  ]
})

Run~

開啟 csproj 檔案，vscode 會問你是否要建立 debug file，選擇 Yes，vscode 就會建立一個 .vscode 的資料夾。

vscode debug files

接著去 Debug 按 Run 的按鈕，我們就大功告成囉～

Run

Done

今天的範例在 github，下回見～