第25個冬天

接續之前 .NET Core與Vue3登入者和角色授權管理功能模組(用js版本,cors+Identity+Jwt)_如何將vue專案加至方案中   刪除預設的vue介面程式檔案 調整App.vue的部分 1 2 3 4 5 6 7 <script setup > import Home from './components/Home.vue' </script> <template> <Home /> </template> 預設導入Home元件 修改main.js main.css取消引入，此自訂樣式目前我們不需使用到。 會發現中文內容運行起來出現亂碼異常 可將App.vue 跟 Home.vue (未來你各個元件都做此作業) 選編碼另存 將預設Big5改為UTF8 重新運行起來即可正常 在./src/components目錄下增加 NavBar.vue 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <template> <nav class= "navbar navbar-expand-lg bg-body-tertiary" > <div class= "container-fluid ms-3 me-3" > <router -link class= "navbar-brand" to= "/" > 管理系統 < /router-link> <button class= "navbar-toggler" type= "button" data-bs-toggle= "collapse" data-bs-target= "#navbarNavDropdown" aria-controls= ...

專案目錄創建一個VueNetCore專案根目錄 以下會針對前端及後端分門別類都設置一個特定子目錄 前端部份 於站台根目錄下 透過npm init vue@latest 可參考: https://coolmandiary.blogspot.com/2023/03/net-corevue3.html 產生vue前端專案目錄後 就可以去命名專案名稱要叫捨麼->這邊取名為vue-project 是否用typeacript->這邊先暫時不要 (預設可直接都enter移用No的選擇) 緊接著cd vue-project後 下npm install  等相依套件下載完 執行npm run dev就可跑起vue專案 針對vue-project專案下載幾個所需用到的前端套件 (1)bootstrap : for 樣式頁面布局 npm install bootstrap 開啟src/main.js  將樣式跟js引用 如果有出現這個錯誤，因為bootstrap5依賴Popper.js Core [ERROR] Could not resolve "@popperjs/core" 記得補下載 npm install @popperjs/core --save 若是bootstrap4則需要popper.js npm install popper.js --save (2)vue-router: for路由導覽(安裝第四版本的路由套件) npm install vue-router@4 緊接著開始撰寫路由程式碼規則 在src目錄下新建一個router.js檔案 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import { createRouter, createWebHistory } from 'vue-router' //導入createRouter,createWebHistory方法 //建立路由 const router = createRouter({ history: createWebHistory(), //html5 history routes: [ { name: 'Home' , ...