開發流程
前端開發和后端開發是一樣的，都需要閱讀接口文檔。?
準備工作：?
?1：導入項目中準備的基礎過程到 VsCode。
2：啟動前端項目，訪問該項目
3：熟悉一下基本的布局
<script setup></script><template><div class="common-layout"><el-container><!-- Header 區域 --><el-header class="header"><span class="title">Tlias智能學習輔助系統</span><span class="right_tool"><a href=""><el-icon><EditPen /></el-icon> 修改密碼 | </a><a href=""><el-icon><SwitchButton /></el-icon> 退出登錄</a></span></el-header><el-container><!-- 左側菜單 --><el-aside width="200px" class="aside">左側菜單欄</el-aside><el-main>右側核心展示區域</el-main></el-container></el-container></div>
</template><style scoped>
.header {background-image: linear-gradient(to right, #00547d, #007fa4, #00aaa0, #00d072, #a8eb12);
}.title {color: white;font-size: 40px;font-family: 楷體;line-height: 60px;font-weight: bolder;
}.right_tool{float: right;line-height: 60px;
}a {color: white;text-decoration: none;
}.aside {width: 220px;border-right: 1px solid #ccc;height: 730px;
}
</style>
<el - container> ：外部容器
<el - header>：頂欄容器
<el - aside>：側邊欄容器
<el - main>：主要區域容器
<el - footer>：底欄容器
左端動態菜單
我們首先實現這個菜單的基本樣子
<!-- 左側菜單欄 -->
<el-menu><!-- 首頁菜單 --><el-menu-item index="/index"><el-icon><Promotion /></el-icon> 首頁</el-menu-item><!-- 班級管理菜單 --><el-sub-menu index="/manage"><template #title><el-icon><Menu /></el-icon> 班級學員管理</template><el-menu-item index="/clazz"><el-icon><HomeFilled /></el-icon>班級管理</el-menu-item><el-menu-item index="/stu"><el-icon><UserFilled /></el-icon>學員管理</el-menu-item></el-sub-menu><!-- 系統信息管理 --><el-sub-menu index="/system"><template #title><el-icon><Tools /></el-icon>系統信息管理</template><el-menu-item index="/dept"><el-icon><HelpFilled /></el-icon>部門管理</el-menu-item><el-menu-item index="/emp"><el-icon><Avatar /></el-icon>員工管理</el-menu-item></el-sub-menu><!-- 數據統計管理 --><el-sub-menu index="/report"><template #title><el-icon><Histogram /></el-icon>數據統計管理</template><el-menu-item index="/empReport"><el-icon><InfoFilled /></el-icon>員工信息統計</el-menu-item><el-menu-item index="/stuReport"><el-icon><Share /></el-icon>學員信息統計</el-menu-item><el-menu-item index="/log"><el-icon><Document /></el-icon>日志信息統計</el-menu-item></el-sub-menu>
</el-menu>
?
?然后我們實現其動態效果,（點哪就跳轉到其對應的頁面），我們要用到 Vue Router。
?
Vue Router 介紹：
Vue Router：Vue 的官方路由。為 Vue 提供富有表現力，可配置的，方便的路由。
Vue 中的路由：路徑 與 組件 的對應關系。
組成：
Router 實例：路由實例，基于 createRouter 函數創建，維護了應用的路由信息。
<router - link>：路由鏈接組件，瀏覽器會解析成 <a>（超鏈接）。
<router - view>：動態視圖組件，用來渲染與展示與路由路徑對應的組件
我們如果要用這玩意的話，在創建 Vue 工程的時候記得選 Yes。?
?
我們接下來正式開始實現：
首先我們要完成的功能是：點擊對應菜單訪問對應路徑，這個功能很好實現，只需要在
<el menu> 這個標簽中，將 router 設置為 true 即可。
<el-menu router = "true">具體原理，可以看一下官方給的文檔
?
下一步我們就要展示與這個 路徑 對應的 組件了。在 router/index.js 下配置
import { createRouter, createWebHistory } from 'vue-router'
import ClazzView from '../views/clazz/index.vue'
import DeptView from '../views/dept/index.vue'
import EmpView from '../views/emp/index.vue'
import IndexView from '../views/index/index.vue'
import LayoutView from '../views/layout/index.vue'
import LogView from '../views/log/index.vue'
import LoginView from '../views/login/index.vue'
import EmpReportView from '../views/report/emp/index.vue'
import stuReportView from '../views/report/stu/index.vue'
import StuView from '../views/student/index.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: '/index', name: 'index',component: IndexView },{ path: '/login', name: 'login',component: LoginView },{ path: '/log', name: 'log',component: LogView },{ path: '/layout', name: 'layout',component: LayoutView },{ path: '/clazz', name: 'clazz',component: ClazzView },{ path: '/emp', name: 'emp',component: EmpView },{ path: '/empReport', name: 'empReport',component: EmpReportView },{ path: '/stuReport', name: 'stuReport',component: stuReportView },{ path: '/dept', name: 'dept',component: DeptView },{ path: '/stu', name: 'stu',component: StuView },]
})export default router
?注意這里的 name 不要重名了，不然會沖突出 bug。
最后我們要把組件展示在我們要求它展示的地方，也就是在我們要展示的地方放上我們的 路由展示組件，這里我們展示到右側。
<el-main><!-- 右側核心展示區域 --><router-view></router-view></el-main>?
這里還有個 bug，就是我們的登錄頁面也會展示到右測的區域，因為我們在 App.vue 里把 Layout 寫死了，我們這里直接用路由展示組件
<script setup>
//引入views/layout/index.vue命名為Layout
import Layout from "@/views/layout/index.vue";
</script><template><router-view></router-view>
</template><style scoped></style>
但是這個登錄界面的 bug 解決了，我們登錄之后的界面又出現了 bug，我們會發現本該展示在右邊的界面占領了整個界面，我們甚至連左側的菜單都看不見了，要解決這個問題，我們需要用到一個新技術 -- 路由嵌套
import { createRouter, createWebHistory } from 'vue-router'
import ClazzView from '../views/clazz/index.vue'
import DeptView from '../views/dept/index.vue'
import EmpView from '../views/emp/index.vue'
import IndexView from '../views/index/index.vue'
import LayoutView from '../views/layout/index.vue'
import LogView from '../views/log/index.vue'
import LoginView from '../views/login/index.vue'
import EmpReportView from '../views/report/emp/index.vue'
import stuReportView from '../views/report/stu/index.vue'
import StuView from '../views/stu/index.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: '',component: LayoutView,redirect: '/index', // 重定向到首頁（當我路徑為空的時候）children:[{ path: 'index', name: 'index',component: IndexView },{ path: 'log', name: 'log',component: LogView },{ path: 'layout', name: 'layout',component: LayoutView },{ path: 'clazz', name: 'clazz',component: ClazzView },{ path: 'emp', name: 'emp',component: EmpView },{ path: 'empReport', name: 'empReport',component: EmpReportView },{ path: 'stuReport', name: 'stuReport',component: stuReportView },{ path: 'dept', name: 'dept',component: DeptView },{ path: 'stu', name: 'stu',component: StuView },]},{ path: '/login', name: 'login',component: LoginView },]
})export default router
代碼還是比較好理解的，就是將除了 登錄部分的路由和組件 都寫到一個 children 集合里，這樣當我們訪問到 ' / ' 的時候，就會先展示我們的整體布局 LayoutView，然后會進入我們的 children 集合里展示我們訪問的 path 和對應的 component。
?
