Nuxt3页面开发实战探索


title: Nuxt3页面开发实战探索
date: 2024/6/19
updated: 2024/6/19
author: cmdragon

excerpt:
摘要:这篇文章是关于Nuxt3页面开发实战探索的。它介绍了Nuxt3的基础入门,安装与配置,项目结构,内置组件与功能,以及页面与路由的相关内容。Nuxt3是基于Vue 3的服务器端渲染框架,旨在简化Vue应用程序的开发流程,提供最佳的性能和开发

categories:

  • 前端开发

tags:

  • Nuxt3
  • 页面开发
  • 实战探索
  • 前端开发
  • Vue3框架
  • 服务器端渲染
  • 开发流程优化

在这里插入图片描述

在这里插入图片描述

扫码关注或者微信搜一搜:编程智域 前端至全栈交流与成长

Nuxt3基础入门

2.1 Nuxt3简介

Nuxt3 是一个基于 Vue 3 的服务器端渲染(SSR)框架,它继承了 Nuxt.js 的核心概念,并利用 Vue 3 的最新特性,如组合式
API(Composition API)和<script setup>语法,来提供更加现代化的开发体验。Nuxt3 旨在简化 Vue 应用程序的开发流程,同时提供最佳的性能和开发体验。

2.2 Nuxt3安装与配置

安装

安装 Nuxt.js 的步骤和注意事项 | cmdragon’s Blog

要安装 Nuxt3,首先确保你的系统中已经安装了 Node.js(推荐版本为 14 或更高)。然后可以使用以下命令创建一个新的 Nuxt3 项目:

npx nuxi init my-nuxt3-project

这个命令会创建一个名为my-nuxt3-project的新目录,并安装必要的依赖。

配置

Nuxt3 的配置文件是nuxt.config.ts(或nuxt.config.js),位于项目根目录。在这个文件中,你可以定义各种配置,如服务器端口、路由、插件、环境变量等。

// nuxt.config.ts
export default defineNuxtConfig({// 配置项server: {port: 3000, // 服务器端口},// 其他配置...
})

2.3 Nuxt3项目结构

Nuxt.js 深入浅出:目录结构与文件组织详解 | cmdragon’s Blog

Nuxt3 项目遵循一定的目录结构,以下是主要目录和文件的说明:

  • pages/: 页面目录,每个文件对应一个路由。
  • components/: 组件目录,存放可复用的 Vue 组件。
  • layouts/: 布局目录,定义全局页面布局。
  • plugins/: 插件目录,存放可复用的插件。
  • composables/: 组合式函数目录,用于存放可复用的逻辑。
  • assets/: 静态资源目录,如图片、样式表等。
  • store/: 状态管理目录,存放 Vuex 或 Pinia 状态管理文件。
  • app.vue: 应用程序的主组件,可以包含全局样式和布局。
  • nuxt.config.ts(或nuxt.config.js): Nuxt3 的配置文件。
  • package.json: 项目依赖和脚本。

2.4 Nuxt3内置组件与功能

Nuxt3 提供了一系列内置组件和功能,以简化开发流程:

  • <NuxtLayout>: 用于定义页面布局。
  • <NuxtPage>: 用于渲染当前路由对应的页面。
  • <NuxtLink>: 用于创建导航链接。
  • <NuxtLoadingIndicator>: 显示页面加载指示器。
  • <ClientOnly>: 用于只在客户端渲染内容。
  • <ServerOnly>: 用于只在服务器端渲染内容。

此外,Nuxt3 还提供了许多内置功能,如路由系统、中间件、生命周期钩子、状态管理等,以支持复杂的Web应用开发。

页面与路由

3.1 页面文件与路由规则

在 Nuxt3 中,页面文件通常位于pages目录下,每个文件对应一个路由。文件名(不包括扩展名)就是路由路径。例如,pages/about.vue
对应的路由是/about。Nuxt3 使用静态文件作为路由的入口点,这意味着文件名和路由之间是一一对应的。

路由规则通常在nuxt.config.ts中定义,可以使用router对象来配置。例如,设置默认路由:

