小聊： 基于vue.js，用于SSR渲染解決SEO，但不僅限于此。不用于局限的眼光去看它，使用它會(huì)比原生vue3更加流暢舒適，性能也更高。在熟悉vue3的基礎(chǔ)上學(xué)習(xí)成不算高。另外，它完全支持vue3語法，相比于vue3，它改進(jìn)了vue3的一些功能，Nuxt3有一些“約定”，你可以理解為是一些它已經(jīng)規(guī)定好的語法（必須這樣寫），雖然感覺起來是限制，但同時(shí)也是它便利的地方。本文簡(jiǎn)單提取總結(jié)Nuxt3和（對(duì)比vue）一些好用的功能，你會(huì)知道，Nuxt不僅是SSR渲染，并為它的設(shè)計(jì)鼓掌。
目前雖然最新還是beta版本，但估計(jì)2022結(jié)束左右就會(huì)出正式版本，已有bug問題也不大，推薦可以開始上手。

1. Nuxt 的獨(dú)特之處

1.1. 搜索引擎優(yōu)化

解決Vue構(gòu)建SPA項(xiàng)目（單頁面應(yīng)用程序）的帶來的不利于SEO問題。（什么是SEO？【在文末拓展：SEO】））

1.2. 新建項(xiàng)目簡(jiǎn)單，項(xiàng)目啟動(dòng)和重構(gòu)非?？?/h3>

Nuxt3 使用 Vue.js 作為視圖引擎。Nuxt3 中提供了所有 Vue 3 功能，所以我們創(chuàng)建的Nuxt項(xiàng)目其實(shí)也是vue3項(xiàng)目。而且很多工具Nuxt都幫我們選好了，我們可以簡(jiǎn)化搭建項(xiàng)目過程而專注于開發(fā)。比如，以下是部分Nuxt的選擇：

• JavaScript 框架：Vue.js
• vue項(xiàng)目構(gòu)建工具：Vite
• 熱模塊化開發(fā)：webpack 5
• 代碼編譯，用做 JavaScript 語法的轉(zhuǎn)譯器：esbuild（新時(shí)代的的性能構(gòu)建工具）
• 后端服務(wù)的http框架：h3（支持Serverless、Worker 和 Node，性能強(qiáng)大）
• 導(dǎo)航路由：vue-router
• 打包工具：nuxt/vite-builder 和 nuxt/webpack-builder

按照約定，提供了一些默認(rèn)目錄（需要自己創(chuàng)建，Nuxt會(huì)識(shí)別），以便于路徑訪問，后面介紹的時(shí)候會(huì)提到這些目錄。

assets              // 靜態(tài)資源
public              // 公共靜態(tài)資源，可公開獲得
pages               // 開發(fā)頁面
components          // 組件
layouts             // 項(xiàng)目布局
middleware			// 中間件
plugins				// 插件
server				// 后端

1.3. 靜態(tài)資源地址訪問

public目錄結(jié)構(gòu)如下：

-| public/
--| img/
----| cute.png

以靜態(tài)url的方式訪問，基于“約定”，直接寫 public 以下的路徑即可

<template>
  <img src="/img/cute.png" alt="卡哇伊" />
</template>

assets目錄結(jié)構(gòu)如下：

-| assets/
--| scss/
----| default.scss
--| ts/
----| index.ts
--| img/
----| cute.png

必須使用~/assets/路徑引用位于目錄中的文件：

<template>
  <img src="~/assets/img/cute.png" alt="卡哇伊" />
</template>

1.4. 路由使用（pages目錄，components目錄類似）

它是根據(jù)文件名從目錄中創(chuàng)建的每個(gè)組件生成路由。不用像以前vue那樣去router.js配置路由了，而且他有自己的路由傳參方式，類似的其他路由功能Nuxt都有對(duì)應(yīng)方式，更加清楚簡(jiǎn)單，也不會(huì)很容易搞錯(cuò)。

