文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Nuxt3重点特性使用举例问题记录

2022-12-22 15:00

关注

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

1. Nuxt 的独特之处

1.1. 搜索引擎优化

解决Vue构建SPA项目(单页面应用程序)的带来的不利于SEO问题。(什么是SEO?【在文末拓展:SEO】))

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

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

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

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

1.3. 静态资源地址访问

public目录结构如下:

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

以静态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目录类似)

它是根据文件名从目录中创建的每个组件生成路由。不用像以前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()

<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布局很有用,类似于父组件,但不同,优势是简单继承可重用,比如定义了一个默认框架布局,设置在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.tsmyOtherPlugin/index.ts会被注册。

server服务,提供后端功能

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

Nuxt 提供了后端服务器功能,性能好,但是功能性没法和前后端分离比。

1.8. 关于其他

Nuxt3还有其他的细节主要注意,本文是总结性话语,感兴趣可以了解官网:https://v3.nuxtjs.org/ 官方有很详细的使用文档,可以放心阅读。
如果需要搭建一个项目试试手,遇到问题的话可以看《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. 关键字一般设置在哪?

2.5. 关键词设置注意

到此这篇关于Nuxt3重点特性使用举例记录的文章就介绍到这了,更多相关Nuxt3使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