nuxt3前端开发教程

源码请移步：springboot+vue3+nuxt3+ts+minio开发的dsblog3.0前后端博客 - java大师 (javaman.cn)

目录结构如下：

一、nuxt3配置文件

这段代码是一个Nuxt.js的配置文件，用于定义Nuxt.js项目的配置选项。Nuxt.js是一个基于Vue.js的通用应用框架，它简化了Vue.js项目的创建和开发过程。接下来我会详细解释代码中的每一部分：

定义配置

arduino 复制代码

 export default defineNuxtConfig({  
   // ... 配置选项  
 });

这里使用了defineNuxtConfig函数来定义一个Nuxt.js的配置对象，并将其导出。

模块配置

arduino 复制代码

 modules: [  
   '@element-plus/nuxt',  
 ],

在modules数组中，引入了@element-plus/nuxt模块。Element Plus是一个基于Vue 3的桌面端UI组件库，这里引入的模块是Element Plus为Nuxt.js提供的集成插件。

开发者工具

yaml 复制代码

 devtools: { enabled: true },

这行代码启用了Nuxt.js的开发者工具，这些工具可以帮助开发者在开发过程中调试和诊断问题。

Element Plus配置

css 复制代码

 elementPlus: {  
   icon: "ElIcon",  
 },

这里配置了Element Plus的图标组件前缀为ElIcon。

CSS样式引入

arduino 复制代码

 css: [  
   'element-plus/dist/index.css',  
 ],

在css数组中，引入了Element Plus的CSS样式文件。

插件配置

perl 复制代码

 plugins: [  
   '~/plugins/element-plus.client.ts',  
   // '~/plugins/prism.ts'  
 ],

在plugins数组中，引入了一个自定义的插件文件element-plus.client.ts。这个文件可能是用于注册或配置Element Plus组件的。注意，prism.ts插件被注释掉了，所以不会被加载。

Vite配置

css 复制代码

 vite: {  
   css: {  
     preprocessorOptions: {  
       scss: {  
         additionalData: '@use "@/assets/styles/default.scss" as *;'  
       }  
     }  
   },  
   server: {  
     proxy: {  
       '/api': {  
         target: 'http://localhost:8989',  
         changeOrigin: true,  
         rewrite: (path) => path.replace(/^/api/, '')  
       }  
     }  
   }  
 }

这部分是Vite的配置。Vite是Nuxt.js的默认构建工具和模块服务器。

css.preprocessorOptions.scss.additionalData：为SCSS预处理器添加了一些额外的数据，这里引入了一个名为default.scss的全局样式文件。
server.proxy：配置了代理规则。这里定义了一个代理路径/api，它将所有以/api开头的请求代理到http://localhost:8989。同时，changeOrigin设置为true，表示开启代理并修改请求的Host头部，这有助于解决跨域问题。rewrite函数用于重写请求路径，移除了/api前缀。

总的来说，这个配置文件主要是用于配置Nuxt.js项目的模块、样式、插件和代理规则等。其中特别引入了Element Plus组件库，并配置了其相关选项。同时，通过Vite的代理功能，解决了开发过程中的跨域问题。

这段代码是一个Nuxt.js插件的定义，专门用于集成Element Plus组件库。让我们逐步解释每一部分的作用：

二、引入ElementPlus

导入Element Plus及其样式

javascript 复制代码

 import ElementPlus from 'element-plus'  
 import 'element-plus/theme-chalk/index.css';

这两行代码首先导入了Element Plus组件库和它的默认样式（Chalk主题）。Element Plus是一个基于Vue 3的UI组件库，提供了丰富的组件和工具，可以简化Vue应用的界面开发。

定义Nuxt插件

javascript 复制代码

 export default defineNuxtPlugin((nuxtApp) => {  
   // ...  
 })

defineNuxtPlugin是一个Nuxt.js的函数，用于定义Nuxt插件。Nuxt插件允许你在Nuxt应用的初始化阶段执行一些逻辑，比如注册全局组件、添加全局混入（mixins）、安装Vue插件等。

安装Element Plus插件

php 复制代码

 nuxtApp.vueApp.use(ElementPlus)

在插件的函数体中，我们调用了nuxtApp.vueApp.use方法来安装Element Plus插件。这里，nuxtApp是Nuxt.js应用实例的引用，而vueApp则是内部的Vue应用实例。通过调用use方法，我们确保了Element Plus的组件和工具可以在整个Nuxt应用中使用。

总的来说，这段代码定义了一个Nuxt.js插件，用于在Nuxt应用中安装和配置Element Plus组件库。一旦这个插件被Nuxt应用加载，你就可以在应用的任何组件中直接使用Element Plus提供的UI组件了。这样做的好处是，你可以避免在每个组件中单独导入和注册Element Plus组件，而是直接在应用级别进行全局安装和配置。

三、主入口App.vue

xml 复制代码

 <template>
   <div>
     <NuxtLayout>
       <NuxtPage/>
     </NuxtLayout>
   </div>
 </template>

