使用 Vue 2.x + Element UI 搭建后台管理系统详解

引言

Vue.js 是一个非常流行的前端框架，而 Element UI 是基于 Vue 2.x 的一套完整的 UI 组件库，非常适合用来构建企业级的后台管理系统。本文将详细介绍如何使用 Vue 2.x 和 Element UI 来搭建一个后台管理系统，包括项目初始化、路由配置、状态管理、权限验证等关键步骤。

vue2后台管理项目源码合集下载地址见最下方

1. 环境准备

确保你的开发环境中已安装 Node.js 和 npm。接下来，我们将使用 Vue CLI 3.x 来创建一个新的 Vue 项目。

Bash

1npm install -g @vue/cli

2. 创建项目

使用 Vue CLI 创建一个新的 Vue 项目，并选择手动安装特性。

Bash

1vue create backend-admin
2cd backend-admin

在项目初始化过程中，选择以下特性：

• Babel
• Router
• Vuex
• Linter (可选)
• Unit Testing (可选)

3. 安装 Element UI

Element UI 是一套基于 Vue 2.x 的桌面端组件库，非常适合用来构建后台管理系统。

Bash

1npm install element-ui --save

接着，在 main.js 文件中引入 Element UI 并使用它。

Javascript

1import Vue from 'vue'
2import App from './App.vue'
3import router from './router'
4import store from './store'
5import ElementUI from 'element-ui';
6import 'element-ui/lib/theme-chalk/index.css';
7
8Vue.use(ElementUI);
9
10Vue.config.productionTip = false
11
12new Vue({
13  router,
14  store,
15  render: h => h(App)
16}).$mount('#app')

4. 路由配置

创建路由配置文件 src/router/index.js。

Javascript

1import Vue from 'vue'
2import Router from 'vue-router'
3import Home from '../views/Home.vue'
4import Login from '../views/Login.vue'
5
6Vue.use(Router)
7
8export default new Router({
9  mode: 'history',
10  base: process.env.BASE_URL,
11  routes: [
12    {
13      path: '/',
14      name: 'home',
15      component: Home
16    },
17    {
18      path: '/login',
19      name: 'login',
20      component: Login
21    }
22  ]
23})

5. 状态管理（Vuex）

创建 Vuex store 文件 src/store/index.js。

Javascript

1import Vue from 'vue'
2import Vuex from 'vuex'
3
4Vue.use(Vuex)
5
6export default new Vuex.Store({
7  state: {
8    token: '',
9    user: null,
10    permissions: []
11  },
12  mutations: {
13    SET_TOKEN: (state, token) => {
14      state.token = token
15    },
16    SET_USER: (state, user) => {
17      state.user = user
18    },
19    SET_PERMISSIONS: (state, permissions) => {
20      state.permissions = permissions
21    }
22  },
23  actions: {
24    login({ commit }, userInfo) {
25      return new Promise((resolve, reject) => {
26        // 这里应该是发送请求到后端登录接口
27        // 假设登录成功，返回一个 token
28        const token = 'fake-token'
29        commit('SET_TOKEN', token)
30        resolve()
31      })
32    }
33  },
34  getters: {
35    isLogged: state => !!state.token,
36    currentUser: state => state.user,
37    currentPermissions: state => state.permissions
38  }
39})

6. 登录页面

创建登录页面 src/views/Login.vue。

Javascript

1
17
18

7. 主布局

创建一个主布局组件 src/components/Layout.vue，用于包含导航栏、侧边栏和主要内容区域。

Javascript

1
22
23

8. 用户管理页面

创建一个用户管理页面 src/views/Users.vue。

Javascript

1
10
11

9. 权限验证

为了实现权限验证，我们需要在路由守卫中添加逻辑。

Javascript

1// src/router/index.js
2import Vue from 'vue'
3import Router from 'vue-router'
4import Home from '../views/Home.vue'
5import Login from '../views/Login.vue'
6import store from '../store'
7
8Vue.use(Router)
9
10const originalPush = Router.prototype.push
11Router.prototype.push = function push(location) {
12  return originalPush.call(this, location).catch(err => err)
13}
14
15export default new Router({
16  mode: 'history',
17  base: process.env.BASE_URL,
18  routes: [
19    {
20      path: '/',
21      name: 'home',
22      component: Home,
23      meta: { requiresAuth: true }
24    },
25    {
26      path: '/login',
27      name: 'login',
28      component: Login
29    }
30  ]
31})
32
33router.beforeEach((to, from, next) => {
34  if (to.matched.some(record => record.meta.requiresAuth)) {
35    if (!store.getters.isLogged) {
36      next({
37        path: '/login',
38        query: { redirect: to.fullPath }
39      })
40    } else {
41      next()
42    }
43  } else {
44    next()
45  }
46})

10. 部署

部署 Vue 项目到服务器。确保服务器能够正确处理静态文件，并配置正确的 publicPath。

Javascript

1// vue.config.js
2module.exports = {
3  publicPath: process.env.NODE_ENV === 'production' ? '/backend-admin/' : '/'
4}

结语

至此，你已经成功搭建了一个基于 Vue 2.x 和 Element UI 的后台管理系统。通过本文的指导，你应该能够理解如何创建一个基本的后台管理系统，并具备一定的扩展能力，例如添加更多的功能页面、完善权限管理等。如果你在开发过程中遇到问题，欢迎随时查阅官方文档或社区资源。

vue2后台管理源码合集下载地址：https://download.csdn.net/download/qq_42072014/89488410