十六、从零搭建一个 Vue 3 后台管理系统：完整实战教程

最新推荐文章于 2025-04-17 15:34:52 发布

码说数字化

最新推荐文章于 2025-04-17 15:34:52 发布

阅读量1.5k

点赞数 14

分类专栏： # VUE实战文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/lb320/article/details/146185953

版权

VUE实战专栏收录该内容

19 篇文章

订阅专栏

Vue 3 作为当下最为流行的前端框架之一，凭借其简洁的 API 以及强大的性能，已然成为构建后台管理系统的首选工具。本文将一步一步地引导你从零开始搭建一个 Vue 3 后台管理系统，内容涵盖路由、权限管理、状态管理等核心功能，并且会通过实际示例助力你掌握这些技术。

一、项目初始化

（一）创建 Vue 3 项目

利用 Vue CLI 能够快速创建一个 Vue 3 项目，具体操作如下：

npm install -g @vue/cli
vue create vue3-admin

在创建项目的过程中，你可以选择 Vue 3 和 TypeScript（此步骤可选）。

（二）安装依赖

进入项目目录并安装项目所需的依赖：

cd vue3-admin
npm install vue-router@next vuex@next axios element-plus

各依赖的作用如下：

vue-router：主要用于路由管理。
vuex：用于状态管理。
axios：用于网络请求。
element-plus：是一个 UI 组件库。

二、路由管理

（一）配置路由

在 src/router/index.ts 文件中进行路由的配置，示例代码如下：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        component: () => import('@/views/Home.vue'),
        meta: { title: '首页' },
    },
    {
        path: '/login',
        component: () => import('@/views/Login.vue'),
        meta: { title: '登录' },
    },
    {
        path: '/dashboard',
        component: () => import('@/views/Dashboard.vue'),
        meta: { title: '仪表盘', requiresAuth: true },
    },
];

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

export default router;

（二）路由守卫

在 src/router/index.ts 文件中添加路由守卫，以此实现权限控制，代码如下：

import { useStore } from 'vuex';

router.beforeEach((to, from, next) => {
    const store = useStore();
    const isAuthenticated = store.state.user.isAuthenticated;

    if (to.meta.requiresAuth && !isAuthenticated) {
        next('/login');
    } else {
        next();
    }
});

三、状态管理

（一）配置 Vuex

在 src/store/index.ts 文件中进行 Vuex 的配置：

import { createStore } from 'vuex';

export default createStore({
    state: {
        user: {
            isAuthenticated: false,
            username: '',
        },
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
        },
    },
    actions: {
        login({ commit }, credentials) {
            // 模拟登录
            return new Promise((resolve) => {
                setTimeout(() => {
                    commit('setUser', {
                        isAuthenticated: true,
                        username: credentials.username,
                    });
                    resolve();
                }, 1000);
            });
        },
        logout({ commit }) {
            commit('setUser', {
                isAuthenticated: false,
                username: '',
            });
        },
    },
});

（二）在组件中使用 Vuex

在 src/views/Login.vue 组件中运用 Vuex 来管理登录状态，代码如下：

<template>
    <el-form @submit.prevent="handleLogin">
        <el-form-item label="用户名">
            <el-input v-model="username" />
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="password" type="password" />
        </el-form-item>
        <el-button type="primary" native-type="submit">登录</el-button>
    </el-form>
</template>

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

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

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

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

四、权限管理

（一）动态路由

依据用户权限动态加载路由，在 src/router/index.ts 文件中进行如下操作：

// src/router/index.ts
import { useStore } from 'vuex';

const dynamicRoutes: RouteRecordRaw[] = [
    {
        path: '/admin',
        component: () => import('@/views/Admin.vue'),
        meta: { title: '管理员', requiresAuth: true, requiresAdmin: true },
    },
];

router.beforeEach(async (to, from, next) => {
    const store = useStore();
    const isAuthenticated = store.state.user.isAuthenticated;
    const isAdmin = store.state.user.isAdmin;

    if (to.meta.requiresAuth && !isAuthenticated) {
        next('/login');
    } else if (to.meta.requiresAdmin && !isAdmin) {
        next('/');
    } else {
        if (isAuthenticated && !router.hasRoute('admin')) {
            dynamicRoutes.forEach((route) => router.addRoute(route));
        }
        next();
    }
});

（二）按钮权限

在组件里根据用户权限控制按钮的显示，示例代码如下：

<template>
    <el-button v-if="hasPermission('create')">创建</el-button>
</template>

<script>
import { useStore } from 'vuex';

export default {
    setup() {
        const store = useStore();
        const hasPermission = (permission) => {
            return store.state.user.permissions.includes(permission);
        };

        return {
            hasPermission,
        };
    },
};
</script>

五、网络请求

（一）封装 Axios

在 src/utils/request.ts 文件中对 Axios 进行封装：

import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 10000,
});

instance.interceptors.request.use((config) => {
    const token = localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

export default instance;

（二）在组件中使用

在 src/views/Dashboard.vue 组件中使用封装后的 Axios，代码如下：

<template>
    <div>
        <p>数据：{{ data }}</p>
    </div>
</template>

<script>
import request from '@/utils/request';
import { ref, onMounted } from 'vue';

export default {
    setup() {
        const data = ref(null);

        onMounted(async () => {
            const response = await request.get('/data');
            data.value = response.data;
        });

        return {
            data,
        };
    },
};
</script>