Nuxtjs3教程

news2024/7/3 10:08:41

起步

官方文档

官方目录结构

安装

npx nuxi@latest init <project-name>

后面跟着提示走就行

最后yarn run dev 启动项目访问localhost:3000即可

路由组件

app.vue为项目根组件

<nuxt-page />为路由显示入口

将app.vue更改内容如下

<template>
  <div>
    <h1>根组件页面</h1>
    <nuxt-page/>
  </div>
</template>

**根目录下创建pages/about.vue组件,对应的路由地址就是/about,内容如下

<template>
    <div class="">
        我是about.vue组件
    </div>
</template>

访问localhost:3000此时会404,因为这时候的这个路径会去找pages/index.vue了,找不到就404,访问localhost:3000/about效果如下:

在这里插入图片描述

父子路由(页面嵌套,二级路由显示)

父级页面

在pages下创建roles.vue 对应路由地址为/roles 需要重启

<template>
  <div>
    <h1>父页面</h1>
    <!-- 渲染子组件 -->
    <nuxt-page/>  
  </div>
</template>

子级页面

在pages下创建roles文件夹里面存放子级页面

注意:子级页面文件夹名称和父级文件名一一对应

about.vue
myInio.vue
setting.vue

<template>
    我是about页面
</template>

<template>
    我是myInIo页面
</template>

<template>
    我是setting页面
</template>

分别访问

localhost:3000/roles
localhost:3000/roles/about
localhost:3000/roles/myInIo
localhost:3000/roles/setting

效果图

在这里插入图片描述

导航跳转

基础演示

在app.vue根组件进行演示跳转了,内容如下

<template>
  <div>
    <h1>根组件页面</h1>
    <nuxt-link to="/">首页</nuxt-link>
    <nuxt-link to="/about">about页面</nuxt-link>
    <nuxt-link to="/roles/setting">设置页面</nuxt-link>
    <nuxt-link to="/course/22">课程页面</nuxt-link>
    <nuxt-page />
  </div>
</template>

在pages下新建course目录,新建[id].vue文件,这里用的就是动态路由的形式,id值为动态的

// route.params.id这个就是id的值,也就是文件名
<template>课程id为{
   {
    route.params.id }}</template>

<script setup>
import {
    useRoute } from "vue-router";

const route = useRoute();
console.log(route);
</script>

组件使用

在pages下面新建father.vue和son.vue

子组件son.vue

<template>
    <div>
        我是子组件
    </div>
</template>

父组件father.vue

<template>
    我是父组件
    <SON></SON>
</template>

<script setup>
import SON from './son.vue'  // 引入子组件
</script>

全局组件

在根目录下创建components文件夹,新建aaa.vue
在根目录下创建components/user文件夹,新建bbb.vue

<template>
    我是全局组件
</template>

全局组件可以在项目任意地方直接使用,无需手动导入

如下使用示例
任意页面直接用即可

<template>
    <aaa></aaa>
    <user-bbb></user-bbb>
    // <UserBbb></UserBbb>  这样驼峰命名也可以
</template>

布局处理

在根目录components下面新建AppHearder.vue组件,内容如下:

<template>
    <div>
  	  头部布局
    </div>
</template>

在根目录components下面新建AppAside.vue组件,内容如下:

<template>
    <div>
        侧边栏组件
    </div>
</template>

在根目录components下面新建AppFooter.vue组件,内容如下:

<template>
    <div>
        底部组件
    </div>
</template>

在根组件app.vue作为整体布局组件,内容改造如下

<template>
  <AppHearder />
  <AppAside />
  <!-- 在这里nuxt-page写主题内容 -->
  <nuxt-page />
  <AppFooter />
</template>

SEO配置

全局配置

在nuxt.config.ts里面新增app节点,内容如下:

export default defineNuxtConfig({
   
  ...
  app: {
   
    head: {
   
      title: "网页标题",
      meta: [
        {
   
          name: "keywords",
          content: "关键词1,关键词2",
        },
        {
   
          name: "description",
          content: "描述",
        },
      ],
      charset: "utf-8",
      viewport: "width=device-width, initial-scale=1",
    },
  },
});

这样就将seo相关的信息放到网页上了

在这里插入图片描述
关于app节点更详细的参数如下

app: {
   
  head: {
   
    meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
      {
    name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    script: [
      // <script src="https://myawesome-lib.js"></script>
      {
    src: 'https://awesome-lib.js' }
    ],