SEO方案尝试--Nuxtjs项目基础配置

Nuxtjs 最新版 Nuxt3 项目配置

  • 安装nuxtjs 最新版 Nuxt3 参考官网安装
  • 安装插件
    • 安装ElementPlus
    • 页面怎么跳转,路由怎么实现
    • 404页面该怎么配置
    • 配置 网页的title

安装nuxtjs 最新版 Nuxt3 参考官网安装

安装插件

安装ElementPlus

  1. 安装 Element Plus 和图标库

    # 首先,使用以下命令安装 Element Plus 和它的图标库:pnpm install element-plus pnpm install @element-plus/icons-vue
    
  2. 安装 Nuxt Element Plus 模块

    	pnpm i @element-plus/nuxt -D
    
  3. 配置 Nuxt 项目

     在 nuxt.config.ts 文件中进行配置,添加 Element Plus 模块和 CSS 样式:
    
    	import { defineNuxtConfig } from 'nuxt3'export default defineNuxtConfig({devtools: { enabled: true },modules: ['@element-plus/nuxt']})
    

页面怎么跳转,路由怎么实现

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
这是官方原话,也就是说,你不用像传统的vue项目那样,创建router.js 这个文件了。相反,需要注意根目录下这个pages的文件结构。因为Nuxt是根据pages的目录结构自动生成路由文件的。

注意, pages 需要放在项目根目录!!!

在这里插入图片描述

  1. app.vue 这个文件里可以简单放一个 <NuxtPage> 标签,这个标签是nuxt3内置的标签,相当于vue3中的router-view,就是通过路由去渲染的组件内容。

    <template><div><NuxtPage></NuxtPage></div>
    </template>
  2. 路由传值
    文件名格式按照约定写就可,detail-[参数].vue
    接受的话,在该页面中通过以下代码获取:

    <template><div>artical{{  $route.params.id  }}</div>
    </template>	
    
  3. 路由验证

    • 通过在页面(page)中的definePageMeta中的validate属性来实现路由验证。
    • validate属性以route为参数。返回的boolean值就决定了当前路由是否会在此页面中渲染显示。
    • 如果你返回false,并且也没有其它路由匹配规则与之相匹配的话,就会导致404的错误。
    • 你也可以直接返回一个包含了statusCode/statusMessage的对象,来立即返回一个错误(这种情况下,其它路由匹配规则就不会判断了) 。

    原文:
    The validate property accepts the route as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return false, and another match can’t be found, this will cause a 404 error. You can also directly return an object with statusCode/statusMessage to respond immediately with an error (other matches will not be checked).

    	<template><div>{{  $route.params.id  }}</div></template>			<script setup>definePageMeta({validate: async (route) => {const nuxtApp = useNuxtApp()console.log(123, route)return /^\d+$/.test(route.params.id)}})</script>
    

routeing 配置原文地址 https://nuxt.com/docs/getting-started/routing

404页面该怎么配置

对于 Nuxt 3,您需要将其保存在根文件夹中的 app.vue 文件旁边。正如文档所说:

You can customize this error page by adding ~/error.vue in the source directory of your application, alongside app.vue. This page has a single prop - error which contains an error for you to handle.

也就是说在项目根目录下写个 error.vue 页面,页面找不到的时候将重定向至error页面。

配置 网页的title

  1. 全体配置(nuxt.config.ts 文件中进行配置)
// https://nuxt.com/docs/api/configuration/nuxt-configexport default defineNuxtConfig({app: {head: {title: '初尝试Nuxt3',charset: 'utf-8',viewport: 'width=device-width, initial-scale=1',}},devtools: { enabled: true },modules: ['@element-plus/nuxt']})
  1. 具体某页面配置
	<script setup> useHead({title: 'artical页面',meta: [{ name: 'description', content: 'My amazing site.' }],bodyAttrs: {class: 'test'},script: [ { innerHTML: 'console.log(\'Hello world\')' } ]})//...</script>

官网还有很多 。。。
https://nuxt.com/docs/getting-started/seo-meta

useSeoMetauseServerSeoMeta (这个知识点目前还没看明白…)

The useSeoMeta and useServerSeoMeta composables let you define your site’s SEO meta tags as a flat object with full TypeScript support.

