🚀 Nuxt + Pinia + Element Plus 后台管理系统搭建教程(含源码)
📌 收藏 + 点赞 + 关注,快速搭建你的 Nuxt 3 后台管理系统!
🧱 一、完整项目结构(直接贴源码)
📦 项目初始化
bash
npx nuxi init nuxt-admin
cd nuxt-admin
npm install
⚙️ 安装 Pinia 和 Element Plus
bash
npm install @pinia/nuxt element-plus
🧩 编辑 nuxt.config.ts
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
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
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
vue
<template>
<el-container style="height: 100vh">
<slot />
</el-container>
</template>
✅ 4. 用户状态管理 stores/user.ts
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
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 做定制样式