Logo

Nuxt3新手入门，从零开始搭建你的第一个SSR应用

author
YGHub·2024-11-15·1·字数：203 字·阅读时间：1 分钟

Vue Vue

Nuxt Nuxt

一、为什么选择Nuxt3？

Vue3的SSR框架，Nuxt3有这些优点：

  • 开箱即用的SSR能力
  • 自动路由配置
  • 更好的SEO支持
  • 优秀的开发体验

二、基础环境要求

bash 
# Node.js 版本 >= 16.11
node -v  # 检查版本
 
# 创建项目
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
 

三、项目结构

bash 
my-nuxt-app/
├── .nuxt/          # 构建目录
├── assets/         # 资源文件
├── components/     # 组件目录
├── composables/    # 组合式函数
├── layouts/        # 布局文件
├── pages/          # 页面文件
├── plugins/        # 插件目录
├── public/         # 静态文件
├── server/         # 服务端文件
└── app.vue         # 入口文件
 

四、基础功能实战

1. 创建第一个页面

vue 
<!-- pages/index.vue -->
<template>
  <div>
    <h1>欢迎来到Nuxt3</h1>
    <p>{{ message }}</p>
  </div>
</template>
 
<script setup>
const message = ref('Hello, Nuxt3!')
</script>
 

2. 使用组件

vue 
<!-- components/Header.vue -->
<template>
  <header>
    <nav>
      <NuxtLink to="/">首页</NuxtLink>
      <NuxtLink to="/about">关于</NuxtLink>
    </nav>
  </header>
</template>
 

3. 配置路由

vue 
<!-- pages/about.vue -->
<template>
  <div>
    <h1>关于我们</h1>
    <p>这是一个Nuxt3示例</p>
  </div>
</template>
 

五、数据获取

1. 使用useFetch

vue 
<script setup>
// 获取数据
const { data: posts } = await useFetch('/api/posts')
</script>
 
<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>
 

2. 自定义API

ts 
// server/api/posts.ts
export default defineEventHandler(async (event) => {
  return [
    { id: 1, title: '第一篇文章', content: '内容...' },
    { id: 2, title: '第二篇文章', content: '内容...' }
  ]
})
 

六、状态管理

1. 使用useState

ts 
// composables/useCounter.ts
export const useCounter = () => useState('counter', () => 0)
 
// 在组件中使用
const counter = useCounter()
 

2. Pinia集成

bash 
# 安装pinia
npm install @pinia/nuxt
 
ts 
// store/counter.ts
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})
 

七、样式处理

1. CSS模块

css 
<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
</style>
 

2. 使用TailwindCSS

bash 
# 安装tailwindcss
npm install -D tailwindcss postcss autoprefixer
 
# 初始化配置
npx tailwindcss init
 
bash 
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})
 

八、SEO优化

1. 配置元信息

vue 
<script setup>
useHead({
  title: '我的Nuxt3应用',
  meta: [
    { name: 'description', content: '这是一个Nuxt3示例应用' }
  ]
})
</script>
 

2. 动态SEO

vue 
<script setup>
const { data: article } = await useFetch(`/api/article/${id}`)
 
useHead({
  title: article.value.title,
  meta: [
    { name: 'description', content: article.value.description }
  ]
})
</script>
 

九、进阶技巧

1. 中间件使用

ts 
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const isAuthenticated = false // 检查用户是否登录
  if (!isAuthenticated) {
    return navigateTo('/login')
  }
})
 

2. 插件开发

ts 
// plugins/myPlugin.ts
export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      sayHello: (msg: string) => `Hello ${msg}!`
    }
  }
})
 

希望这篇入门指南能帮助你快速上手Nuxt3！

Preview

1

点个赞 ~

Vue Vue

Nuxt Nuxt

版权申明： © 本文著作权归YGHub所有，未经YGHub网授权许可，禁止第三方以任何形式转载和使用本文内容。

Related article

基于微信小程序实现图片压缩、裁剪、尺寸调整的实践总结

YGHub

2025-01-02

4

Vue3 作用域插槽，提升组件复用性的利器

YGHub

2024-12-03

1

Nuxt3 中使用 localStorage 的正确姿势

YGHub

2024-12-01

3

Vue3 子组件 defineExpose 暴露方法无效的三种常见场景及解决方案

YGHub

2024-11-24

7

Vue3 组件通信实战，实现跨组件数据更新

YGHub

2024-11-21

8