---
# System prepended metadata

title: 跟著技術胖老師影片學Nuxt

---


# 跟著技術胖老師影片學Nuxt
SSR 伺服器端渲染
類似php J2EE

在服務器端 VUE 渲染 HTML 再返回瀏覽器
加載速度比SPA快

相對於SPA（單頁）有助於SEO

適用於：新聞、ＢＬＯＧ、電影網站


</br>
---
</br>


# 配置預設css檔案
在 assets 建立 css/normalize.css
在 nuxt.config.js 中新增一條
`css : [~assets/css/normalize.css]`
(*小蚯蚓 ~ 表示從根目錄開始計算*)

## 全局 transition
>在上頭說過的 **配置預設css** 中配置 transition
如此一來『所有』的頁面進出入跳轉都會自動套用[color=lightblue]
```css=
.page-enter-active,
.page-leave-active {
    transition: opacity .8s;
}

.page-enter,
.page-leave {
    opacity: 0;
}
```
> 如果想要在不同頁面套用不同的transition 呢？[color=lightblue]
> 則把css中的.page，改成自己想要的名稱
> 並且在該頁面的export default 內增加一個項目
`transition: '名稱'`
```css=
.名稱-enter-active,
.名稱-leave-active {
    transition: opacity .8s;
}

.名稱-enter,
.名稱-leave {
    opacity: 0;
}
```

<br>
---

# 打包資料位置
nuxt.config.js裡頭的build 
建立loader 
則webpack配置項可以放在裡頭


<br>
---



# 路由配置
不同於一般的Vue使用 
```javascript
<router-link :to=""></router-link>
```
Nuxt中使用
```javascript
<nuxt-link :to="{name: 'home',params:{id:8800}}">首頁</nuxt-link>
````
## 動態路由
> 新增資料夾 **news** 中建立 **index.vue**
則 **<nuxt-link to="news">** 會直接導到該頁面
>>在同資料夾建立 `_id.vue`
則可透過該檔案獲取 ``$route.params.id``
連結則是寫 `news-id` [color=lightblue]
```javascript
<nuxt-link :to="{name:'news'}">沒ID</nuxt-link>
<nuxt-link 
:to="{name:'news-id', params: {id : 2266}}">
有ID</nuxt-link>
```

## validater(params) 驗證路由

> 下方驗證參數是否為數字 [color=lightblue]
> * 為數字的話會直接通行無阻
> * 非數字的話會 404page
```javascript
export default {
  validate({ params }) {
    return /^\d+$/.test(params.id);
  }
};
```

# 路由搞定SEO，head()
>  SEO 中，每一頁head的 title 和 content 都很重要
> 這個部分我們可以透過路由配置來設定個別頁面的title[color=lightblue]
點選連結的時候帶入 `params: {title: '個別標題'}`
```javascript=
<nuxt-link :to=
"{name:'news-id', params: {id : 2266, title:'個別標題'}}"
>CLICK</nuxt-link>
```
> 在該路由的頁面中使用 `head()` 接收 `title`、`meta`[color=lightblue]
```javascript=
export default {
  data() {
    return {
      title: this.$route.params.title
    };
  },
  head() {
    return {
      title: this.title,
      meta: 
      [{ 
          hid: "description", 
          name: "news1", 
          content: "這是news1的內容" 
      }]
    };
  }
};
```

<br>
---

# 默認模板
> 用來定義 `<head>` 及以上的東西
>  `nuxt.config.js` 中可以看到默認模板的head配置[color=lightblue]

![](https://i.imgur.com/RHIHxJD.png)

> 在根目錄創建 `app.html` 及為默認模板的版型 
>>  `{{ HEAD }}` 是塞入預設配置中的內容
> > `{{ APP }}` 是塞入.vue的內容 [color=lightblue]
```htmlmixed=
<!DOCTYPE html>
<html lang="en">

<head>
    {{ HEAD }}
</head>

<body>
    <h1>肥璇練習</h1>
    {{ APP }}
</body>

</html>
```

<br>
---

# 默認佈局
> 用來定義 `<template>` 內的東西
>  `layouts/default.vue` 中可以修改默認佈局[color=lightblue]

## 利用默認佈局佈置404頁面

>  `layouts資料夾` 中創建`error.vue` 處理404頁面
> 利用內建的 `error.statusCode` 來判斷頁面
> 記得使用 `props` 接收 `error` 參數[color=lightblue]
```javascript=
<template>
  <div>
    <h2 v-if="error.statusCode == 404">404頁面，找不到！</h2>
    <h2 v-else>500頁面，伺服器錯誤！</h2>
  </div>
</template>

<script>
export default {
  props: ["error"]
};
</script>
```


<br>
---

# AsyncData()
> 组件 **`初始化前`** 被調用的，所以方法內不能透過 this 來引用。
> ex: 所以讀取資料時只需要 **`{{ detail }}`**

> 記得一定要用 **`return`**[color=lightpink]

```javascript=
asyncData() {
 return axios
  .get("http://slllcapi.1966.org.tw/api/AddrTurnName/Get?page=1")
  .then(res => {
    return {
      detail: res.data.response
    };
  });
  }
```

<br>
---

# Element-UI
> 1. npm 安裝[color=lightblue]
```
npm install element-ui -S
```
> 2. 在 plugins 中的新增 **`element-ui/element-ui.js`**
> 並且引入下方代碼 : [color=lightblue]
```javascript=
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
```
> 3. 在 nuxt.config.js 中的新增下方幾個配置[color=lightblue]
```javascript=
css: ['element-ui/lib/theme-chalk/index.css'],
plugins: ['~plugins/element-ui/element-ui'],

build:{
 //防止多次打包
    vendor: ['element-ui'],
}
```