此文件系統(tǒng)路由使用命名約定來創(chuàng)建動(dòng)態(tài)和嵌套路由，簡(jiǎn)單舉例，像這樣創(chuàng)建頁面：

-| pages/
--| about.vue
--| posts/
----| [id].vue

訪問：app.vue

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

js方式響應(yīng)跳轉(zhuǎn)也可以用vue的 router.push()，不過Nuxt建議使用 await navigateTo()

<script setup>
import {} from "vue";
async function clickAction() {
  const router = useRouter();
  // router.push({ path: "/about" });
  await navigateTo({
    path: "/about",
    query: {
      name: "鳶一折紙",
      age: 18,
    },
  });
}
</script>

1.5. layouts布局

layouts布局很有用，類似于父組件，但不同，優(yōu)勢(shì)是簡(jiǎn)單繼承可重用，比如定義了一個(gè)默認(rèn)框架布局，設(shè)置在app.vue中，name在其之內(nèi)的路由都默認(rèn)繼承擁有此外部框架。當(dāng)然，可以選擇是否繼承和控制作用范圍。框架組件必須放到layouts目錄。

-| layouts/
---| default.vue
---| custom.vue

default.vue

<template>
  <div>
    Some default layout shared across all pages
    <slot />
  </div>
</template>
<script>
// This will work in both `<script setup>` and `<script>`
definePageMeta({
  layout: "custom",
});
</script>

app.vue

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>
<script setup>
// 不設(shè)置name屬性默認(rèn)使用名為 default.vue 的布局組件，可通過 name 或 :name 動(dòng)態(tài)修改默認(rèn)布局?？梢宰龅角袚Q主題的功能
const layout = "custom";
</script>

1.6. middleware中間件

Numxt有強(qiáng)大的中間件功能，很方便定制，使用也簡(jiǎn)單，可設(shè)置作用范圍，匿名、局部和全局。

當(dāng)然也可以設(shè)置路由中間件，類似于vue的導(dǎo)航守衛(wèi)，不過參數(shù)只有to和form，沒有next()參數(shù)，要想取消to的訪問可以直接 return abortNavigation() 終止導(dǎo)航，想要重定向的話可以使用 return navigateTo('/') 指定重定向路由。

-| middleware/
---| auth.ts

注意，中間件定義的路由方法名必須是 defineNuxtRouteMiddleware((to, from) =>{}) ,不可更改，這是約定，文件名隨意。

auth.ts

export default defineNuxtRouteMiddleware((to, from) => {
  console.log("要去那個(gè)頁面:"+to.path)
  console.log(to)
  console.log("來自那個(gè)頁面:"+from.path)
  console.log(from)
  if (to.params.id === '1') {
    return abortNavigation() // 終止導(dǎo)航
  }
  // return navigateTo('/xxx') // 重定向路由
})

xxx.vue 使用，引用這個(gè)路由中間件（也必須使用 definePageMeta({}) 方法）

<template>
	......
</template>
<script setup>
definePageMeta({
  middleware: ["auth"]
  // or middleware: 'auth'
})
</script>

1.7. plugins 插件

可引入第三方插件和自定義插件，后者不說前者一定用得到，同樣配置簡(jiǎn)單，幾乎是npm一下然后定義聲明一下就好了。

同樣約定，只有目錄頂層的plugins/文件（或任何子目錄中的index文件）將被注冊(cè)為插件。

-| plugins
 | - myPlugin.ts
 | - myOtherPlugin
 | --- supportingFile.ts
 | --- componentToRegister.vue
 | --- index.ts

其中，只有myPlugin.ts和myOtherPlugin/index.ts會(huì)被注冊(cè)。

server服務(wù)，提供后端功能

-| server/
--| api/
----| hello.ts
--| routes/
----| hello.ts

Nuxt 提供了后端服務(wù)器功能，性能好，但是功能性沒法和前后端分離比。

1.8. 關(guān)于其他

