前端學習之nuxtjs

Rich$kr發表於2020-11-16
前端UXJS

兩個非同步任務沒有關聯關係，可以改為並行執行節省時間

Promise.all返回執行的所有非同步任務結果組成的陣列

dayjs一個輕量級的時間處理類庫

markdown-it一個將普通文字轉換為markdown的庫

pm2一個可以後臺管理node服務的庫，不會佔用命令列

路由

Nuxt.js依據pages目錄結構自動生成vue-router模組的路由配置

路由導航
  • a標籤：會重新整理整個頁面，不要使用
  • nuxt-link元件：https://router.vuejs.org/zh/api/#router-link-props
  • 程式設計式導航：https://router.vuejs.org/zh/guide/essentials/navigation.html
動態路由

以_為開頭的檔案會自動歸為動態路由

巢狀路由

建立和父元件同名的資料夾，在該資料夾中建立的.vue檔案會變成父元件的巢狀路由，在父元件中使用nuxt-child標籤用於顯示子檢視內容
在這裡插入圖片描述

自定義路由配置
  • base
    在nuxt.config.js中配置base來設定路由根路徑
    在這裡插入圖片描述
  • extendRoutes
    用來擴充套件路由，使其它路由也能指向該檔案
// routes：一個陣列，路由配置表
// resolve：解析路由元件路徑
extendRoutes (routes, resolve) {
	routes.push({
		path: '/hello',
		name: 'hello',
		component: resolve(__dirname, 'pages/about.vue')
	})
}
  • linkActiveClass
    用來設定當前啟用路由的樣式為高亮，如果要精確匹配路由還需要在nuxt-link里加上exact屬性

模板

在src資料夾下建立app.html檔案來定製化Nuxt.js預設的html模板

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
    <head {{ HEAD_ATTRS }}>
        {{ HEAD }}
    </head>
    <body {{ BODY_ATTRS }}>
        <!-- 渲染的內容最終會注入到這裡 -->
        <h1>app.html</h1>
        {{ APP }}
    </body>
</html>

佈局

Nuxt.js允許擴充套件預設的佈局，或在layouts目錄下建立自定義的佈局，別忘了在佈局檔案中新增<nuxt />元件用於顯示頁面的主體內容

  • 在src目錄下建立layouts資料夾，建立.vue檔案作為自定義佈局，其中default.vue是預設的佈局
  • 在元件中使用layout屬性來指定當前元件的佈局檔案，不宣告則使用default.vue作為摸人佈局

非同步資料-asyncData

  • 基本用法

    • 它會將asyncData返回的資料融合元件data方法返回資料一併給元件
    • 呼叫時機：服務端渲染期間和客戶端路由更新之前

  • 注意事項

    • 只能在頁面元件中使用
    • 沒有this，因為它是在元件初始化之前被呼叫的

當你想要動態頁面內容有利於 SEO 或者是提升首屏渲染速度的時候，就在asyncData中發請求拿資料

asyncData的引數可以拿到所有的屬性和方法

身份驗證（JWT）

js-cookie：客戶端做資料持久化儲存的外掛
cookieparser：服務端解析cookie的外掛

  • 初始化客戶端容器資料
  // nuxtServerInit是一個特殊的action方法
  // 這個action會在服務端渲染期間自動呼叫
  // 作用：初始化容器資料，傳遞資料給客戶端使用
  nuxtServerInit ({ commit }, { req }) {
    let user = null

    // 如果請求頭中有Cookie
    if (req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie)
      try {
        user = JSON.parse(parsed.user)
      } catch (err) {

      }
    }
    commit('setUser', user)
  }

中介軟體

中介軟體允許定義一個自定義函式執行在一個頁面或一組頁面渲染之前

每一箇中介軟體應放置在middleware目錄，檔名的名稱將成為中介軟體名稱

一箇中介軟體接受一個context作為引數

客戶端和服務端的頁面均可攔截

監聽query引數改變

預設情況下query的改變不會呼叫asyncData方法，如果要監聽這個行為可以設定頁面元件的watchQuery屬性監聽引數

外掛

在執行Vue.js應用程式之前可以執行js外掛

注在Vue元件的生命週期內，只有beforeCreate和created這兩個方法會在客戶端和服務端被呼叫，其它生命週期函式僅在客戶端被呼叫

使用方法：建立plugins資料夾，並在裡面建立需要用到的外掛，再在配置檔案中註冊
將axios作為外掛使用可以在裡面獲取到上下文物件

HTML頭部

在頁面元件中使用head() {}來定製化頁面特有的meta標籤和title屬性

head () {
   return {
     title: this.title,
     meta: [
       {
       	// 為meta標籤配置唯一的標識號
         hid: 'description',
         name: 'description',
         content: 'description'
       }
     ]
   }
 }

Nuxt打包部署

在這裡插入圖片描述

傳統部署方式

  • 配置Host + Port（nuxt.config.js）
  • 壓縮釋出包（.nuxt、static、nuxt.config.js、package.json、package-lock.json）
  • 把釋出包傳到服務端
  • 解壓
  • 安裝依賴
  • 啟動服務

現代化部署方式

在這裡插入圖片描述

相關文章