使用 Vue.js 2.x 搭建后台管理系统

不知名靓仔

于 2024-08-04 14:34:51 发布

阅读量478

点赞数 31

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42072014/article/details/140905926

版权

引言

Vue.js 是一款轻量级且功能强大的前端框架，非常适合用来开发复杂的单页面应用程序 (SPA)。本文将详细介绍如何使用 Vue.js 2.x 版本构建一个功能完善的后台管理系统。

vue2后台管理项目合集见最下方

1. 环境准备

在开始之前，确保你的开发环境中安装了以下软件：

Node.js (推荐使用 LTS 版本)
npm (Node.js 自带)

2. 创建项目

我们可以使用 Vue CLI 脚手架工具快速创建项目。如果还没有安装 Vue CLI，请运行以下命令进行安装：

Bash

深色版本

1npm install -g @vue/cli

创建一个新的 Vue 项目：

Bash

深色版本

1vue create vue-admin-system
2cd vue-admin-system

3. 项目结构

一个典型的后台管理系统应该具备以下组件和文件夹：

src 文件夹包含项目的主要源码
- assets: 存放静态资源如图片等
- components: 存放复用的 UI 组件
- router: Vue Router 配置
- store: Vuex 状态管理
- views: 应用的主要视图组件
- App.vue: 主组件
- main.js: 应用入口文件

4. 使用 Vue Router

为了实现 SPA 的路由功能，我们需要安装并配置 Vue Router。在项目根目录下安装 Vue Router：

Bash

深色版本

1npm install vue-router

配置路由模块 src/router/index.js：

Javascript

深色版本

1import Vue from 'vue'
2import Router from 'vue-router'
3import Home from '../views/Home.vue'
4
5Vue.use(Router)
6
7export default new Router({
8  routes: [
9    {
10      path: '/',
11      name: 'home',
12      component: Home
13    },
14    // 其他路由...
15  ]
16})

在 src/main.js 中引入路由：

Javascript

深色版本

1import Vue from 'vue'
2import App from './App.vue'
3import router from './router'
4
5Vue.config.productionTip = false
6
7new Vue({
8  router,
9  render: h => h(App)
10}).$mount('#app')

5. 使用 Vuex 管理状态

对于复杂的应用程序，我们通常需要集中管理应用的状态。安装 Vuex：

Bash

深色版本

1npm install vuex

配置 Vuex 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    user: null
9  },
10  mutations: {
11    setUser(state, user) {
12      state.user = user
13    }
14  },
15  actions: {
16    login({ commit }, user) {
17      // 登录逻辑
18      commit('setUser', user)
19    }
20  }
21})

在 src/main.js 中引入 Vuex：

Javascript

深色版本

1import Vue from 'vue'
2import App from './App.vue'
3import router from './router'
4import store from './store'
5
6Vue.config.productionTip = false
7
8new Vue({
9  router,
10  store,
11  render: h => h(App)
12}).$mount('#app')

6. 添加 UI 框架

为了加速开发进程，我们可以选择一个 UI 框架。Element UI 是一个流行的 Vue UI 组件库，适合后台管理系统。

Bash

深色版本

1npm install element-ui --save

在 src/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
10new Vue({
11  router,
12  store,
13  render: h => h(App)
14}).$mount('#app')

7. 设计布局

后台管理系统通常包含一个侧边栏和顶部导航栏，我们可以使用 Element UI 提供的组件来设计布局。

在 src/views/Layout.vue 中创建一个基本的布局模板：

Html

深色版本

1<template>
2  <div id="app">
3    <el-container>
4      <el-aside width="200px">
5        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
6          <el-menu-item index="/home">首页</el-menu-item>
7          <!-- 其他菜单项 -->
8        </el-menu>
9      </el-aside>
10      <el-container>
11        <el-header>
12          <el-row>
13            <el-col :span="16">
14              <el-breadcrumb separator-class="el-icon-arrow-right">
15                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
16                <el-breadcrumb-item v-if="$route.name">{{ $route.name }}</el-breadcrumb-item>
17              </el-breadcrumb>
18            </el-col>
19            <el-col :span="8">
20              <el-dropdown trigger="click">
21                <span class="el-dropdown-link">
22                  {{ currentUser.name }} <i class="el-icon-arrow-down el-icon--right"></i>
23                </span>
24                <el-dropdown-menu slot="dropdown">
25                  <el-dropdown-item>个人信息</el-dropdown-item>
26                  <el-dropdown-item>退出登录</el-dropdown-item>
27                </el-dropdown-menu>
28              </el-dropdown>
29            </el-col>
30          </el-row>
31        </el-header>
32        <el-main>
33          <router-view></router-view>
34        </el-main>
35      </el-container>
36    </el-container>
37  </div>
38</template>
39
40<script>
41export default {
42  data() {
43    return {
44      activeIndex: '/home',
45      currentUser: {
46        name: '管理员'
47      }
48    };
49  },
50  methods: {
51    handleSelect(key, keyPath) {
52      this.$router.push(key);
53    }
54  }
55};
56</script>