# 四代升學王

### UI設計稿
https://www.figma.com/file/07MyioLBF6hVB8GGpdfncc/%E5%9B%9B%E4%BB%A3%E5%8D%87%E5%AD%B8%E7%8E%8B-UI%E8%A8%AD%E8%A8%88%E7%A8%BF?type=design&node-id=10-4432&mode=design&t=sWEbp1dz3IKafjwR-0

---

### 現有框架
* [bootstrap 5.1.x](https://bootstrap5.hexschool.com/docs/5.1/getting-started/download/)
* [element plus](https://element-plus.org/zh-CN/)
* vue3
* SCSS
* [Material Design Icons(圖標)](https://pictogrammers.com/library/mdi/)

---

### 頁面分類名稱：

login登入

/ 首頁
Announcement 最新公告 SearchResults搜尋結果 EditProfile修改個人資料 Feature特色介紹 Settings課程設定

classic 經典課程
MasterClasses 名師教學 ExamLive段考直播

questionBank 百萬題庫
ClassTests隨堂練習 ExamTests考卷測驗 PastExamTests歷屆試題 ExamTests考卷測驗詳解 ExamTestResults 考卷測驗結果

digitalLearn 數位教材
DigitalLectures電子講義

doubtSolve 解惑平台
QuestionHistory發問紀錄 ErrorHistory勘誤紀錄 PointHistory點數紀錄

myLearning 我的學習
StudyPlan學習計畫>MyPlan我的計畫 SchoolTimetable學校課表
StudyHistory學習紀錄>StudyData學習數據 SubjectData分科數據 Transcript成績單
MyFavorites我的收藏
MyNotes我的筆記>MyNotesPage我的筆記內頁

page404 報錯

---

### 頁面框架
>目前會用到的
1. layouts：整體頁面框架，目前有三個：空白頁(EmptyLayout)、登入頁(LoginLayout)、主要頁(MainLayout)
3. views：瀏覽頁，所有的分頁都架在這。
- 基本格式：<template></template>(切板內容放這裡) + <script></script> (控制元件，通常是element plus元件基本控制)
3. components：元件，高頻率重複使用的元件會寫成一組
4. assets
* css：scss編譯出來的css
* images：圖片
* scss：scss分層
* styles.scss
* _variables.scss：element plus全域變數

---

### 新增頁面-1 新增一頁
>通常只有一頁，如首頁、登入、404等
1. 資料夾router→routes.js
3. 複製一串 **目前新增到test4了**

       {
        path: '/test4',
        name: 'test4',
        component: () => import('@/views/test4.vue'),
        meta: {
          title: '測試',
          layout: 'MainLayout',
          login: false,
          showNavbarCollapse: true,
        }
      }, 


3. 輸入 http://localhost:XXXX/test4 即可找到該頁面

### 新增頁面-2 新增分組
>通常是一整頁下有多個分頁，如經典課程下裡面有名師教學及段考直播，為了不走丟所以會額外新增一組router方便整理和搜尋
1. 在router資料夾→modules資料夾新增一頁XXXX.js
2. 隨意複製其中一頁js格式
3. 回到router資料夾→routes.js新增對應的importXXXX form './modules/XXXX' 和 ...XXXXRouter,