`<template>`

在 Vue 中，<template> 标签用于定义组件的 HTML 结构。所有在 <template> 标签中的内容都会被 Vue 的渲染函数处理并转化为最终的 DOM 结构。

`<div>`

这是一个普通的 HTML div 元素，它在这里用作一个容器，用来包裹 <NuxtLayout> 和 <NuxtPage> 组件。

`<NuxtLayout>`

<NuxtLayout> 是 Nuxt.js 提供的一个特殊组件，它用来包裹页面的内容，并且允许你定义全局的布局。通常，在 layouts/ 目录下会定义一些布局文件（比如 default.vue），这些布局文件定义了页面的结构，比如头部、侧边栏、底部等。<NuxtLayout> 会根据路由的配置来加载并使用相应的布局。

`<NuxtPage>`

<NuxtPage> 是 Nuxt.js 的另一个特殊组件，它代表当前路由对应的页面组件。Nuxt.js 会根据当前的路由动态地加载并渲染对应的页面组件。

上面定义了一个 Nuxt.js 的基础布局模板。当 Nuxt.js 渲染一个页面时，它会首先加载并使用定义的布局（通过 <NuxtLayout>），然后在布局中加载并渲染对应的页面组件（通过 <NuxtPage>）。这样，你就可以通过定义不同的布局来实现全局的页面结构，同时又能方便地管理和渲染各个页面的内容。

四、框架结构

在 Nuxt 3 中，layout 是一个非常重要的概念，它用于定义页面组件的外部结构或模板。这允许你创建可重用的页面布局，比如统一的页眉、页脚、侧边栏等，而无需在每个页面组件中重复这些元素。

layout 文件夹

在 Nuxt 3 项目中，layout 文件夹通常位于项目的根目录下，与 pages、components、store 等其他文件夹并列。这个文件夹中包含了所有你定义的布局组件。

default.vue

default.vue 是 layout 文件夹中的一个特殊文件。当 Nuxt 3 渲染一个页面时，如果它没有指定使用其他的布局（通过 layout 属性在 pages 目录下的页面组件中指定），那么它会自动使用 default.vue 作为该页面的布局。

default.vue 文件通常包含页面的基本结构，比如一个 <template> 标签来定义 HTML 结构，<script setup> 标签来定义组件的逻辑，以及 <style> 标签来定义样式。

下面是一个简单的 default.vue 示例：

xml 复制代码

 <template>  
   <div class="layout">  
     <header>  
       <!-- 页眉内容，比如 logo、导航等 -->  
     </header>  
     <main>  
       <!-- 这里是页面的主要内容，通过 <NuxtPage /> 组件插入 -->  
       <NuxtPage />  
     </main>  
     <footer>  
       <!-- 页脚内容，比如版权信息、链接等 -->  
     </footer>  
   </div>  
 </template>  
   
 <script setup>  
 // 在这里可以定义布局组件的逻辑，比如方法、计算属性等  
 </script>  
   
 <style scoped>  
 /* 在这里定义布局组件的样式 */  
 .layout {  
   display: flex;  
   flex-direction: column;  
   height: 100vh;  
 }  
 header, footer {  
   /* 页眉和页脚的样式 */  
 }  
 main {  
   /* 主内容区域的样式 */  
   flex-grow: 1;  
 }  
 </style>

在上面的示例中，<NuxtPage /> 是一个特殊的组件，Nuxt 3 会自动将其替换为当前路由对应的页面组件。这样，你就可以在 default.vue 中定义通用的布局结构，并在不同页面之间共享它。

自定义布局

除了 default.vue 之外，你还可以在 layout 文件夹中创建其他的 .vue 文件来定义自定义的布局。然后，你可以在 pages 目录下的页面组件中通过 layout 属性来指定使用哪个布局。例如：

xml 复制代码

 // pages/about.vue  
 <script setup>  
 export default {  
   layout: 'custom' // 指定使用 custom.vue 作为布局  
 }  
 </script>

在上面的例子中，about.vue 页面将使用 layout/custom.vue 作为其布局，而不是默认的 default.vue。

五、路由

Nuxt3 的路由系统是其核心功能之一，它允许你定义和管理应用程序中的页面导航。Nuxt3 基于 Vue Router，但提供了更为简化和自动化的路由配置方式。下面我将详细解释 Nuxt3 的路由系统。

路由基础

Nuxt3 通过在 pages 目录中组织 .vue 文件来自动生成路由。每个 .vue 文件都对应一个路由，其路径由文件在 pages 目录中的位置决定。例如：

pages/index.vue 对应根路径 /
pages/about.vue 对应 /about
pages/category/index.vue 对应 /category
pages/category/[id].vue 对应 /category/:id（动态路由）

这种基于文件系统的路由方式使得添加、删除或修改路由变得非常简单直观。

动态路由

