Nuxt的基础使用

# Nuxt 的基础使用

Nuxt3 是一个基于 Vue 的服务端渲染框架，支持 vue3、TS

# 通过 nuxt 搭建项目

安装：

npx nuxi init nuxt-app

下载依赖：

npm i

版本约定：

node 版本: node 版本需要在 15 以上

# 项目文件介绍

官网地址：https://v3.nuxtjs.org

.gitignore  // 忽略不需要git维护的文件
.nuxt  	// 自动生成的目录，其他文件夹的引入配置 // 兼容部分依赖包
.npmrc  // 兼容部分依赖包
public  // 放置静态图片
nuxt.config.ts // nuxt配置文件
LICENSE  // gitee认证文件
app.vue  // ⻚面入口文件
components  // 组件文件夹
layouts  // ⻚面的布局
pages // ⻚面文件夹

1
2
3
4
5
6
7
8
9
10

# ⻚面入口和⻚面布局

pages 文件夹里必须有 index.vue，否则删除 pages 文件夹

# ⻚面入口

// app.vue
<template>
  <NuxtPage />
</template>

// ⻚面的切换配置组价，类似
<router-view />
// 直接在pages文件夹定义⻚面文件，就可以实现切换

1
2
3
4
5
6
7
8

# ⻚面布局

// layouts/default.vue
<template>
  <div>
    头部
    <slot />
    底部
  </div>
</template>

// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 公共组件和路由的使用

简介: nuxt3公共组件和路由的使用

# 组件定义和使用

不需要引入直接使用
多层级组件

// 创建 
--|components 
----|Banner 
------|Child.vue
 // 引用
<BannerChild />

1
2
3
4
5
6

# 路由

# 跳转

声明式跳转

<nuxt-link to="/"></nuxt-link>

// 传参
<nuxt-link to="/about?data='我是首⻚的数据'"></nuxt-link>

// 接受路由的参数 useRoute().query.data

1
2
3
4
5
6

导航式跳转

navigateTo('/');

// 传参
navigateTo("/?data='我是关于的数据'");
navigateTo({ path: '/', query: { data: '我是关于的数据' } });

1
2
3
4
5

# 嵌套路由

// 创建 
|--pages 
|----about/ 
|------personal.vue 
|----about.vue // /about.vue

<NuxtPage />

// /index.vue
<nuxt-link to="/about/personal">去关于⻚面</nuxt-link>

1
2
3
4
5
6
7
8
9
10

# useFetch 的用法

<script setup>
import { ref } from 'vue';
const data = ref('');
const resData = await useFetch('http://127.0.0.1:8081/test');
data.value = resData.data.value.data;
</script>
<template>
  <div>
    {{ data }}
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11

// get
useFetch('url', {
  method: 'get',
  params: { id: 1 }
});

// post
useFetch('url', {
  method: 'post',
  body: { id: 1 }
});

1
2
3
4
5
6
7
8
9
10
11

# useHead

通过 useHead 设置 SEO TDK

useHead({
  title: '小滴课堂',
  meta: [
    { name: 'description', content: '小滴课堂的网站' },
    { name: 'keywords', content: 'vue3教程,微服务教程,nuxt3教程' }
  ]
});

1
2
3
4
5
6
7

编辑

上次更新: 2024/07/22, 04:56:33

← 后台管理 Linux安装环境→