export default defineNuxtConfig({router: {base: '/', // 设置网站的根路径routes: [{ path: '/', component: () => import('@/pages/index.vue') }, // 首页{ path: '/about', component: () => import('@/pages/about.vue') }, // 关于页面]}
})

3.2 动态路由与参数传递

动态路由使用冒号:来定义参数,例如:id。当用户访问/users/:id时,id就会被解析为 URL
中的参数。在页面中,可以通过this.$route.params访问这些参数:

export default {setup() {const id = this.$route.params.id;// 使用id}
}

3.3 子路由与嵌套路由

子路由允许在单个路由下定义多个子路径。在 Nuxt3 中,可以使用children属性来定义子路由:

export default defineNuxtRoute({path: 'users/:userId',component: () => import('@/pages/users.vue'),children: [{ path: 'profile', component: () => import('@/pages/users/profile.vue') },{ path: 'settings', component: () => import('@/pages/users/settings.vue') }]
})

3.4 路由元数据与页面配置

meta属性用于设置页面的元数据,如标题、描述等,对SEO有帮助。在页面组件中,可以这样定义:

export default {setup() {const meta = {title: '用户设置',meta: {description: '这是用户设置页面的描述',keywords: '设置, 用户'}};return { meta };}
}

3.5 路由跳转与导航

Nuxt3 提供了多种方式来导航:

  • this.$router.push(path): 向前(浏览器前进)导航到新的路由。
  • this.$router.replace(path): 向前(浏览器前进)导航到新的路由,但不会在浏览器历史记录中留下记录。
  • this.$router.go(n): 直接改变浏览器的前进或后退历史,n 是整数。

使用<NuxtLink>组件可以创建可点击的链接,它们会自动处理路由跳转:

<NuxtLink to="/users/:userId/profile">用户资料</NuxtLink>

这将创建一个链接,点击后会导航到用户资料页面。

页面布局与组件

4.1 页面布局组件(NuxtLayout)

RIPEMD在线加密 | 一个覆盖广泛主题工具的高效在线平台 (cmdragon.cn)
Nuxt3 的页面布局组件(NuxtLayout)用于定义页面的通用结构,如头部、尾部和侧边栏。这些组件通常位于layouts
目录下,如layouts/default.vue。每个页面可以覆盖或继承布局,通过在nuxt.config.ts中配置defaultLayout

export default defineNuxtConfig({router: {defaultLayout: 'MainLayout'},components: {MainLayout: () => import('@/components/layouts/MainLayout.vue')}
})

4.2 页面占位组件(NuxtPage)

NuxtPage是 Nuxt3 中的一个特殊组件,它代表一个单独的页面。每个页面组件(如pages/about.vue)实际上就是一个NuxtPage
,它会自动包含在相应的布局组件中。

4.3 公共组件与页面组件

  • 公共组件:这些组件可以在多个页面中复用,通常用于通用的功能,如导航栏、表单验证等。在components目录下创建,然后在需要的地方导入使用。
  • 页面组件:每个页面有自己的组件,它们只在该页面中使用。例如,pages/about.vue中的AboutContent就是该页面特有的。

4.4 组件通信与状态管理

  • 组件通信:Nuxt3 使用Vue的父子组件、兄弟组件和自定义事件(𝑒𝑚𝑖𝑡/on)进行通信。例如,父组件可以向子组件传递数据,子组件可以触发事件通知父组件更新状态:
// 父组件
<ChildComponent :data="parentData" @update="handleUpdate" />// 子组件
<template><button @click="emitUpdate">更新数据</button>
</template>
<script>
export default {methods: {emitUpdate() {this.$emit('update', newData);}}
}
</script>
  • 状态管理:Nuxt3
    不直接支持状态管理库,但可以配合使用外部库如Vuex。如果需要全局状态管理,可以在项目中引入Vuex,并在store
    目录下创建store,然后在组件中通过mapStatemapGettersmapActionsmapMutations来访问和管理状态。
// store/index.js
import { createStore } from 'vuex'export default createStore({state: {user: {}},mutations: {setUser(state, user) {state.user = user}},getters: {getUser: state => state.user}
})// 在组件中使用
import { mapState } from 'vuex'export default {setup() {const { getUser } = mapState('store')// ...}
}

样式与资源

5.1 样式资源目录

RC4加密解密 | 一个覆盖广泛主题工具的高效在线平台 (cmdragon.cn)
在 Nuxt3 中,样式资源通常存放在assets目录下。这个目录用于存放未编译的资源,如原始的 CSS、Sass、Less 或图片文件。Nuxt3
会自动处理这些资源,确保它们在构建过程中被正确编译和优化。

5.2 全局样式与局部样式

  • 全局样式:可以在assets/css/global.css中定义全局样式,然后在nuxt.config.ts中引入:
export default defineNuxtConfig({css: ['~/assets/css/global.css']
})
  • 局部样式:每个组件可以有自己的局部样式,通常直接写在组件的<style>标签内,或者通过<style scoped>来确保样式仅应用于该组件。

5.3 CSS预处理器与后处理器

  • 预处理器:Nuxt3 支持多种CSS预处理器,如Sass、Less和Stylus。只需在assets目录下使用相应的文件扩展名(如.scss.less
    .styl),Nuxt3 会自动处理编译。
  • 后处理器:如PostCSS,可以通过在nuxt.config.ts中配置来使用,例如添加自动前缀:
export default defineNuxtConfig({postcss: {plugins: {'postcss-preset-env': {autoprefixer: true}}}
})

5.4 资源引用与优化

  • 资源引用:在 Nuxt3 中引用资源,如图片或字体,可以直接使用相对路径或通过~/assets/前缀引用。例如:
<img src="~/assets/img/logo.png" alt="Logo">
  • 优化:Nuxt3 在构建过程中会自动优化资源,如压缩图片和合并CSS文件。此外,可以通过配置nuxt.config.ts来进一步优化,例如设置图片压缩级别:
export default defineNuxtConfig({build: {extractCSS: true,optimizeImages: true}
})

这些配置和实践有助于确保你的 Nuxt3 应用在样式和资源管理方面既高效又易于维护。

数据交互与状态管理

6.1 数据请求与API调用

RC4Drop加密解密 | 一个覆盖广泛主题工具的高效在线平台 (cmdragon.cn)
在 Nuxt3 中,可以使用useFetchuseAsyncData函数从 API 获取数据。这两个函数都返回一个Promise,可以在组件中使用await
.then()方法获取数据。

  • useFetch:在组件内部使用,自动在组件挂载和更新时触发数据请求。
<template><div><p>{{ data.title }}</p></div>
</template><script>
export default {async setup() {const { data } = await useFetch('https://jsonplaceholder.typicode.com/posts/1')return { data }}
}
</script>
  • useAsyncData:在页面组件中使用,仅在页面加载时触发数据请求。
<template><div><p>{{ data.title }}</p></div>
</template><script>
export default {async asyncData() {const { data } = await useFetch('https://jsonplaceholder.typicode.com/posts/1')return { data }}
}
</script>

6.2 Vuex状态管理

Vuex 是 Vue.js 的官方状态管理库,可用于在 Nuxt3 应用中管理全局状态。在 Nuxt3 中使用 Vuex 需要进行一些额外的配置。

  1. 安装 Vuex:npm install vuex@next
  2. 创建store目录,并在其中创建index.js文件。
  3. store/index.js中创建 Vuex 存储实例,并导出:
import { createStore } from 'vuex'export const store = createStore({state: () => ({count: 0}),mutations: {increment(state) {state.count++}}
})
  1. nuxt.config.ts中配置 Vuex:
export default defineNuxtConfig({buildModules: ['@nuxtjs/vuex']
})
  1. 在组件中使用 Vuex:
<template><div><button @click="increment">{{ count }}</button></div>
</template><script>
import { mapState, mapMutations } from 'vuex'export default {computed: {...mapState(['count'])},methods: {...mapMutations(['increment'])}
}
</script>

6.3 Pinia状态管理

Pinia 是一个 Vue.js 的状态管理库,可以用作 Vuex 的替代品。在 Nuxt3 中使用 Pinia 与使用 Vuex 类似,但不需要额外的配置。

  1. 安装 Pinia:npm install pinia
  2. 创建store目录,并在其中创建index.js文件。
  3. store/index.js中创建 Pinia 存储实例,并导出:
import { defineStore } from 'pinia'export const useStore = defineStore({id: 'main',state: () => ({count: 0}),actions: {increment() {this.count++}}
})
  1. 在组件中使用 Pinia:
<template><div><button @click="increment">{{ count }}</button></div>
</template><script>
import { useStore } from '~/store'export default {setup() {const store = useStore()return {count: store.count,increment: store.increment}}
}
</script>

6.4 数据缓存与优化

可以使用useCache函数在 Nuxt3 中缓存数据请求结果,以避免在每次请求时都重新获取数据。

<template><div><p>{{ data.title }}</p></div>
</template><script>
import { useFetch, useCache } from '#app'export default {async setup() {const cache = useCache()const { data } = await useFetch('https://jsonplaceholder.typicode.com/posts/1', {cache: cache.set('post')})return { data }}
}
</script>

在这个示例中,数据请求结果会被缓存在post键下,直到缓存过期或被清除。这可以有效地减少不必要的数据请求,提高应用的性能。

SSG与SSR

7.1 静态站点生成(SSG)

Rabbit加密解密 | 一个覆盖广泛主题工具的高效在线平台 (cmdragon.cn)
**Static Site Generation (SSG)**是一种构建网站的方式,先在服务器端将所有内容(包括数据)预先处理和渲染成静态 HTML
文件,然后将这些文件存储在服务器上。当用户访问网站时,直接提供这些静态文件,无需服务器再次处理请求。SSG
主要适用于内容不常更新或更新频率低的网站,因为它可以提供更快的加载速度和更好的搜索引擎优化(SEO)。

Nuxt3 支持 SSG,使用nuxt generate命令生成静态站点。在nuxt.config.ts中配置 SSG:

export default defineNuxtConfig({generate: {routes: ['/', '/about', '/contact']}
})

7.2 服务器端渲染(SSR)

**Server-Side Rendering (SSR)**是一种在服务器端生成 HTML,然后将渲染后的 HTML 传递给客户端的技术。这使得用户在页面加载时就能看到内容,提供更好的首屏体验。Nuxt3
默认就是 SSR,每个页面请求都会触发组件的完整生命周期。

在 Nuxt3 中,SSR 是通过asyncDatafetch函数在服务器端获取数据并渲染的。

7.3 混合渲染与性能优化

Hybrid Rendering,也称为客户端渲染(CSR),是 SSR 和 CSR 的结合,根据用户行为动态选择渲染方式。Nuxt3 的nuxt:render
功能允许在客户端进行渲染,以提供更好的交互体验,尤其是对于复杂的组件或需要频繁更新的部分。

性能优化方面,可以考虑以下几点:

  • 优化asyncDatafetch的性能,避免不必要的数据请求。
  • 使用nuxt:render时,确保在客户端渲染时数据已经准备就绪。
  • 使用预渲染(Prerendering)或预加载(Preloading)来加速首次加载。

7.4 SEO与搜索引擎优化

SEO(搜索引擎优化)是提高网站在搜索引擎结果中排名的过程。SSR 和 SSG 对 SEO 都有积极影响:

  • SSR 可以直接提供完整的 HTML,有利于搜索引擎爬虫抓取和理解内容。
  • SSG 的静态 HTML 也有利于 SEO,因为搜索引擎可以直接读取和索引。

为了优化 SEO,确保:

  • 使用语义化的 HTML 结构。
  • 避免使用 JavaScript 过度依赖,确保关键内容在没有 JavaScript 时也能被看到。
  • 使用<meta>标签提供元数据,如<title><description><robots>
  • 提供sitemap.xmlrobots.txt文件,帮助搜索引擎索引网站。

实战案例

8.1 博客系统

PBKDF2在线加密 | 一个覆盖广泛主题工具的高效在线平台 (cmdragon.cn)
使用 Nuxt3 构建博客系统的步骤如下:

  1. 创建一个新的 Nuxt3 项目:
npx nuxi init my-blog
cd my-blog
  1. 安装一个 Markdown 解析库,如marked,用于将 Markdown 文件转换为 HTML:
npm install marked
  1. pages/posts/_slug.vue中创建一个博文页面,使用fetch函数获取 Markdown 文件并渲染:
<template><div><h1>{{ post.title }}</h1><div v-html="post.content"></div></div>
</template><script>
import marked from 'marked'export default {async fetch() {const { data } = await this.$fetch(`/api/posts/${this.$route.params.slug}`)this.post = {title: data.title,content: marked(data.content)}},data() {return {post: {title: '',content: ''}}}
}
</script>
  1. pages/index.vue中创建一个博客列表页面,使用asyncData函数获取所有博文列表:
<template><div><h1>博客列表</h1><ul><li v-for="post in posts" :key="post.slug"><nuxt-link :to="`/posts/${post.slug}`">{{ post.title }}</nuxt-link></li></ul></div>
</template><script>
export default {async asyncData() {const { data } = await this.$fetch('/api/posts')return {posts: data}}
}
</script>
  1. 创建一个 API 路由,用于获取博文列表和单个博文:
// server/api/posts.js
export default defineEventHandler(async (event) => {const { method } = event.node.reqif (method === 'GET') {const response = await fetch('https://api.example.com/posts')const data = await response.json()return { data }}if (method === 'GET' && event.context.params.slug) {const response = await fetch(`https://api.example.com/posts/${event.context.params.slug}`)const data = await response.json()return { data }}return { data: [] }
})

8.2 电商网站

使用 Nuxt3 构建电商网站的步骤如下:

  1. 创建一个新的 Nuxt3 项目:
npx nuxi init my-ecommerce
cd my-ecommerce
  1. 安装一个图片处理库,如sharp,用于处理图片:
npm install sharp
  1. pages/products/_slug.vue中创建一个产品详情页面,使用fetch函数获取产品信息和图片:
<template><div><h1>{{ product.title }}</h1><img :src="product.imageUrl" :alt="product.title" /><p>{{ product.description }}</p></div>
</template><script>
import { createImageUrl } from '~/utils/image'export default {async fetch() {const { data } = await this.$fetch(`/api/products/${this.$route.params.slug}`)this.product = {title: data.title,imageUrl: createImageUrl(data.image),description: data.description}},data() {return {product: {title: '',imageUrl: '',description: ''}}}
}
</script>
  1. pages/index.vue中创建一个产品列表页面,使用asyncData函数获取所有产品列表:
<template><div><h1>产品列表</h1><ul><li v-for="product in products" :key="product.slug"><nuxt-link :to="`/products/${product.slug}`">{{ product.title }}</nuxt-link></li></ul></div>
</template><script>
export default {async asyncData() {const { data } = await this.$fetch('/api/products')return {products: data}}
}
</script>
  1. 创建一个 API 路由,用于获取产品列表和单个产品:
// server/api/products.js
import { createImageUrl } from '~/utils/image'export default defineEventHandler(async (event) => {const { method } = event.node.reqif (method === 'GET') {const response = await fetch('https://api.example.com/products')const data = await response.json()return { data }}if (method === 'GET' && event.context.params.slug) {const response = await fetch(`https://api.example.com/products/${event.context.params.slug}`)const data = await response.json()return {data: {title: data.title,image: data.image,description: data.description}}}return { data: [] }
})// utils/image.js
export const createImageUrl = (image) => {return `https://api.example.com/images/${image}?w=300&h=300&fit=crop`
}

8.3 社交媒体平台

使用 Nuxt3 构建社交媒体平台的步骤如下:

  1. 创建一个新的 Nuxt3 项目:
npx nuxi init my-social-media
cd my-social-media
  1. 安装一个图片处理库,如sharp,用于处理图片:
npm install sharp
  1. pages/posts/_slug.vue中创建一个用户动态页面,使用fetch函数获取用户动态:
<template><div><h1>{{ post.title }}</h1><img :src="post.imageUrl" :alt="post.title" /><p>{{ post.content }}</p><ul><li v-for="comment in comments" :key="comment.id">{{ comment.author }}:{{ comment.content }}</li></ul></div>
</template><script>
import { createImageUrl } from '~/utils/image'export default {async fetch() {const { data } = await this.$fetch(`/api/posts/${this.$route.params.slug}`)this.post = {title: data.title,imageUrl: createImageUrl(data.image),content: data.content}this.comments = data.comments},data() {return {post: {title: '',imageUrl: '',content: ''},comments: []}}
}
</script>

进阶技巧与优化

9.1 路由守卫与权限控制

在 Nuxt3 中,可以使用middleware函数来实现路由守卫和权限控制。middleware函数可以在页面渲染前执行,可以用于检查用户权限和鉴权。

以下是一个简单的路由守卫示例:

// middleware/auth.js
export default function ({ app, redirect }) {if (!app.context.store.state.user.isAuthenticated) {return redirect('/login')}
}

在页面组件中,可以使用middleware选项来应用路由守卫:

// pages/dashboard.vue
<template><div><h1>Dashboard</h1><p>欢迎来到管理控制台!</p></div>
</template><script>
export default {middleware: 'auth'
}
</script>

9.2 打包与部署

Nuxt3 支持多种打包和部署方式,包括使用nuxt export命令生成静态站点,或使用nuxt start命令启动服务器。

以下是使用nuxt export命令生成静态站点的示例:

npm run build
nuxt export

这将生成一个静态站点,可以直接部署到支持静态文件的服务器上,如 GitHub Pages、Netlify 或 Vercel。

如果需要使用服务器渲染,可以使用nuxt start命令启动服务器:

npm run build
nuxt start

这将启动一个 Node.js 服务器,可以部署到支持 Node.js 的服务器上,如 Heroku、AWS Lambda 或 Google Cloud Functions。

9.3 性能优化与监控

Nuxt3 提供了多种性能优化和监控工具,包括使用nuxt telemetry命令收集匿名使用数据,或使用nuxt performance命令分析性能问题。

以下是使用nuxt telemetry命令收集匿名使用数据的示例:

npm run build
nuxt telemetry

这将收集匿名使用数据并发送到 Nuxt.js 团队的服务器上,用于改进 Nuxt.js 的性能和功能。

如果需要分析性能问题,可以使用nuxt performance命令:

npm run build
nuxt performance

这将生成一个性能报告,可以用于分析页面加载时间、资源加载情况和其他性能指标。

9.4 国际化与多语言

Nuxt3 支持多种国际化和多语言工具,包括使用nuxt i18n模块,或使用第三方库,如vue-i18n

以下是使用nuxt i18n模块的示例:

  1. 安装nuxt i18n模块:
npm install nuxt-i18n
  1. nuxt.config.js中配置nuxt-i18n模块:
export default {modules: ['@nuxtjs/i18n'],i18n: {locales: [{code: 'en',file: 'en.js'},{code: 'zh',file: 'zh.js'}],defaultLocale: 'en',vueI18n: {fallbackLocale: 'en'}}
}
  1. 在页面组件中使用$t函数来获取翻译文本:
<template><div><h1>{{ $t('hello') }}</h1></div>
</template>
  1. 创建翻译文件,如locales/en.jslocales/zh.js
// locales/en.js
export default {hello: 'Hello, world!'
}// locales/zh.js
export default {hello: '你好,世界!'
}

这将为应用程序添加多语言支持,用户可以在页面右下角选择语言。

附录

10.1 常见问题与解答

  • 问题:Nuxt3 与 Nuxt2 有什么区别?

    答:Nuxt3 是 Nuxt2 的下一个版本,提供了更多的功能和性能优化。Nuxt3 使用了 Vue 3 和 Vite 作为底层技术,并且支持更多的构建选项和插件。

  • 问题:Nuxt3 支持哪些构建工具?

    答:Nuxt3 支持使用 Vite 和 Webpack 作为构建工具。默认情况下,Nuxt3 使用 Vite 作为构建工具,但也可以使用 Webpack 作为替代方案。

  • 问题:Nuxt3 支持哪些服务器框架?

    答:Nuxt3 支持使用 Express 和 Koa 作为服务器框架。默认情况下,Nuxt3 使用 Express 作为服务器框架,但也可以使用 Koa 作为替代方案。

  • 问题:Nuxt3 支持哪些数据库?

    答:Nuxt3 支持使用 MongoDB 和 PostgreSQL 等数据库。可以使用@nuxtjs/mongodb@nuxtjs/pg等插件来连接和操作数据库。

  • 问题:Nuxt3 支持哪些状态管理工具?

    答:Nuxt3 支持使用 Vuex 和 Pinia 等状态管理工具。可以使用@nuxtjs/vuex@nuxtjs/pinia等插件来集成和使用状态管理工具。

10.2 Nuxt3 社区与资源

  • cmdragon’s Blog
  • Nuxt3 官方网站:https://nuxtjs.org/docs/guide/release-notes/nuxt3
  • Nuxt3 官方文档:https://nuxtjs.org/docs/get-started/installation
  • Nuxt3 官方 GitHub 仓库:https://github.com/nuxt/nuxt.js
  • Nuxt3 社区论坛:https://forum.nuxtjs.org/
  • Nuxt3 社区 Discord 频道:https://discord.com/invite/nuxt
  • Nuxt3 社区 Stack Overflow 频道:https://stackoverflow.com/questions/tagged/nuxt.js
  • Nuxt3 社区 Twitter 账号:https://twitter.com/nuxt_js
  • Nuxt3 社区 YouTube 频道:https://www.youtube.com/channel/UC3fCJlDHUxO8QCVxr_OyKZg

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

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

相关文章

笔记本Win + v剪贴板打开失效问题解决

使用快捷键winv打开剪贴板时&#xff0c;突然没有了反应&#xff0c;原因是explorer.exe程序占用了winv键。解决方法&#xff1a; 1、管理员身份运行powershell 2、先杀掉explorer.exe程序&#xff1a;taskkill /f /im explorer.exe 3、重启explorer.exe程序 4、再使用winv …

变声方法大公开,变女声很自然的3款变声器推荐,值得收藏

将男声变成女声并且要很自然的变声器有吗&#xff1f;很多喜欢玩游戏的小伙伴们在进行游戏连麦时&#xff0c;可能为了增加趣味&#xff0c;想要试试变成女声来交流&#xff0c;或者喜欢视频剪辑创作的小伙伴们在进行视频配音时&#xff0c;不想用自己的声音出镜&#xff0c;需…

市值飙升!超微软、苹果,英伟达成为全球市值最高上市公司

KlipC报道&#xff1a;当地时间6月18日&#xff0c;英伟达股价再度大涨&#xff0c;盘后股价上涨3.51%&#xff0c;总市值达3.335万亿美元&#xff0c;报135.58美元再刷历史新高&#xff0c;超微软、苹果成为全球市值最高的上市公司。 值得一提的是&#xff0c;在本月初&#x…

vue3面试题八股集合——2024

vue3比vue2有什么优势&#xff1f; 性能更好&#xff0c;打包体积更小&#xff0c;更好的ts支持&#xff0c;更好的代码组织&#xff0c;更好的逻辑抽离&#xff0c;更多的新功能 描述Vu3生命周期 Options API的生命周期&#xff1a; beforeCreate: 在实例初始化之后、数据观…

Linux top 命令使用教程

转载请标明出处&#xff1a;https://blog.csdn.net/donkor_/article/details/139775547 文章目录 一、top 是什么二、top的基础语法三、top输出信息解读 一、top 是什么 Linux top 是一个在Linux和其他类 Unix 系统上常用的实时系统监控工具。它提供了一个动态的、交互式的实时…

云计算【第一阶段(16)】安装及管理程序

目录 一、linux 应用程序基础 1.1、应用程序与系统命令的关系 1.2、典型应用程序的目录结构 1.3、常见的软件包封装类型 二、RPM软件包管理工具 2.1、rpm命令的格式 2.2、安装&#xff0c;升级&#xff0c;卸载 rpm软件包 安装软件包 升级软件包 卸载软件包 查询软件…

Android OTA 升级基础知识详解+源码分析

前言&#xff1a; 本文仅仅对OTA升级的几种方式的概念和运用进行总结&#xff0c;仅在使用层面对其解释。需要更详细的内容我推荐大神做的全网最详细的讲解&#xff1a; https://blog.csdn.net/guyongqiangx/article/details/129019303?spm1001.2014.3001.5502 三种升级方式…

前端高级架构师课程(总共111门课程,1150GB)

由阿里P8前端架构师亲自精心筛选整理的全网最新最具价值的前端进阶学习课程&#xff01; 培训机构原版教程&#xff01; 课程知识点和一线大厂完美匹配&#xff01; 所有课程资源完整成套&#xff0c;不残缺&#xff0c;不拼凑&#xff0c;不拆开乱发&#xff01; 这系列课程包…

JavaScript-拓展简单和引用数据类型

学习目标&#xff1a; 掌握拓展简单和引用数据类型 学习内容&#xff1a; 拓展-术语解释拓展-基本数据类型和引用数据类型 拓展-术语解释&#xff1a; 拓展-基本数据类型和引用数据类型&#xff1a; 简单类型又叫做基本数据类型或者值类型&#xff0c;复杂类型又叫做引用类型…

如何快速在一台新电脑上安装 Python 环境

一、下载miniconda 1.下载 我们可以在清华大学开源软件镜像站下载最新版本的miniconda。如&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-py38_4.9.2-Windows-x86_64.exe 2.安装 双击exe文件安装&#xff0c;如果没有特殊的需求&#x…

UML详解

1.what is the UML UML 全称是 Unified Modeling Language&#xff08;统一建模语言&#xff09;&#xff0c;它以图形的方式来描述软件的概念 2.它存在的目的 UML 的目标是通过一定结构的表达&#xff0c;来解决现实世界到软件世界的沟通问题。 3.什么是模&#xff0c;…

127.0.0.1与本机IP地址的区别

大家好&#xff0c;今天我们来聊聊一个在网络世界中常常被提及&#xff0c;但可能对于非专业人士来说还有些模糊的概念——127.0.0.1与本机IP地址。这两个地址在网络通信中都扮演着重要的角色&#xff0c;但它们之间又有着怎样的区别呢&#xff1f;让我们一起来探究一下。 一、…

《庆余年》在前,《玫瑰的故事》在后,阅文发现“新大陆”?

奋笔疾书的网文作家&#xff0c;即将迎来网络文学的高光时代。 近日&#xff0c;阅文集团于安徽省举办2024阅文创作大会。现场数据显示&#xff0c;2023年阅文活跃作家平均收入增长32%&#xff0c;创造近五年最大增幅。其中&#xff0c;中位数作家收入增幅达135%&#xff0c;已…

K8s的资源对象

资源对象是 K8s 提供的一些管理和运行应用容器的各种对象和组件。 Pod 资源是 K8s 中的基本部署单元&#xff0c;K8s通过Pod来运行业务应用的容器镜像 Job 和 CronJob 资源用于执行任务和定时任务&#xff0c;DaemonSet 资源提供类似每个节点上守护进程&#xff0c; Deployment…

Parallelize your massive SHAP computations with MLlib and PySpark

https://medium.com/towards-data-science/parallelize-your-massive-shap-computations-with-mllib-and-pyspark-b00accc8667c (能翻墙直接看原文&#xff09; A stepwise guide for efficiently explaining your models using SHAP. Photo by Pietro Jeng on Unsplash Int…

【调试记录】:windows查看一个文件夹下(多个子文件夹)每个子文件夹中文件的数量分别是多少

查看文件夹小所有文件的数量&#xff0c;包括子文件中的文件的数量 Get-ChildItem -Path "C:\path\to\your\directory" -Recurse | Measure-Object查看一个文件夹下多个子文件每个子文件夹中文件的数量分别是多少 $targetFolder "C:\path\to\your\directory&…

jquey+mybatis-plus实现简单分页功能

这篇文章介绍一下怎么通过JQuery结合mybatis-plus的分页插件实现原生HTML页面的分页效果&#xff0c;没有使用任何前端框架&#xff0c;主要是对前端知识的应用。 创建Springboot项目 Intellij IDEA中创建一个Springboot项目&#xff0c;项目名为pager。 添加必须的依赖包 修…

【Linux】—MySQL安装

文章目录 前言一、下载官方MySQL包二、下载完成后&#xff0c;通过xftp6上传到Linux服务器上三、解压MySQL安装包四、在安装目录下执行rpm安装&#xff0c;请按顺序依次执行。五、配置MySQL六、启动MySQL数据库七、退出&#xff0c;重新登录数据库 前言 本文主要介绍在Linux环境…

创建Docker容器与外部机通信(独立IP的方式)

需求&#xff1a;希望外部可以直接通过不同IP地址访问宿主机上的Docker容器&#xff0c;而不需要端口映射&#xff08;同一个IP不同的端口与外部通讯&#xff09;&#xff0c;这通常涉及到在宿主机的网络层面进行更高级的配置&#xff0c;比如使用IP伪装&#xff08;IP masquer…

团队协同渗透测试报告输入输出平台部署

目录 简介 文章来源 部署环境 文件下载 开始安装 系统初始化 免责声明 结语 简介 因应监管部需求&#xff0c;国内访问Docker源pull镜像开始变得复杂且困难起来了&#xff0c;大佬github给的在线/离线安装脚本跑了很久也无法拉取到镜像&#xff0c;所以将以前的镜像打…