# Nuxt從入門到放棄 *Min* --- ## CSR vs SSR ---- ### CSR ##### Client-Side Rendering ----  ---- * 優點 * render 速度快 * 能夠減輕Server負擔 * 缺點 * SEO不佳 * 初次讀取久 ---- ### SSR ##### Server-Side Rendering ---- 是網頁上面呈現的內容在伺服器端就已經生成好了，當用戶瀏覽網頁時，伺服器把這個在服務端生成好的完整的html結構內容響應給瀏覽器，而瀏覽器拿到這個完整的html結構內容後直接顯示(渲染)在頁面上的過程。 ----  --- ## 🎉🎉Nuxt誕生啦🎉🎉 ---- ### 介紹 Nuxt.js 是一個基於 Vue.js、用來處理伺服器渲染（SSR）的框架 ---- ### Start a nuxt project ```bash= yarn create nuxt-app first_nuxt_app ``` ---- 基本上就看自己需要什麼東西 如果不知道的話可以照我的  用 ↑ ↓ 空格 操作 選完按Enter就好了 ---- ### 接著進到剛剛建好的專案看看 可以下yarn dev把他跑起來  --- ### Nuxt原理  ---- ### 接著把這個專案clone下來 ```bash= git clone https://github.com/kukina622/todolist_nuxt_frontend.git yarn install #記得載完要installㄛ ``` ---- ## 好了之後就開始囉 --- ## 先來講下資料夾 ---- ### pages 用來對應路由的頁面 假使我有一個page1.vue的組件 127.0.0.1/page1就會自動應到它 ---- ### layouts 放置page裡共通的組件，像header、footer這種， 這樣就不用在每個頁面上寫重複的東西 ---- layouts中可以使用<Nuxt />這個組件 它會把pages組件注入進去，以此來達成固定佈局的效果。  layouts/default.vue ---- 用法是在export裡加一個layout的屬性就好了，如果沒寫的話，它會自動套用default ```javascript= <script> export default { layout: 'blog', // OR layout (context) { return 'blog' } } </script> ``` ---- ### assets、static 這兩個都是放靜態資源的，就一起講了 * assets: 放需要被編譯 (webpacked) 的檔案 * static: 不需額外處理的檔案，例如網站icon (favicon.ico)、設定檔 (robots.txt、sitemap.xml 、CNAME) 等等 ---- ### components 就跟Vue的差不多，放組件的地方 --- ### plugins 用來放客製化插件的地方，能夠把自製插件注入到Vue實例上 ---- 使用時需要export一個function，傳入的第一個參數是一個context物件，有點像在組件裡的this，裡面提供很多nuxt的方法。例如route、app [context詳細屬性](https://nuxtjs.org/docs/internals-glossary/context/) ---- 寫起來大概長這樣 plugins/api.js  ---- 我們要做的就是把自建插件綁在context.app上 ```javascript= context.app.$customPlugin = yourCustomPlugin ``` 這樣其他地方的context.app就會都有$customPlugin這個method了 ---- 如果沒有context的地方呢，我們也可以綁在Vue實例上 ```javascript= import Vue from 'vue' Vue.prototype.customPlugin = yourCustomPlugin ``` 這樣就能使用this.$customPlugin使用了 ---- 如果兩個都要？那就可以直接使用第二個參數了。 第二個參數傳入的是一個inject的function ```javascript= // 前面會自帶$ inject("customPlugin",yourCustomPlugin) ``` ---- 最後只要在nuxt.config.js設定  --- ### middleware 會在一個頁面render之前執行的程式。 例如驗證使用者權限之類的功能，就會以middleware的方式來處理。 ---- 必須要export一個函式，傳入的參數也是context物件 ---- 如果我們要避免已登入用戶進到註冊頁面 就可以這樣寫 ```javascript export default async function ({ app, redirect }) { // 確認用戶是否登入 const { isLogin } = (await app.$api.user.isLogin()).data if (isLogin) { // 如果登入的話 // 重導向至 '/' return redirect('/') } } ``` middleware/auth.js ---- 要使用的話就在組件裡添加一個屬性就能用了 pages/register.vue  要多個middleware話，可以填陣列，他會根據順序去跑  --- ## 接下來要來講nuxt特別的東西 ---- ### asyncData 只能在pages裡使用，會在server端渲染時，就先被執行，通常是用來呼叫API的，而回傳的東西會取代data ---- 我們直接來看範例  pages/index.vue ---- data的東西會變成 ```javascript= export default { data() { return { isLogin: ..., tasks: ... } } } ``` 之後的操作就跟之前一樣就好了 也是用this存取 ----  --- ## End