###### tags: `網頁讀書會`

# 05/13 共筆：Vue.js 初學 (三)
[TOC]
:::warning
沒上過之前讀書會的人，一定要看過上次的共筆喔！
1. [04/22 | 共筆](/-LHK2J-EQcqSO2yiWDsrIg)
2. [04/29 | 共筆](/8jQnwK_mTMWnRkTg1975fQ)

:::
### 課前準備
#### 上次進度（4/29）
:::info
上次有下載過 figma 檔案的，可以直接到自己的 figma 開啟，不用重複下載
:::
- [專案檔案 - Google Drive 雲端連結](https://drive.google.com/drive/folders/1S2OMt6fTJ4NXw7qWSqUFhwVlIZSpVgAm?usp=share_link)

- [figma 協作連結](https://www.figma.com/file/9ThMb1fWPoblUgrgHR3n1O/target?type=design&node-id=0-1&t=XMfjB8Os10otVb3r-0)

- 下載完畢後，按照以下步驟開啟專案
1. 解壓縮
2. 使用 VS code 開啟 vue-first-project-0513
3. 使用 npm 安裝所需 module，輸入指令：

    npm install

4. 啟動伺服器輸入指令：

    npm run dev

:::warning
在開啟專案時，請確認你的路徑是否正確
:::

### 目標

### 教學

##### 0. 預覽畫面設定
- f12 開啟預覽畫面，使用 手機預覽畫面 （iPhone 12 Pro）
- 點選回應式 => iPhone 12 Pro

#### 1. 完成【常見問題】頁面 => css 撰寫
:::warning
請觀看 figma 裡面所定義的設計規範，會說明所有元件的 css 屬性。例如：高度、寬度、字體大小、間距等等。

但是不能夠全部都照抄，因為 figma 提供的 css 是不具有彈性的，例如：位置資訊。

不用複製
- 固定位置：position, left, top... 等
- font-family => 不要反覆覆寫

可以複製
- 元件間相對位置：置中、靠左、元素之間的間隔
- margin、padding、font-size、font-weight、filter 等相關 css 設定
- 特別的 font-family 設定
:::

- 完成「常見問題」的字體大小

:::info
**scoped** 的意思 => 告訴 vue 要經過編譯：
會偵測當下的 html 是否有對應的物件(如 h1, input 等)，並且給定特別的 class 編號(如 data-v-0e640092 等)。

如果不加上 scoped，撰寫的 css 會影響到當下頁面的其他的物件。

如果加上 scoped，且當下沒有對應的元件，則你寫的 css 會被當作不存在，進而刪掉。
:::

- 為每個元件之間增加一點間距 => margin
- 「常見問題」跟「input 框」之間的間距
- 「input 框」跟「手風琴」之間的間距
:::spoiler QuestionTitle.vue 程式碼

    <template>
    <h1>常見問題</h1>
    </template>

    <style scoped>
    h1{
        font-style: normal;
        font-weight: 700;
        font-size: 32px;
        line-height: 38px;
        margin-bottom: 20px;
    }
    </style>

:::

- 覆寫「input 框」套件的 css
- placeholder 的文字「Type Something」改成 =>「問題關鍵字」
- 更改「問題關鍵字」顏色成`#D7D7D7`
- 更改放大鏡 icon 的顏色`#D7D7D7`
:::spoiler QuestionInput.vue 程式碼

    <script setup>
    import { ref } from 'vue'
    const input4 = ref('')
    </script>


    <template>
        <div>
            <el-input v-model="input4" size="large" class="w-50 m-2" placeholder="問題關鍵字">
                <template #prefix>
                    <el-icon class="el-input__icon"><search /></el-icon>
                </template>
            </el-input>
        </div>
    </template>

    <style>
    .el-input__inner::placeholder{
        color: #d7d7d7;
    }
    .el-input__wrapper{
        border-radius: 10px;
        box-shadow: 0px 4px 15px 0px #0000001A;

    }
    </style>
    <style scoped>
    div{
        margin-bottom: 20px;
    }
    .el-input__icon{
        color: #D7D7D7;
    }
    </style>

:::
- 覆寫「手風琴」套件的 css
- 標題字的 css
- 內容文字（描述文字）的 css
:::spoiler CollapseList.vue 程式碼

    <script lang="ts" setup>
    import { ref } from 'vue'

    const activeName = ref('1') // '1' not equal 1
    </script>

    <template>
    <div class="demo-collapse">
        <el-collapse v-model="activeName" v-for="(val, key) in 6" :key="key" accordion>
            <el-collapse-item :title="'Q: Consistency' + val" :name="val">
                <div class="collapse-content">
                    Consistent with real life: in line with the process and logic of real
                    life, and comply with languages and habits that the users are used to;
                </div>
                <div class="collapse-content">
                    Consistent within interface: all elements should be consistent, such
                    as: design style, icons and texts, position of elements, etc.
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
    </template>

    <style>
    .el-collapse-item__header{
        font-size: 14px;
        font-weight: 700px;
        color: #1E2022;
    }
    .collapse-content{
        font-weight: 400;
        font-size: 14px;
        color: #77838F;
    }
    </style>

:::

:::info
覆寫套件的觀念：
- 要覆寫之前，必需先看原本的程式碼中，哪些是已經存在的內容，嘗試撰寫 css 在 style scoped 裡面。發現沒有用之後，在會利用全域 style 覆寫套件原本的 css。
- 要覆寫套件的 css 就必須先在編譯後的 html 上（預覽畫面），尋找需要修改的元件，回到程式碼的部分，針對要修改的元件新增 css，並且不可以加上 scoped。
:::

#### 2. 完成導覽列(Navigator Bar)
- 在 App.vue 裡加上 `<nav></nav>`
- 建立 5 個 `<img></img>`，圖片 src 先使用 logo.svg 替代最後的 icon
- 為這 5 個 img 加上 `class="nav-item"`
- 調整 nav-item 的大小，長、寬皆為 24px
- 利用 `flex`、`justify-content`、`align-items` 把 nav-items 水平分散和垂直置中。
- 把 nav 的長寬大小設定成 `width: 100vw;`、`height: 73px;`
- 把 nav 的位置設定在螢幕的下方、中間（且貼合螢幕左邊）=> 利用`position: fixed;`、`bottom: 0;`、`left: 0;` 可達成。
- 爲 nav 設定左上和右上圓角以及陰影 => `border-radius: 14px 14px 0 0 ;`、`filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.1));`。
- `object-fit:contain;` 解決的事情是，因為每一個 icon 的長寬大小都不一樣，所以要使用 object-fit 這個 css 語法去確保每個 icon 的比例都一樣(把比較小的 icon 拉大他的長寬，跟其他的一樣大)。
- 把 img 替換成最後的 svg
- 在路徑 `@/assets/icons` 已經有所有的 icon svg 檔案

:::info
更改整體的背景顏色 => 在 main.css 裡面
選擇檔案`assets/main.css`，裡面有`#app`加上 `background-color:你要的顏色`就可以更改了。
:::
:::spoiler 目前階段的App.vue程式碼

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <div>
    <RouterView  />
    <nav>
      <img class="nav-item" src="@/assets/icons/home-icon.svg" alt="">
      <img class="nav-item" src="@/assets/icons/calc-icon.svg" alt="">
      <img class="nav-item" src="@/assets/icons/search-icon.svg" alt="">
      <img class="nav-item nav-item-large" src="@/assets/icons/solve-icon.svg" alt="">
      <img class="nav-item" src="@/assets/icons/setting-icon.svg" alt="">
    </nav>
  </div>
</template>

  
<style scoped>
nav{
  background-color: white;
  width: 100vw;
  height: 73px;
  position: fixed;
  bottom: 0;
  left: 0;
  border-radius: 14px 14px 0 0;
  filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.1));

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.nav-item{
  width: 24px;
  height: 24px;
}

.nav-item-large{
  object-fit: contain;
}
</style>

:::

#### 3. 包裝成 component
- components 裡面新增 Menu.vue 檔案
- component 起手式 `<template></template>`
- 把 App.vue 的 nav 內容剪下到 Menu.vue 裡面
- 把路徑設定好

### 相關連結
- element-plus 官網文檔
[連結](https://element-plus.org/zh-CN/component/button.html)

### 小箭頭練習
[dcard](https://www.dcard.tw/f/ntust/p/240013192)

<!--  -->

<!--  -->