小聊： 基于vue.js，用于SSR渲染解決SEO，但不僅限于此。不用于局限的眼光去看它，使用它會比原生vue3更加流暢舒適，性能也更高。在熟悉vue3的基礎(chǔ)上學(xué)習(xí)成不算高。另外，它完全支持vue3語法，相比于vue3，它改進了vue3的一些功能，Nuxt3有一些“約定”，你可以理解為是一些它已經(jīng)規(guī)定好的語法（必須這樣寫），雖然感覺起來是限制，但同時也是它便利的地方。本文簡單提取總結(jié)Nuxt3和（對比vue）一些好用的功能，你會知道，Nuxt不僅是SSR渲染，并為它的設(shè)計鼓掌。
目前雖然最新還是beta版本，但估計2022結(jié)束左右就會出正式版本，已有bug問題也不大，推薦可以開始上手。
目錄
-
1. Nuxt 的獨特之處
- 1.1. 搜索引擎優(yōu)化
- 1.2. 新建項目簡單，項目啟動和重構(gòu)非?？?/li>
- 1.3. 靜態(tài)資源地址訪問
- 1.4. 路由使用（pages目錄，components目錄類似）
- 1.5. layouts布局
- 1.6. middleware中間件
- 1.7. plugins 插件
- 1.8. 關(guān)于其他
-
2. 拓展：SEO
- 2.1. 搜索引擎如何收集網(wǎng)站信息進行排名？
- 2.2. 為什么OPA不利于SEO？
- 2.3. 如何提高網(wǎng)站排名？
- 2.4. 關(guān)鍵字一般設(shè)置在哪？
- 2.5. 關(guān)鍵詞設(shè)置注意
1. Nuxt 的獨特之處
1.1. 搜索引擎優(yōu)化
解決Vue構(gòu)建SPA項目（單頁面應(yīng)用程序）的帶來的不利于SEO問題。（什么是SEO？【戳這里去看下文內(nèi)容：拓展：SEO】））
1.2. 新建項目簡單，項目啟動和重構(gòu)非?？?
Nuxt3 使用 Vue.js 作為視圖引擎。Nuxt3 中提供了所有 Vue 3 功能，所以我們創(chuàng)建的Nuxt項目其實也是vue3項目。而且很多工具Nuxt都幫我們選好了，我們可以簡化搭建項目過程而專注于開發(fā)。比如，以下是部分Nuxt的選擇：
- JavaScript 框架：Vue.js
- vue項目構(gòu)建工具：Vite
- 熱模塊化開發(fā)：webpack 5
- 代碼編譯，用做 JavaScript 語法的轉(zhuǎn)譯器：esbuild（新時代的的性能構(gòu)建工具）
- 后端服務(wù)的http框架：h3（支持Serverless、Worker 和 Node，性能強大）
- 導(dǎo)航路由：vue-router
- 打包工具：nuxt/vite-builder 和 nuxt/webpack-builder
- 按照約定，提供了一些默認(rèn)目錄（需要自己創(chuàng)建，Nuxt會識別），以便于路徑訪問，后面介紹的時候會提到這些目錄。
assets // 靜態(tài)資源
public // 公共靜態(tài)資源，可公開獲得
pages // 開發(fā)頁面
components // 組件
layouts // 項目布局
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)建的每個組件生成路由。不用像以前vue那樣去router.js配置路由了，而且他有自己的路由傳參方式，類似的其他路由功能Nuxt都有對應(yīng)方式，更加清楚簡單，也不會很容易搞錯。
此文件系統(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方式響應(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)勢是簡單繼承可重用，比如定義了一個默認(rèn)框架布局，設(shè)置在app.vue中，name在其之內(nèi)的路由都默認(rèn)繼承擁有此外部框架。當(dāng)然，可以選擇是否繼承和控制作用范圍?？蚣芙M件必須放到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 動態(tài)修改默認(rèn)布局?？梢宰龅角袚Q主題的功能
const layout = "custom";
</script>
1.6. middleware中間件
Numxt有強大的中間件功能，很方便定制，使用也簡單，可設(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("要去那個頁面:"+to.path)
console.log(to)
console.log("來自那個頁面:"+from.path)
console.log(from)
if (to.params.id === '1') {
return abortNavigation() // 終止導(dǎo)航
}
// 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服務(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ì)的使用文檔，可以放心閱讀。
如果需要搭建一個項目試試手，遇到問題的話可以看《Nuxt3項目搭建（Nuxt3+element-plus+scss詳細(xì)步驟）》
2. 拓展：SEO
搜索引擎優(yōu)化，又稱為SEO，即Search Engine Optimization，它是一種通過分析搜索引擎的排名規(guī)律，對網(wǎng)站進行符合規(guī)則的優(yōu)化的技術(shù)?？梢蕴岣呔W(wǎng)站在搜索引擎中的自然排名，吸引更多的用戶訪問網(wǎng)站，提高網(wǎng)站的訪問量?！敬吝@里跳回去】
2.1. 搜索引擎如何收集網(wǎng)站信息進行排名？
搜索引擎是通過專有的蜘蛛程序（爬蟲）來查找出每一個網(wǎng)頁上的HTML代碼，它會搜索網(wǎng)站的所有鏈接，分析收集網(wǎng)站的關(guān)鍵字以便搜索，通過自身不斷變化的算法進行自然排名。蜘蛛程序需要訪問完所有的頁面，需要花費很長的時間，所以網(wǎng)站的導(dǎo)航需要便于蜘蛛程序進行索引收錄。如果我們的網(wǎng)站設(shè)計的很方便蜘蛛進行訪問，加快它的訪問速度。就有利于增加搜索引擎友好度。
2.2. 為什么OPA不利于SEO？
只要是單頁面的內(nèi)容都是動態(tài)匹配路由進行渲染的，而且很多內(nèi)容都需要在一個頁面顯示，那么就會有很多異步操作，蜘蛛程序不會去等你完全加載完的，想要對蜘蛛程序有好一點，就需要將更多的內(nèi)容轉(zhuǎn)換成靜態(tài)資源，更快的加載完成，SSR渲染就是這樣的原理，比如NUXT（使用SSR渲染）就可以幫你做到先從后臺將所有數(shù)據(jù)加載過來然后整個給你返到前端，SEO效果只會更好，首屏加載速度也會快很多。文章來源：http://www.zghlxwxcb.cn/news/detail-726060.html
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)要整潔簡單，不要設(shè)計的過于復(fù)雜。
2.4. 關(guān)鍵字一般設(shè)置在哪？
- title 標(biāo)簽（重要）
- meta 標(biāo)簽（主要，里面有幾個重要的屬性，去了解一下吧）
2.5. 關(guān)鍵詞設(shè)置注意
- 要與網(wǎng)站主題相關(guān)，不要一味的追求熱門詞匯；
- 避免使用含義很廣的一般性詞匯，越明確越好，不要把小可愛當(dāng)笨蛋
- 根據(jù)產(chǎn)品的種類及特性，盡可能選取具體的詞
- 5至10個關(guān)鍵詞比較好
- 網(wǎng)頁內(nèi)出現(xiàn)頻率控制住，不要太多
隨筆
文章來源地址http://www.zghlxwxcb.cn/news/detail-726060.html
到了這里，關(guān)于Nuxt3重點特性使用舉例記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
