Nuxt.js初探

在開始之前請大家考慮一個問題，CSR和SSR有什麼差別？

Nuxt前言

這篇文章主要介紹 Nuxt 的一些使用方法， Nuxt.comfig.js 檔案配置，從Nuxt是什麼到打包部署的一個基礎流程筆記，由于【趙花花】水準能力有限，如有不正确之處，望了解并指出。另外精力有限，僅僅是打通一些常用的需求，并沒有提供實際完整項目，以及一些項目業務中的公共子產品,請大家諒解。

Nuxt.js 官網

Nuxt2

Nuxt.js初探

Nuxt3

Nuxt.js初探

Nuxt.js 是什麼？

根據上面

Nuxt 2.x

和

Nuxt 3.x

官網介紹，個人了解大體意思是：基于

Vue.js

的

服務端渲染（SSR）

通用應用基礎架構，跟Vue一樣主要關注前端層面的UI渲染。如果同學你有Vue基礎，那麼上手是非常快速的，基本沒有任何難度。

如果同學你對後端服務有一定的了解，那就太好了。

Nuxt.js有什麼優勢？

現在

Vue.js

，

React.js

大多數用于

單頁面

（SPA）應用，随着技術的發展，單頁面應用已不足以滿足需求。并且一些缺點也成為單頁面應用的通病：

單頁面應用在通路時會将所有的檔案進行加載（可以考慮懶加載，按需加載）。
首屏通路時，從打開打開網址到界面展現需要等待一段時間，界面不會有任何東西，也就是常說的 白屏 ，這就造成給使用者的體驗很不好。
另外一點是總所周知的 SEO 相關的問題。

Nuxt.js 的出現正好來解決這些問題，如果你的網站是偏向社群需要搜尋引擎提供流量的項目，又有Vue基礎，那麼Nuxt.js就再合适不過了。

同類型還有哪些架構？

Next.js
Nuxt.js

Nuxt.js 的生命周期

validate => asyncData => fetch => head

建立第一個Nuxt項目

配置Port（端口号）和 Host（位址）

package.json 中的配置
Nuxt.config.js中的配置

環境變量配置

下載下傳依賴

npm install cross-env
或者
yarn add cross-env

根目錄建立env.js

module.exports = {
    dev: {
        Desc: '開發環境',
        API: '',
    },
    product: {
        Desc: '生産環境',
        API: '',
    },
}

package.json 檔案配置