在 Nuxt3 中，你可以通过文件名中的下划线 _ 前缀和参数名来创建动态路由。例如，_id.vue 会匹配任何具有 id 参数的 URL。在组件内部，你可以通过 $route.params 来访问这些参数。

嵌套路由

Nuxt3 支持嵌套路由，允许你创建具有父子关系的路由。通过在 pages 目录中创建子目录并在其中放置 .vue 文件，你可以定义嵌套路由。例如：

pages/category/index.vue 对应 /category
pages/category/[id].vue 对应 /category/:id
pages/category/[id]/profile.vue 对应 /category/:id/profile

在这种情况下，[id].vue 可以包含一个 <NuxtChild /> 组件来渲染与其对应的嵌套子路由（如 profile.vue）。

路由守卫

Nuxt3 允许你使用中间件（middleware）来实现路由守卫。中间件函数可以在路由发生变化之前或之后执行，用于处理身份验证、权限检查、数据预取等操作。你可以在 middleware 目录中创建中间件文件，并在页面组件中使用 middleware 属性来引用它们。

路由参数和查询

在 Nuxt3 的页面组件中，你可以通过 $route 对象访问当前路由的信息，包括参数（$route.params）和查询字符串（$route.query）。这允许你根据路由的不同部分动态地渲染内容。

自定义路由配置

虽然 Nuxt3 提供了强大的基于文件系统的路由生成功能，但你也可以通过创建 nuxt.config.js 文件中的 router 选项来自定义路由配置。这允许你添加额外的路由、修改现有路由的配置或完全自定义路由系统。

路由导航

在 Nuxt3 中，你可以使用 <NuxtLink> 组件来实现页面之间的导航。<NuxtLink> 是一个封装了 Vue Router <router-link> 组件的 Nuxt 特定组件，它提供了更简洁和 Nuxt 特定的 API。你可以使用 to 属性来指定目标路由，并可以像使用普通 HTML 链接一样使用它。

总结

Nuxt3 的路由系统提供了一种简单而强大的方式来定义和管理 Web 应用程序的页面导航。通过基于文件系统的路由生成、动态路由、嵌套路由、路由守卫等功能，你可以轻松地构建出结构清晰、功能丰富的 Web 应用程序。同时，Nuxt3 也提供了足够的灵活性，允许你根据需要进行自定义路由配置和导航实现。

六、api请求

在 Nuxt3 中请求后台服务以及处理跨域问题，主要涉及到两个核心方面：发起网络请求和处理跨域请求。下面我将详细解释这两个方面。

发起网络请求

Nuxt3 推荐使用 fetch API 或第三方库（如 axios）来发起网络请求。这些工具允许你发送 GET、POST、PUT、DELETE 等 HTTP 请求到后台服务。

使用 `fetch` API

Nuxt3 基于 Vite，内置了对原生 fetch API 的支持，因此你可以直接在组件或页面中使用它。例如：

xml 复制代码

 <script setup>  
 import { ref } from 'vue';  
   
 const data = ref(null);  
 const error = ref(null);  
   
 async function fetchData() {  
   try {  
     const response = await fetch('https://api.www.javaman.cn/data');  
     if (!response.ok) {  
       throw new Error('请求出错');  
     }  
     data.value = await response.json();  
   } catch (err) {  
     error.value = err;  
   }  
 }  
   
 // 在页面加载时调用  
 fetchData();  
 </script>

使用 `axios`

如果你更喜欢使用 axios，你需要先安装它：

 bash复制代码
 
 npm install axios

然后在你的组件或页面中引入并使用它：

xml 复制代码

 <script setup>  
 import { ref } from 'vue';  
 import axios from 'axios';  
   
 const data = ref(null);  
 const error = ref(null);  
   
 async function fetchData() {  
   try {  
     const response = await axios.get('https://api.example.com/data');  
     data.value = response.data;  
   } catch (err) {  
     error.value = err;  
   }  
 }  
   
 // 在页面加载时调用  
 fetchData();  
 </script>

跨域

javascript 复制代码

 server: {
       proxy: {
         // 选项写法  
         '/api': {
           target: 'http://localhost:8989', // 目标地址  
           changeOrigin: true, // 开启代理，在本地创建一个虚拟服务器，然后发送请求的数据，会同时会收到请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题  
           rewrite: (path) => path.replace(/^/api/, '') // 路径重写，移除路径中的 /api 前缀  
         }
         // 可以添加更多的代理规则  
       }
     }

nuxt3前端开发教程

一、nuxt3配置文件

二、引入ElementPlus

三、主入口App.vue

<template>

<div>

<NuxtLayout>

<NuxtPage>

四、框架结构

layout 文件夹

default.vue

自定义布局

五、路由

路由基础

动态路由

嵌套路由

路由守卫

路由参数和查询

自定义路由配置

路由导航

总结

六、api请求

发起网络请求

使用 fetch API

使用 axios

跨域

`<template>`

`<div>`

`<NuxtLayout>`

`<NuxtPage>`

使用 `fetch` API

使用 `axios`