当前位置：首页 > news >正文

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

news 来源：原创 2025/6/14 7:04:01

🚀 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('/')}
})