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

# 04/22 共筆：Vue.js 初學 (一)
[TOC]
### 目標

### 教學

#### 本地 vs code
1. 要先安裝 nodejs
[node js 官網連結](https://nodejs.org/en/download)
2. 安裝好後，要新增環境變數
在**命令提示字元**中尋找 nodejs 資料夾路徑，並複製下來

where npm

例如：我的路徑為 `C:\Program Files\nodejs\`
3. 到 Windows 系統搜尋欄中，搜尋「環境變數」
4. 選擇右下角「環境變數」
5. 在系統變數 > 點選 Path > 進行**編輯**
6. 點選新增，把 nodejs 的路徑新增進去
7. 重新啟動 vs code
8. 開啟專案，測試是否安裝成功

node -v
npm -v

#### 建立專案
1. 到官網查找 **專案初始化** 的指令=> [官方網站](https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application)

- 輸入 **專案初始化** 的指令後，你應該會看到這些問題提示，請你按照以下的設定：
`project name`輸入 `workspace`

- 下面三個選擇 `No`，其他選擇 `Yes`
- Add Vitest for unit testing: No
- Add an End-to-End Testing Solution?: No
- ESlint for code quality: No

- 輸入以下指令，啟動 sever

cd workspace
npm install
npm run dev

#### Vue 基本介紹

[element-plus](https://element-plus.org/zh-CN/)
- 測試是否安裝好 => 添加程式(src/App.vue, 17行後)

<el-button>1234</el-button>

如果你成功安裝 Element-Plus，你的畫面應該會出現長得像下面這張圖的按鈕
- VS code 必裝擴充功能(VS code若有推薦安裝的擴充也建議安裝)

- Plugin - **Element-Plus**
icon 安裝指令

npm install @element-plus/icons-vue

#### v-for
在 html 元素中加入 **屬性 v-for** 可以用迴圈的方式新增相同的 element，以下範例為創建五個元素

v-for="index in 5"

如果希望其他屬性可以填入變數，需要在屬性前面加上`:`，下面例子是展示 name 的命名會隨著 index 變數改變而改變

:name="index"

#### vue router
- 甚麼是router？ -> 路由
- 可以用來幹嘛？ -> 控制路徑

:::info
換你試試看
在呈現的頁面後面加上 `/about`
會進入到 /about 的頁面
:::

template 下面只能有一個 div

#### 利用 router 實作今天的目標 - 常見問題 頁面

- 新增 CommonQuestion.vue 檔案
1. 在 /views 底下建立新的 .vue 檔案
3. 命名為 CommonQuestions (命名時要用駝峰命名法，而且第一個字要大寫，這是規定！！！)
4. 先複製 About.vue 的內容到 CommonQuestions 裡面，並且修改 template 裡面的內容
5. 先改成 `This is a Common Questions Page.`

- 在 router 裡面新增 common-questions 路徑
1. 在 router 檔案中有 index.ts 檔案
2. 可以找到存放所有路徑的**儲存陣列**，長得像下面這樣

routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
]

3. 在陣列中新增一路徑，命名為 `common-questions`
4. 引入 component，就是剛剛在 views 底下新增好的 CommonQuestion.vue 檔案

- 測試
1. 在瀏覽器的 URL 中加入 `/common-questions`
2. 應該要呈現 `This is a Common Questions Page.`

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

### 你的 live share
[正宏 live share](https://prod.liveshare.vsengsaas.visualstudio.com/join?5BEDD101FF74094DBA13F20F23A550F4B90E)

[Jovi live share](https://prod.liveshare.vsengsaas.visualstudio.com/join?E99E4ED111D70677B272217BD8B36F47F3B0)

:::spoiler 使用 CodeSandBox 建立專案
1. [註冊 Sandbox](https://codesandbox.io/)
可以使用 github 登入

2. New Sandbox > Vite > Vue

3. New terminal
把整個專案刪掉

cd ../
rm -rf wrokspace

:::