Nuxt教程

1、初始化项目

如初始化项目失败请在WIndows的hosts文件中添加如下代码

185.199.108.133 raw.githubusercontent.com

2、认识项目文件

.nuxt：运行项目生成的文件

nuxt.config.ts：配置文件

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // 是否开启SSR服务端渲染，默认为true
  ssr:true,
  devtools: { enabled: true }
})

Nuxt自带是基于文件的路由系统，无需安装vue-router

3、SEO优化

通过设置网页 title 和 description 等SEO优化信息，由服务端渲染，可提高网页在搜索引擎页面中的排名和可见性

app.vue

<template>
  <NuxtLink to="/">首页</NuxtLink>
  <NuxtLink to="/video">视频</NuxtLink>
  <NuxtPage />
</template>
<script setup lang="ts">
useSeoMeta({
  // 网站标题
  title: "哔哩哔哩 (゜-゜)つロ 干杯~-bilibili",
  // 网站描述
  description: "哔哩哔哩(bilibili.com)是国内知名的视频弹幕网站,这里有及时的动漫新番,活跃的ACG氛围,有创意的Up主。大家可以在这里找到许多欢乐。",
  // 关键字
  keywords:"bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,二次元,游戏视频,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid,日本动漫,国产动漫,手机游戏,网络游戏,电子竞技,ACG燃曲,ACG神曲,追新番,新番动漫,新番吐槽,巡音,镜音双子,千本樱,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原创曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,动漫歌曲,日本动漫音乐,宫崎骏动漫音乐,动漫音乐推荐,燃系mad,治愈系mad,MAD MOVIE,MAD高燃"
})
</script>

Nuxt教程