Nuxt3還有其他的細(xì)節(jié)主要注意，本文是總結(jié)性話語，感興趣可以了解官網(wǎng)：https://v3.nuxtjs.org/ 官方有很詳細(xì)的使用文檔，可以放心閱讀。
如果需要搭建一個(gè)項(xiàng)目試試手，遇到問題的話可以看《Nuxt3項(xiàng)目搭建（Nuxt3+element-plus+scss詳細(xì)步驟）》

2. 拓展：SEO

搜索引擎優(yōu)化，又稱為SEO，即Search Engine Optimization，它是一種通過分析搜索引擎的排名規(guī)律，對(duì)網(wǎng)站進(jìn)行符合規(guī)則的優(yōu)化的技術(shù)?？梢蕴岣呔W(wǎng)站在搜索引擎中的自然排名，吸引更多的用戶訪問網(wǎng)站，提高網(wǎng)站的訪問量?！驹谖恼麻_頭有介紹】

2.1. 搜索引擎如何收集網(wǎng)站信息進(jìn)行排名？

搜索引擎是通過專有的蜘蛛程序（爬蟲）來查找出每一個(gè)網(wǎng)頁上的HTML代碼，它會(huì)搜索網(wǎng)站的所有鏈接，分析收集網(wǎng)站的關(guān)鍵字以便搜索，通過自身不斷變化的算法進(jìn)行自然排名。蜘蛛程序需要訪問完所有的頁面，需要花費(fèi)很長(zhǎng)的時(shí)間，所以網(wǎng)站的導(dǎo)航需要便于蜘蛛程序進(jìn)行索引收錄。如果我們的網(wǎng)站設(shè)計(jì)的很方便蜘蛛進(jìn)行訪問，加快它的訪問速度。就有利于增加搜索引擎友好度。

2.2. 為什么OPA不利于SEO？

只要是單頁面的內(nèi)容都是動(dòng)態(tài)匹配路由進(jìn)行渲染的，而且很多內(nèi)容都需要在一個(gè)頁面顯示，那么就會(huì)有很多異步操作，蜘蛛程序不會(huì)去等你完全加載完的，想要對(duì)蜘蛛程序有好一點(diǎn)，就需要將更多的內(nèi)容轉(zhuǎn)換成靜態(tài)資源，更快的加載完成，SSR渲染就是這樣的原理，比如NUXT（使用SSR渲染）就可以幫你做到先從后臺(tái)將所有數(shù)據(jù)加載過來然后整個(gè)給你返到前端，SEO效果只會(huì)更好，首屏加載速度也會(huì)快很多。

2.3. 如何提高網(wǎng)站排名？

• 提高網(wǎng)站鏈接的訪問質(zhì)量和外網(wǎng)引用本網(wǎng)站鏈接的數(shù)量。
• 放置優(yōu)質(zhì)的內(nèi)容，比如博客網(wǎng)站的話，文章盡量保持原創(chuàng)度。
• 網(wǎng)站結(jié)構(gòu)要整潔簡(jiǎn)單，不要設(shè)計(jì)的過于復(fù)雜。

2.4. 關(guān)鍵字一般設(shè)置在哪？

• title 標(biāo)簽（重要）
• meta 標(biāo)簽（主要，里面有幾個(gè)重要的屬性，去了解一下吧）

2.5. 關(guān)鍵詞設(shè)置注意

• 要與網(wǎng)站主題相關(guān)，不要一味的追求熱門詞匯；
• 避免使用含義很廣的一般性詞匯，越明確越好，不要把小可愛當(dāng)笨蛋
• 根據(jù)產(chǎn)品的種類及特性，盡可能選取具體的詞
• 5至10個(gè)關(guān)鍵詞比較好
• 網(wǎng)頁內(nèi)出現(xiàn)頻率控制住，不要太多

到此這篇關(guān)于Nuxt3重點(diǎn)特性使用舉例記錄的文章就介紹到這了,更多相關(guān)Nuxt3使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論