跳至主要内容

Nuxt

信息

原始 MD by 珉萁

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​

yarn create nuxt-app first_nuxt_app

基本上就看自己需要什麼東西 如果不知道的話可以照我的 用 ↑ ↓ 空格 操作 選完按Enter就好了

接著進到剛剛建好的專案看看​

可以下yarn dev把他跑起來

Nuxt原理​

接著把這個專案clone下來​

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中可以使用

這個組件 它會把pages組件注入進去，以此來達成固定佈局的效果。 layouts/default.vue

用法是在export裡加一個layout的屬性就好了，如果沒寫的話，它會自動套用default

<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詳細屬性

寫起來大概長這樣 plugins/api.js

我們要做的就是把自建插件綁在context.app上

context.app.$customPlugin = yourCustomPlugin

這樣其他地方的context.app就會都有$customPlugin這個method了

如果沒有context的地方呢，我們也可以綁在Vue實例上

import Vue from 'vue'
Vue.prototype.customPlugin = yourCustomPlugin

這樣就能使用this.$customPlugin使用了

如果兩個都要？那就可以直接使用第二個參數了。 第二個參數傳入的是一個inject的function

// 前面會自帶$
inject("customPlugin",yourCustomPlugin)

最後只要在nuxt.config.js設定

middleware​

會在一個頁面render之前執行的程式。 例如驗證使用者權限之類的功能，就會以middleware的方式來處理。

必須要export一個函式，傳入的參數也是context物件

如果我們要避免已登入用戶進到註冊頁面 就可以這樣寫

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的東西會變成

export default {
    data() {
        return {
            isLogin: ...,
            tasks: ...
        }
    }
}

之後的操作就跟之前一樣就好了 也是用this存取

End​