这句话的意思是,useSeoMetauseServerSeoMeta 这两个组合式函数能够让你将网站的 SEO 元标记定义为一个扁平的对象,并且提供完整的 TypeScript 支持。

也就是说,通过使用这两个函数,你可以以更简洁和直观的方式定义和管理你网站的 SEO 元标记。你只需要将 SEO 元标记的信息放入一个普通的 JavaScript 对象中,而不需要复杂的数据结构或类。同时,这些函数还能够提供 TypeScript 的类型检查,确保你在设置 SEO 元标记时的类型安全性。

这样的设计使得在应用程序中操作和传递 SEO 元标记变得更加方便和一致。你可以在服务器端使用 useServerSeoMeta 来设置初始的 SEO 元标记,然后在客户端使用 useSeoMeta 来响应式地获取和更新这些 SEO 元标记。

总之,通过这两个组合式函数,你可以以一种直观、简洁和类型安全的方式处理网站的 SEO 元标记,从而提升你网站的搜索引擎优化效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/143650.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TikTok的伦理挑战:虚拟世界与现实世界的交汇

在数字时代&#xff0c;社交媒体平台已经不再只是一个信息传播的工具&#xff0c;它已经深刻地改变了我们的社交行为、价值观和伦理观。 而在这一领域的佼佼者之一&#xff0c;TikTok&#xff0c;正面临着伦理挑战&#xff0c;这是虚拟世界与现实世界交汇的产物。 本文将深入…

从技能需求到就业前景,了解前端和后端开发的优缺点和个人选择

文章目录 每日一句正能量一、引言前端开发后端开发 二、两者的对比分析三、技能转换和跨领域工作四&#xff1a;介绍全栈开发后记 每日一句正能量 命运决定的不是你的人生&#xff0c;能决定你人生的只有自己。 一、引言 前端和后端是Web开发中两个不可或缺的领域。前端开发主…

软考高级之系统架构师之计算机基础

概述 今天是9月28日&#xff0c;距离软考高级只剩37天&#xff0c;加油&#xff01; 概念 三种周期&#xff1a; Clock Cycle&#xff1a;时钟周期&#xff0c;CPU主频&#xff0c;又称为时钟频率&#xff0c;时钟周期是时钟频率的倒数Instruction Cycle&#xff1a;指令周…

idea中maven项目打包成jar,报错没有主清单属性解决方法

使用idea自带的打包可能会出现一下问题 在pom.xml中引入下面的依赖&#xff0c;即可解决 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions&…

【算法】排序——插入排序及希尔排序

目录 前言 一、排序的概念及其应用 1.1排序的概念 1.2排序的应用 1.3常见的排序算法 二、插入排序的实现 基于插入排序的优化——希尔排序&#xff08;缩小增量排序 个人主页 代码仓库 C语言专栏 初阶数据结构专栏 Linux专栏 LeetCode刷题 算法专栏 前言 这…

七、装饰者模式

这里写自定义目录标题 1、项目需求2、解决方案13、解决方案24、装饰者模式定义5、装饰者模式原理6、装饰者模式解决上述需求7、装饰者模式在jdk应用的源码分析 1、项目需求 2、解决方案1 3、解决方案2 可以控制类的数量&#xff0c;不至于造成很多的类在增加或者删除调料种类…

力扣-349.两个数组的交集

Idea 使用两个哈希集合&#xff0c;其中一个用来存储第一个数组&#xff0c;第二个来存储两个数组的交集&#xff0c;因为集合自带去重功能&#xff0c;因此最后用数组来接收就好了 AC Code class Solution { public:vector<int> intersection(vector<int>& n…

十大排序——2.归并排序

这篇文章我们来讲一下十大排序中的归并排序。 目录 1.概述 2.代码实现 3.总结 1.概述 归并排序主要是运用了归并的思想。 下面具体的来讲一下归并排序的整个流程和思想。 首先&#xff0c;给你一个无序的数组&#xff0c;要求你对它进行归并排序。归并排序首先需要将这个…

Qt扩展-KDDockWidgets 的使用

KDDockWidgets 的使用 一、概述二、原理说明三、代码实例1. 项目简述2. 布局源码 一、概述 KDDockWidgets 的使用相对比较简单&#xff0c;建议直接参考 其提供的例子。 二、原理说明 在这种多窗口布局显示的使用最常用的就是这两个类&#xff0c; 也就是 MainWindow 和 Doc…

