引言
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/cli2. 创建项目
使用 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<template>
2 <div>
3 <el-form :model="form" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
4 <el-form-item label="用户名" prop="username">
5 <el-input type="text" v-model="form.username" autocomplete="off"></el-input>
6 </el-form-item>
7 <el-form-item label="密码" prop="password">
8 <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
9 </el-form-item>
10 <el-form-item>
11 <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
12 <el-button @click="resetForm('loginForm')">重置</el-button>
13 </el-form-item>
14 </el-form>
15 </div>
16</template>
17
18<script>
19export default {
20 data() {
21 return {
22 form: {
23 username: '',
24 password: ''
25 },
26 rules: {
27 username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
28 password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
29 }
30 };
31 },
32 methods: {
33 submitForm(formName) {
34 this.$refs[formName].validate(valid => {
35 if (valid) {
36 this.$store.dispatch('login', this.form).then(() => {
37 this.$router.push('/');
38 });
39 } else {
40 console.log('error submit!!');
41 return false;
42 }
43 });
44 },
45 resetForm(formName) {
46 this.$refs[formName].resetFields();
47 }
48 }
49};
50</script>7. 主布局
创建一个主布局组件 src/components/Layout.vue，用于包含导航栏、侧边栏和主要内容区域。
Javascript
1<template>
2 <div id="app">
3 <el-container>
4 <el-header>
5 <el-menu
6 mode="horizontal"
7 background-color="#545c64"
8 text-color="#fff"
9 active-text-color="#ffd04b"
10 >
11 <el-menu-item index="/">首页</el-menu-item>
12 <el-menu-item index="/users">用户管理</el-menu-item>
13 <!-- 更多菜单项 -->
14 </el-menu>
15 </el-header>
16 <el-main>
17 <router-view></router-view>
18 </el-main>
19 </el-container>
20 </div>
21</template>
22
23<script>
24export default {
25 name: 'Layout'
26}
27</script>8. 用户管理页面
创建一个用户管理页面 src/views/Users.vue。
Javascript
1<template>
2 <div>
3 <el-table :data="tableData">
4 <el-table-column prop="name" label="姓名" width="180"></el-table-column>
5 <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
6 <el-table-column prop="role" label="角色"></el-table-column>
7 </el-table>
8 </div>
9</template>
10
11<script>
12export default {
13 data() {
14 return {
15 tableData: [
16 { name: 'Tom', email: 'tom@example.com', role: 'Admin' },
17 { name: 'Jerry', email: 'jerry@example.com', role: 'User' }
18 ]
19 };
20 }
21}
22</script>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