Nuxt3重点特性使用举例记录

深藏阁楼爱情的钟 2024-04-24 14:45 75阅读 0赞

> **小聊：** 基于vue.js，用于SSR渲染解决SEO，但不仅限于此。不用于局限的眼光去看它，使用它会比原生vue3更加流畅舒适，性能也更高。在熟悉vue3的基础上学习成不算高。另外，它完全支持vue3语法，相比于vue3，它改进了vue3的一些功能，Nuxt3有一些“约定”，你可以理解为是一些它已经规定好的语法（必须这样写），虽然感觉起来是限制，但同时也是它便利的地方。本文简单提取总结Nuxt3和（对比vue）一些好用的功能，你会知道，Nuxt不仅是SSR渲染，并为它的设计鼓掌。  
> 目前虽然最新还是beta版本，但估计2022结束左右就会出正式版本，已有bug问题也不大，推荐可以开始上手。

#### 目录 ####

*  1. Nuxt 的独特之处
    
     *  1.1. 搜索引擎优化
     *  1.2. 新建项目简单，项目启动和重构非常快
     *  1.3. 静态资源地址访问
     *  1.4. 路由使用（pages目录，components目录类似）
     *  1.5. layouts布局
     *  1.6. middleware中间件
     *  1.7. plugins 插件
     *  1.8. 关于其他
 *  2. 拓展：SEO
    
     *  2.1. 搜索引擎如何收集网站信息进行排名？
     *  2.2. 为什么OPA不利于SEO？
     *  2.3. 如何提高网站排名？
     *  2.4. 关键字一般设置在哪？
     *  2.5. 关键词设置注意

## 1. Nuxt 的独特之处 ##

#### 1.1. 搜索引擎优化 ####

解决Vue构建SPA项目（单页面应用程序）的带来的不利于SEO问题。（什么是SEO？【戳这里去看下文内容：拓展：SEO】））

#### 1.2. 新建项目简单，项目启动和重构非常快 ####

Nuxt3 使用 Vue.js 作为视图引擎。Nuxt3 中提供了所有 Vue 3 功能，所以我们创建的Nuxt项目其实也是vue3项目。而且很多工具Nuxt都帮我们选好了，我们可以简化搭建项目过程而专注于开发。比如，以下是部分Nuxt的选择：

>  *  JavaScript 框架：Vue.js
>  *  vue项目构建工具：Vite
>  *  热模块化开发：webpack 5
>  *  代码编译，用做 JavaScript 语法的转译器：esbuild（新时代的的性能构建工具）
>  *  后端服务的http框架：h3（支持Serverless、Worker 和 Node，性能强大）
>  *  导航路由：vue-router
>  *  打包工具：nuxt/vite-builder 和 nuxt/webpack-builder

*  按照约定，提供了一些默认目录（需要自己创建，Nuxt会识别），以便于路径访问，后面介绍的时候会提到这些目录。

assets              // 静态资源
    public              // 公共静态资源，可公开获得
    pages               // 开发页面
    components          // 组件
    layouts             // 项目布局
    middleware			// 中间件
    plugins				// 插件
    server				// 后端

#### 1.3. 静态资源地址访问 ####

public目录结构如下：

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

以静态url的方式访问，基于“约定”，直接写 **public** 以下的路径即可

assets目录结构如下：

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

必须使用`~/assets/`路径引用位于目录中的文件：

#### 1.4. 路由使用（pages目录，components目录类似） ####

它是根据文件名从目录中创建的每个组件生成路由。不用像以前vue那样去router.js配置路由了，而且他有自己的路由传参方式，类似的其他路由功能Nuxt都有对应方式，更加清楚简单，也不会很容易搞错。

此文件系统路由使用命名约定来创建动态和嵌套路由，简单举例，像这样创建页面：

-| 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()`

#### 1.5. layouts布局 ####

layouts布局很有用，类似于父组件，但不同，优势是简单继承可重用，比如定义了一个默认框架布局，设置在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 动态修改默认布局。可以做到切换主题的功能
    const layout = "custom";
    </script>

#### 1.6. middleware中间件 ####

Numxt有强大的中间件功能，很方便定制，使用也简单，可设置作用范围，匿名、局部和全局。

当然也可以设置路由中间件，类似于vue的导航守卫，不过参数只有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还有其他的细节主要注意，本文是总结性话语，感兴趣可以了解官网：https://v3.nuxtjs.org/ 官方有很详细的使用文档，可以放心阅读。  
如果需要搭建一个项目试试手，遇到问题的话可以看[《Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）》][Nuxt3_Nuxt3_element-plus_scss]

## 2. 拓展：SEO ##

搜索引擎优化，又称为SEO，即Search Engine Optimization，它是一种通过分析搜索引擎的排名规律，对网站进行符合规则的优化的技术。可以提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量。【戳这里跳回去】

#### 2.1. 搜索引擎如何收集网站信息进行排名？ ####

搜索引擎是通过专有的蜘蛛程序（爬虫）来查找出每一个网页上的HTML代码，它会搜索网站的所有链接，分析收集网站的关键字以便搜索，通过自身不断变化的算法进行自然排名。蜘蛛程序需要访问完所有的页面，需要花费很长的时间，所以网站的导航需要便于蜘蛛程序进行索引收录。如果我们的网站设计的很方便蜘蛛进行访问，加快它的访问速度。就有利于增加搜索引擎友好度。

#### 2.2. 为什么OPA不利于SEO？ ####

只要是单页面的内容都是动态匹配路由进行渲染的，而且很多内容都需要在一个页面显示，那么就会有很多异步操作，蜘蛛程序不会去等你完全加载完的，想要对蜘蛛程序有好一点，就需要将更多的内容转换成静态资源，更快的加载完成，SSR渲染就是这样的原理，比如NUXT（使用SSR渲染）就可以帮你做到先从后台将所有数据加载过来然后整个给你返到前端，SEO效果只会更好，首屏加载速度也会快很多。

#### 2.3. 如何提高网站排名？ ####

*  提高网站链接的访问质量和外网引用本网站链接的数量。
 *  放置优质的内容，比如博客网站的话，文章尽量保持原创度。
 *  网站结构要整洁简单，不要设计的过于复杂。

#### 2.4. 关键字一般设置在哪？ ####

*  title 标签（重要）
 *  meta 标签（主要，里面有几个重要的属性，去了解一下吧）

#### 2.5. 关键词设置注意 ####

*  要与网站主题相关，不要一味的追求热门词汇；
 *  避免使用含义很广的一般性词汇，越明确越好，不要把小可爱当笨蛋
 *  根据产品的种类及特性，尽可能选取具体的词
 *  5至10个关键词比较好
 *  网页内出现频率控制住，不要太多

#### 随笔 ####

![在这里插入图片描述][60a1f739e2e34f388874e5a789355216.jpeg_pic_center]

[Nuxt3_Nuxt3_element-plus_scss]: https://blog.csdn.net/m0_48489737/article/details/127325786
[60a1f739e2e34f388874e5a789355216.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/ab18d75b9ae640f480985a15dcc36265.jpeg