初识Java 10-1 集合

目录 泛型和类型安全的集合 基本概念 添加一组元素 打印集合 List Iterator&#xff08;迭代器&#xff09; 本笔记参考自&#xff1a; 《On Java 中文版》 在进行程序设计时我们会发现&#xff0c;程序总是会根据某些在运行时才能知道的条件来创建新的对象。这意味着&am…

C#中实现单元测试的示例流程_MSTest测试项目

一、单元测试简介 1.1、单元测试简介 在《单元测试艺术》一书中对于单元测试的定义是&#xff1a;【一个单元测试是一段代码&#xff0c;这段代码调用一个工作单元&#xff08;指&#xff1a;调用软件中的一个方法&#xff0c;这个方法执行过程中所发生的所有行为以及最后产生…

Day05-循环高级和数组

循环高级 1.无限循环 概念&#xff1a; 又叫死循环。循环一直停不下来。 for格式&#xff1a; for(;;){System.out.println("循环执行一直在打印内容"); } 解释&#xff1a; 初始化语句可以空着不写&#xff0c;表示循环之前不定义任何的控制变量。 条件判断…

maven中relativepath标签的含义

一 relative标签的含义 1.1 作用 这个<parent>下面的<relativePath>属性&#xff1a;parent的pom文件的路径。 relativePath 的作用是为了找到父级工程的pom.xml;因为子工程需要继承父工程的pom.xml文件中的内容。然后relativePath 标签内的值使用相对路径定位…

ChatGPT 在机器学习中的应用

办公室里一个机器人坐在人类旁边&#xff0c;Artstation 上的流行趋势&#xff0c;美丽的色彩&#xff0c;4k&#xff0c;充满活力&#xff0c;蓝色和黄色&#xff0c; DreamStudio出品 一、介绍 大家都知道ChatGPT。它在解释机器学习和深度学习概念方面也非常高效&#xff0c;…

matplotlib绘图实现中文宋体的两种方法(亲测)

方法一&#xff1a;这种方法我没有测试。 第一步 找宋体字体 &#xff08;win11系统&#xff09; 2.matplotlib字体目录&#xff0c;如果不知道的话&#xff0c;可以通过以下代码查询&#xff1a; matplotlib.matplotlib_fname() 如果你是Anaconda3 安装的matplotlib&#x…

uni-app打包iOS ipa文件后不上架App store为用户提供下载解决过程记录

写在前面&#xff0c;itms-services协议是什么 itms-services协议是苹果提供的一种让iOS应用在用户设备上无线安装或升级的协议。 具体来说: itms-services表示iOS应用无线安装服务的URL方案,格式为:itms-services://?actiondownload-manifest&urlMANIFEST_URL其中MANIF…

Apache Beam 2.50.0发布,该版本包括改进功能和新功能

导读我们很高兴向您介绍 Beam 的新版本 2.50.0。该版本包括改进功能和新功能。请查看此版本的下载页面。 亮点 Spark 3.2.2 被用作 Spark 运行程序的默认版本&#xff08;#23804&#xff09;。Go SDK 新增默认本地运行程序&#xff0c;名为 Prism&#xff08;#24789&#xff0…

基于web的学校二手书城系统/二手书交易系统

摘 要 本文论述了学校二手书城系统的设计和实现&#xff0c;该网站从实际运用的角度出发&#xff0c;运用了计算机网站设计、数据库等相关知识&#xff0c;网络和Mysql数据库设计来实现的&#xff0c;网站主要包括用户注册、用户登录、浏览图书、搜索图书、查看图书并进行购买…

大数据Flink(八十五):Window TVF 支持多维数据分析

文章目录 Window TVF 支持多维数据分析 一、Grouping Sets 二、​​​​​​​Rollup

【数据库】存储引擎InnoDB、MyISAM、关系型数据库和非关系型数据库、如何执行一条SQL等重点知识汇总

目录 存储引擎InnoDB、MyISAM的适用场景 关系型和非关系型数据库的区别 MySQL如何执行一条SQL的 存储引擎InnoDB、MyISAM的适用场景 InnoDB 是 MySQL 默认的事务型存储引擎&#xff0c;只有在需要它不支持的特性时&#xff0c;才考虑使用其它存储引擎。实现了四个标准的隔…