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

🚀 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 做定制样式
相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python