vue3.0后台管理系统案例

Vue 3.0 是一个流行的前端框架，特别适合用于构建现代化的后台管理系统。以下是一个基于 Vue 3.0 的后台管理系统案例的介绍：

### 项目结构

1. **目录结构**

    src/
    ├── assets/          # 静态资源
    ├── components/      # 公共组件
    ├── router/          # 路由配置
    ├── store/           # Vuex 状态管理
    ├── views/           # 页面组件
    ├── App.vue          # 根组件
    └── main.js          # 入口文件

2. **主要技术栈**
- Vue 3.0
- Vue Router 4
- Vuex 4
- Element Plus（UI 组件库）
- Axios（HTTP 请求库）

### 功能模块

1. **用户认证**
- 登录
- 注册
- 权限管理

2. **仪表盘**
- 数据统计
- 图表展示

3. **用户管理**
- 用户列表
- 用户编辑
- 用户删除

4. **角色管理**
- 角色列表
- 角色编辑
- 角色权限分配

5. **系统设置**
- 系统配置
- 日志管理

### 关键代码示例

1. **路由配置**

    // src/router/index.js
    import { createRouter, createWebHistory } from 'vue-router';
    import Login from '../views/Login.vue';
    import Dashboard from '../views/Dashboard.vue';

    const routes = [
      {
        path: '/',
        name: 'Login',
        component: Login
      },
      {
        path: '/dashboard',
        name: 'Dashboard',
        component: Dashboard,
        meta: { requiresAuth: true }
      }
    ];

    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    });

    router.beforeEach((to, from, next) => {
      if (to.meta.requiresAuth) {
        const token = localStorage.getItem('token');
        if (token) {
          next();
        } else {
          next('/');
        }
      } else {
        next();
      }
    });

    export default router;

2. **状态管理**

    // src/store/index.js
    import { createStore } from 'vuex';
    import auth from './modules/auth';
    import users from './modules/users';

    export default createStore({
      modules: {
        auth,
        users
      }
    });

3. **登录页面**

    <!-- src/views/Login.vue -->
    <template>
      <div>
        <el-form @submit.prevent="handleLogin">
          <el-form-item label="用户名">
            <el-input v-model="username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <script>
    import { ref } from 'vue';
    import { useStore } from 'vuex';
    import { useRouter } from 'vue-router';

    export default {
      name: 'Login',
      setup() {
        const username = ref('');
        const password = ref('');
        const store = useStore();
        const router = useRouter();

        const handleLogin = () => {
          store.dispatch('auth/login', { username: username.value, password: password.value }).then(() => {
            router.push('/dashboard');
          });
        };

        return {
          username,
          password,
          handleLogin
        };
      }
    };
    </script>

### 总结

这个案例展示了如何使用 Vue 3.0 构建一个基本的后台管理系统。通过合理的目录结构和模块化设计，可以使项目更加清晰和易于维护。