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

# 04/29 共筆：Vue.js 初學 (二)
[TOC]
:::warning
沒上過上一次讀書會的人，一定要看過上次的共筆喔！
1. [04/22 | 共筆](/-LHK2J-EQcqSO2yiWDsrIg)
:::
### 課前準備
#### 上次進度
- [Google Drive 雲端連結 (figma + 專案)](https://drive.google.com/drive/folders/1QdSyw1FdENGoMhfPZBBfrxmkHthuRlqE?usp=sharing)
- [figma file](https://www.icloud.com.cn/iclouddrive/0a7gwZcu2m9I3c4a6p2AyuRQw#target)

- [專案連結](https://www.icloud.com.cn/iclouddrive/0adb1ac7JDvmHo8RvyBn2O7nQ#vue-first-project) 下載 vue-first-project.zip
- 下載完畢後，按照以下步驟開啟專案
1. 解壓縮
2. 使用 terminal
3. 進入 vue-first-project 資料夾，輸入指令 => `cd vue-first-project/`
4. 使用 npm 安裝所需 module，輸入指令 => `npm install`
5. 測試是否成功開啟，輸入指令 => `npm run dev`

#### 安裝好以下這些 VS code 延伸工具
1. Liver share

2. Vetur

### 目標

### 教學

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

#### 0.5. 完整畫面
在 src > App.vue 中 template 標籤底下新增常見問題與對話框：

<h1>常見問題</h1>
<input type="text">

#### 1. 手風琴效果 Component
- 目的：把**手風琴效果的程式碼**包裝成一個 component
- 步驟：
1. 在 components 資料夾底下新增 CollapseList.vue 檔案
2. 把 手風琴效果的程式碼 搬移至 CollapseList.vue 檔案裡面
3. 從 [element-plus 手風琴效果](https://element-plus.org/zh-CN/component/collapse.html#%E6%89%8B%E9%A3%8E%E7%90%B4%E6%95%88%E6%9E%9C) 的介紹中，可以知道此效果所需要 script, html, css 內容。
4. 從 App.vue 中搬移到 CollapseList.vue 裡面 **(也包含Typescript 的程式碼)**

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

    const activeName = ref('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="'Consistency' + val" :name="val">
                <div>
                    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>
                    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>

5. 此時 App.vue 裡面是沒有其他東西的，網頁預覽畫面也會變成空白
6. 在 App.vue 中，引入 CollapseList.vue 這個 Component
- script 加上 `import CollapseList from '@/components/CollapseList.vue'` 引入物件叫做 CollapseList
- template 加上`<CollapseList></CollapseList>` => 使用 CollapseList 物件

:::spoiler 一個 Component 需要的基本內容
如同網頁一樣，需要有三大內容 html, script, css

<script setup lang="ts">
// 放入需要控制的內容 or 引入的檔案
</script>

<template>
<!--  物件本身的架構  -->
</template>

<style scoped>
/*   美化物件的 css 語法   */
</style>

:::
:::info
@ 為src資料夾的縮寫
:::
#### 2. 添加搜尋框
把 [自帶圖標的 Input 框框](https://element-plus.gitee.io/zh-CN/component/input.html#%E5%B8%A6%E5%9B%BE%E6%A0%87%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86) 先加入到 App.vue 裡面

<el-input v-model="input4" size="large" class="w-50 m-2" placeholder="Type something">
    <template #prefix>
      <el-icon class="el-input__icon"><search /></el-icon>
    </template>
</el-input>

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

:::warning
如果沒辦法顯示，要注意 TypeScript 的程式碼有加入到程式裡面
:::

##### 對 input 框框增加 CSS 效果
1. 增加 shadow (陰影) 效果
2. 增加 radius (圓角) 效果
3. 移除框框效果

- 步驟
1. 在網頁上用小幫手找到 input 框框的位置
2. 你會發現改動 CSS 後沒有效果 => style 有兩種 (全域、scoped 局部)
3. solution => 在檔案中新增 **全域的 style**
4. 加上想要的 css 效果
:::info
1. vue 框架本身會將程式碼 **編譯** 過後，輸出至瀏覽器上。
2. 要覆寫原本的 css 可以在語法最後加上`!important`
:::

<style>
.el-input__wrapper{
    filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.1));
    border: 10;
    box-shadow: none;
}
</style>

#### 3. 把 常見問題 的內容包裝成一個頁面(view)
##### 步驟
1. 在 views 資料夾中建立 QuestionAndAns.vue 檔案
2. 把 App.vue 的**部分內容**搬移至 QuestionAndAns.vue

<h1>Q&A</h1>
<el-input v-model="input4" size="large" class="w-50 m-2 input-shadow input-no-border search-input" placeholder="Type something">
    <template #prefix>
      <el-icon class="el-input__icon"><search /></el-icon>
    </template>
</el-input>
<Question></Question>

<script setup>
import { ref } from 'vue'
import Question from "@/components/Question.vue"
import { Calendar, Search } from '@element-plus/icons-vue'
const input4 = ref('')
</script>

3. 在 router/index.ts 中新增路由設定 (在 routes 陣列中添加)

{
  path: '/question',
  name: 'question',
  component: () => import('@/views/QuestionAndAns.vue')
}

:::warning
如果 vs code 有錯誤提示訊息，不一定要理會
報錯請在瀏覽器中查看
:::
4. 在 App.vue 中添加`<RouterView />`

#### 4. 建立 icon Component

#### 5. 完成導覽列

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

### 你的 live share