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

1. Nuxt 的獨特之處

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

解決Vue構建SPA項目（單頁面應用程序）的帶來的不利于SEO問題。（什么是SEO？【在文末拓展：SEO】））

1.2. 新建項目簡單，項目啟動和重構非?？?/h3>

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

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

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

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

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

public目錄結構如下：

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

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

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

assets目錄結構如下：

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

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

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

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

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

此文件系統(tǒng)路由使用命名約定來創(chuàng)建動態(tài)和嵌套路由，簡單舉例，像這樣創(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方式響應跳轉也可以用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)勢是簡單繼承可重用，比如定義了一個默認框架布局，設置在app.vue中，name在其之內的路由都默認繼承擁有此外部框架。當然，可以選擇是否繼承和控制作用范圍。框架組件必須放到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>
// 不設置name屬性默認使用名為 default.vue 的布局組件，可通過 name 或 :name 動態(tài)修改默認布局?？梢宰龅角袚Q主題的功能
const layout = "custom";
</script>

1.6. middleware中間件

Numxt有強大的中間件功能，很方便定制，使用也簡單，可設置作用范圍，匿名、局部和全局。

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

-| middleware/
---| auth.ts

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

auth.ts

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

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

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

1.7. plugins 插件

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

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

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

其中，只有myPlugin.ts和myOtherPlugin/index.ts會被注冊。

server服務，提供后端功能

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

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

1.8. 關于其他

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

2. 拓展：SEO

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

2.1. 搜索引擎如何收集網站信息進行排名？

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

2.2. 為什么OPA不利于SEO？

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

2.3. 如何提高網站排名？

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

2.4. 關鍵字一般設置在哪？

• title 標簽（重要）
• meta 標簽（主要，里面有幾個重要的屬性，去了解一下吧）

2.5. 關鍵詞設置注意

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

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

最新評論