# 跟著技術胖老師影片學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]
> 在根目錄創建 `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'],
}
```
Sign in with Wallet
Connect another wallet