Vue 3 + Vite 4 实战：响应式后台管理系统（含 Pinia）

一、环境配置

# 创建项目
npm create vite@latest admin-system --template vue

# 安装依赖
cd admin-system
npm install pinia vue-router@4 sass
npm install element-plus @element-plus/icons-vue  # UI库示例

二、核心架构设计

1. 目录结构

src/
├── stores/          # Pinia状态管理
│   ├── auth.js      # 认证模块
│   └── layout.js    # 布局状态
├── router/          # 路由配置
│   └── index.js
├── views/           # 页面组件
│   ├── Dashboard.vue
│   └── Login.vue
└── App.vue

三、Pinia 状态管理实现

// stores/auth.js
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: localStorage.getItem('token') || '',
    user: JSON.parse(localStorage.getItem('user') || 'null')
  }),
  actions: {
    login(credentials) {
      // API请求伪代码
      return api.login(credentials).then(res => {
        this.token = res.token;
        this.user = res.user;
        localStorage.setItem('token', res.token);
      });
    },
    logout() {
      this.token = '';
      this.user = null;
      localStorage.removeItem('token');
    }
  },
  getters: {
    isAuthenticated: state => !!state.token
  }
});

四、响应式布局核心

<!-- App.vue -->
<template>
  <el-container class="h-screen">
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <Sidebar :collapse="isCollapse" />
    </el-aside>
    <el-container>
      <el-header>
        <Header @toggle-collapse="isCollapse = !isCollapse" />
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import Sidebar from './components/Sidebar.vue';
import Header from './components/Header.vue';

const isCollapse = ref(false);
</script>

五、路由守卫实现

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '@/stores/auth';

const routes = [
  { path: '/login', component: () => import('@/views/Login.vue') },
  { 
    path: '/', 
    component: () => import('@/layouts/MainLayout.vue'),
    meta: { requiresAuth: true },
    children: [
      { path: '', component: () => import('@/views/Dashboard.vue') }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.beforeEach((to) => {
  const auth = useAuthStore();
  if (to.meta.requiresAuth && !auth.isAuthenticated) {
    return '/login';
  }
});

六、响应式设计要点

1. 断点处理（使用 Element Plus 响应式工具）

<el-col :xs="24" :sm="12" :md="8" :lg="6">
  <DashboardCard />
</el-col>

1. 自适应侧边栏

// stores/layout.js
import { defineStore } from 'pinia';
import { useWindowSize } from '@vueuse/core';

export const useLayoutStore = defineStore('layout', {
  state: () => ({
    sidebarCollapse: false
  }),
  actions: {
    autoCollapse() {
      const { width } = useWindowSize();
      this.sidebarCollapse = width.value < 768;
    }
  }
});

七、功能模块示例（用户管理）

<!-- views/UserManagement.vue -->
<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const { users, loading } = storeToRefs(userStore);

onMounted(() => {
  userStore.fetchUsers();
});
</script>

<template>
  <el-table :data="users" v-loading="loading">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="role" label="角色" />
  </el-table>
</template>

八、优化实践

1. 按需加载组件

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
});

1. API 请求封装

// utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000
});

// 请求拦截
service.interceptors.request.use(config => {
  const auth = useAuthStore();
  if (auth.token) {
    config.headers.Authorization = `Bearer ${auth.token}`;
  }
  return config;
});

九、部署准备

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

关键提示：

1. 使用 Vue 3 的 <script setup> 语法提升开发效率
2. 通过 Pinia 的 storeToRefs 保持响应式解构
3. 结合 VueUse 的响应式工具简化窗口尺寸处理
4. 采用 Element Plus 的响应式布局组件实现多端适配

此实现方案具备以下特点：

• ✅ 基于 Vue 3 Composition API
• ✅ Pinia 状态分层管理
• ✅ 响应式布局自适应
• ✅ 路由级权限控制
• ✅ 生产环境优化构建