Nuxt + Pinia + Element Plus 后台管理系统搭建教程（含源码）

🚀 Nuxt + Pinia + Element Plus 后台管理系统搭建教程（含源码）

📌 收藏 + 点赞 + 关注，快速搭建你的 Nuxt 3 后台管理系统！

---

🧱 一、完整项目结构（直接贴源码）

📦 项目初始化

npx nuxi init nuxt-admin
cd nuxt-admin
npm install

⚙️ 安装 Pinia 和 Element Plus

npm install @pinia/nuxt element-plus

---

🧩 编辑 nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  css: ['element-plus/dist/index.css'],
  app: {
    head: {
      title: 'Nuxt Admin Dashboard',
    },
  },
})

---

📁 页面结构一览

pages/
├── index.vue          # 登录页
├── dashboard.vue      # 控制台页面
layouts/
└── default.vue        # 后台主布局
composables/
└── useAuth.ts         # 权限中间件
stores/
└── user.ts            # 用户信息管理

---

✅ 1. 登录页 pages/index.vue

<template>
  <div class="login">
    <el-card class="login-card">
      <el-input v-model="username" placeholder="用户名" />
      <el-input v-model="password" placeholder="密码" type="password" />
      <el-button type="primary" @click="login">登录</el-button>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const username = ref('')
const password = ref('')

const login = () => {
  if (username.value === 'admin' && password.value === '123456') {
    userStore.setUser({ name: '管理员', token: 'abc123' })
    router.push('/dashboard')
  } else {
    ElMessage.error('账号或密码错误')
  }
}
</script>

<style scoped>
.login {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.login-card {
  width: 300px;
}
</style>

---

✅ 2. 控制台页 pages/dashboard.vue

<template>
  <el-container>
    <el-aside width="200px">菜单栏</el-aside>
    <el-container>
      <el-header>控制台</el-header>
      <el-main>欢迎你，{{ userStore.user.name }}</el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
definePageMeta({ middleware: 'auth' }) // 需登录访问
const userStore = useUserStore()
</script>

---

✅ 3. 全局布局 layouts/default.vue

<template>
  <el-container style="height: 100vh">
    <slot />
  </el-container>
</template>

---

✅ 4. 用户状态管理 stores/user.ts

// stores/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: {
      name: '',
      token: '',
    },
  }),
  actions: {
    setUser(user) {
      this.user = user
    },
  },
  persist: true,
})

💡 推荐配合 pinia-plugin-persistedstate 实现状态持久化。

---

✅ 5. 登录校验中间件 middleware/auth.ts

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const userStore = useUserStore()
  if (!userStore.user.token) {
    return navigateTo('/')
  }
})

---

📘 二、知识点详解：为何选择 Nuxt + Pinia + Element Plus？

📌 1. Nuxt 的优势

• ✅ 自动路由
• ✅ SSR 和 SSG 支持
• ✅ 支持 API 路由（服务端）
• ✅ 内置中间件，方便做权限拦截

---

🧠 2. Pinia 管理状态更清晰

• ✅ 支持组合式 API
• ✅ 内建 devtools 支持
• ✅ 与 Vue 3 完美结合
• ✅ 支持持久化插件，适合管理用户状态

---

🎨 3. Element Plus 快速构建 UI

• 提供大量后台组件（表格、分页、表单验证）
• 支持按需引入 + 国际化

---

✅ 三、总结：Nuxt 后台管理系统最佳实践

技术栈	作用
Nuxt 3	页面结构 + SSR + 中间件
Pinia	用户登录信息和状态管理
Element Plus	后台页面 UI 构建
Middleware	登录校验、权限控制

---

🛠 后续建议扩展模块：

• ✅ 接入真实后端 API，使用 useFetch
• ✅ 接入权限系统（按钮级别控制）
• ✅ 使用 vueuse/head 动态标题设置
• ✅ 动态菜单 + 动态路由
• ✅ 配合 Tailwind 或 UnoCSS 做定制样式