"scripts": {
    "dev": "cross-env MODE=dev nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

配置ICO

在nuxt.cnfig.js配置檔案中的head中添加對應的配置，相關配置可以前往Vue Meta，如下：

head: {
    link: [
      // 此處為設定引入ico, 預設指向根目錄下static檔案
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

配置路由動畫

Nuxt.js 使用 Vue.js 的元件來實作路由切換時的過渡動效。

配置全局樣式

根目錄下建立css檔案夾，再建立main.css檔案
nuxt.config.js 檔案中配置

css: [
    '@/CSS/main.css'
  ],

配置less

下載下傳 less , less-loader
如下就能夠使用了

<style token string">"less" scoped>

</style>

引入Element-ui

具體使用哪種UI架構，根據自己的喜好以及業務需求來就行，沒有特别的規定說明。

下載下傳element-ui依賴

npm install element-ui

或

yarn add element-ui

項目根目錄下建立 plugins
檔案夾

這裡之是以要建立
plugins 檔案夾是因為 nuxt.config.js 中的配置項要一一對應，nuxt會自動去查找比對檔案夾，否則可能出現找不到，運作失敗的情況。

Nuxt.js初探

plugins檔案夾下建立element-ui檔案夾及對應的js/ts檔案，并引入element-ui，使用方式同vue中使用一緻。

import Vue from "vue";
import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

nuxt.config.js 中的plugins中引入建立的element-ui檔案

plugins: [
    {
      src: '@/plugins/element-ui/element-ui', ssr: true
    },
   ]

自定義配置Layout

在建立的pages目錄下建立頁面，與建立Vue基本一緻，但是也有一些特别之處。此處就多了一個屬性layout，這個屬性就是指定你目前使用那個布局方式，如果不設定就使用預設配置。

name: "LoginPage",
  layout: "loginLayout",  // loginLayout 是自定義建立的檔案名稱，這個檔案處于根目錄layouts檔案夾下
  data() {
    return {
      pageName: "登陸頁面",
      form: {
        name: "",
        pwd: "",
        safecode: "",
      },
      codeImgUrl: "",
    };
  },

loginLayout檔案内容

<template>
	<!-- 此處的 <nuxt/> 與vue中的 <router-view></router-view> 和 react 中的 {children} 有相同之處 -->
    <nuxt/>
</template>

配置全局預設Layout

與上面自定義配置layout一樣的方式，隻不過是另外一個檔案，檔案名稱隻能是

default.vue

項目根目錄下建立Layouts檔案夾
Layouts 檔案夾下建立default.vue檔案作為全局預設布局檔案
具體使用頁面配置參數 layout: 'default' 注意：此處的 layout 對應的值 default 為 Layouts 檔案夾下具體的檔案名名稱

單頁面自定義layou

使用方式與

配置全局layout一緻

，唯一差別是

與具體頁面中的layout值不一樣

。

路由

Nuxt.js 依據 pages 目錄結構自動生成 vue-router 子產品的路由配置。

要在頁面之間使用路由，官方建議使用标簽。

官方路由

普通路由跳轉

<nuxt-link to="/login">
 <el-button>跳轉按鈕</el-button>
</nuxt-link>

設定初始預設路由

利用中間件

1.根目錄建立中間件檔案夾

2. 建立中間檔案xxx.js或xxx.ts

export default function (context) {
    const { redirect, isHMR, app, store, route, params, error } = context;
    // console.log('中間件：', isHMR,route,params)

    if (route.fullPath === '/') {
        return redirect('/Login')
    }
}

nuxt.config.js配置

router: {
	middleware: ['redirect_to_login'],  // 路由中間件
}

nuxt.config.js單獨配置

router: {
    extendRoutes(routes, resolve) {  // 擴充路由
      routes.push({
        path: '/',
        redirect: '/Login'
      })
    }
  },

設定動态路由及參數校驗

在 Nuxt.js 裡面定義帶參數的動态路由，需要建立對應的

以下劃線作為字首的 Vue 檔案 或 目錄

。

Nuxt.js初探

Nuxt.js 可以讓你在動态路由元件中定義參數校驗方法。

validate(context) {
    // 動态路由校驗
    return true;
  },

如果校驗方法傳回的值不為 true或Promise中 resolve 解析為false或抛出 Error ， Nuxt.js 将自動加載顯示 404 錯誤頁面或 500 錯誤頁面。

設定嵌套路由

`路由傳參，元件傳參與vue中的使用方式基本一緻`

自定義初始頁

配置全局error (404) 頁面

在根目錄下的plugins檔案夾下建立xxx.js檔案

export default (context) => {
    const { route, redirect } = context;
    const { matched } = route;
    console.log('全局路由攔截器：',context,route)
    if (matched.length === 0) {
        redirect('/error')
    }
}

在nuxt.config.js中進行配置

plugins: [
   // 此處為單獨配置全局路由
    {
      src: '@/plugins/router.global.interceptor'
    }
  ],

元件懶加載

Compnents 下元件分類及使用

如果頁面中要使用components目錄下的元件，則不需要像vue中進行手動引入，隻需要将對應的檔案名稱拷貝在頁面中使用即可。例如：

components 目錄下建立Header.vue檔案。

在layouts目錄下的default.vue中間中使用。

<template>
	<!-- 與vue2.x版本一緻，依舊需要一個根節點 -->
	<div>
		<Header/>
		...
	</div>
</template>

Vuex

引入Axios并配置代理

下載下傳依賴檔案

npm install axios
或
yarn add axios

Nuxt.config.js

中代理配置

axios: {
    proxy: true,  // 開啟代理
    prefix: '/api' // 配置請求接口字首
  },

  proxy: {
    '/api': {
      target: 'http://10.170.224.96:18103',  // 代理位址
      pathRewrite: {  // 字首替換或置空
        '^/api': ''
      },
      changeOrigin: true,  // 發送請求頭中host會設定成target
    }
  },

具體元件中使用

methods: {
	// 跟平常在vue中調用基本一緻
    async getCaptchaImageFn() {
      const resData = await this.$axios.get("/captchaImage11");
      
    },
}

Axios增加攔截器

根目錄plugins 檔案夾下建立axios攔截器檔案（xxxx.js

攔截器中具體配置（配置不全，自行補全）

import {Message} from 'element-ui'

// 定義code碼對應的資訊
const errMsgToCodeObj = {

}

export default (context) => {
    const {store, $axios, redirect} = context;
    // 可以列印一下具體輸出了什麼内容
    // console.log(22222222, context)
    // console.log(22222222, store, store.state)
    // console.log(22222222, JSON.stringify($axios))
    // console.log(22222222, redirect)

    //  請求攔截器
    $axios.onRequest(config => {
        // console.log('請求攔截器::', config);
        const Token = store.state.Token;
        if (config.url === '/captchaImage') {
            // 驗證碼不需要無權限
            return config;
        } else if (Token && config.url !== '/captchaImage') {
            // 除開擷取驗證碼以外都要上送Token辨別
            config.headers.bbb = Token;
            return config;
        } else {
            // 以上都不是則傳回登陸頁面
            redirect('/login');
            return config;
        }
    })


    //  響應攔截器
    $axios.onResponse(config => {
        // console.log('響應攔截器::', config);
        const {data:{code, data, message, success}, headers, request, status, statusText} = config;
        if (status !== 200) {
            Message({
                message,
                type: 'error',
            })
        } else {
            return config.data;
        }
    })


    // 錯誤攔截器
    $axios.onError(config => {
        const {response: {data:{message,error},status}} = config;
        // console.log(111111111, config,error,errMsgToCodeObj[status]);
        switch(status.toString()){
            case '404':
                Message({
                    message: error,
                    type: 'error'
                })
                break;
        }

        return config
    })
}

nuxt.config.js中進行配置

plugins: [    {
      src: '@/plugins/axios.Interceptor'
    },
  ],

CSR（用戶端渲染）和 SSR（服務端渲染）的差別

CSR缺點：

初次加載存在白屏問題
不友善SEO
用戶端壓力大

SSR特點：

不會出現白屏問題，響應時間快（這個跟網絡也有一定的關系，這裡讨論的是正常網絡的情況下）
減少資源檔案加載次數
便于SEO，爬蟲可以爬取資料

SSR缺點：

伺服器壓力增加，增加CPU和記憶體資源占用
學習成本增加

其他擴充

引入表單驗證 validator.js
i18國際化
動畫效果 Animate.css
引入日期格式化插件 day.js 或 moment.js
樣式深層次穿透

Nuxt.js初探

Nuxt前言

Nuxt.js 官網

Nuxt2

Nuxt3

Nuxt.js 是什麼？

Nuxt.js有什麼優勢？

同類型還有哪些架構？

Nuxt.js 的生命周期

建立第一個Nuxt項目

配置Port（端口号）和 Host（位址）

環境變量配置

配置ICO

配置路由動畫

配置全局樣式

配置less

引入Element-ui

自定義配置Layout

配置全局預設Layout

單頁面自定義layou

路由

普通路由跳轉

設定初始預設路由

設定動态路由及參數校驗

設定嵌套路由

路由傳參，元件傳參 與vue中的使用方式基本一緻

自定義初始頁

配置全局error (404) 頁面

元件懶加載

Compnents 下元件分類及使用

Vuex

引入Axios并配置代理

Axios增加攔截器

CSR（用戶端渲染）和 SSR（服務端渲染）的差別

CSR缺點：

SSR特點：

SSR缺點：

其他擴充

繼續閱讀

`路由傳參，元件傳參與vue中的使用方式基本一緻`