Vue3 + Element-UI 搭建一个后台管理系统框架模板

概述

本文将介绍如何基于Vue3和element-ui搭建一个后台管理系统框架模板。我们将详细讲解代码流程，并提供详细的说明。

技术栈

Vue3
Element-ui
Axios

前置知识

本文假设读者已经熟悉Vue3和Element-ui的基本使用方法，并且对Axios有一定的了解。

步骤

步骤1：创建Vue3项目

我们可以使用Vue CLI来创建一个Vue3项目，具体步骤如下：

打开命令行工具，在任意目录下输入以下命令：
```
vue create {
      
      项目名称}
```
选择“Manually select features”选项（手动选择特性），按回车键进入下一步。
按下空格键选择以下特性：
- Choose Vue version（选择Vue版本）：选择“3.x”。
- Babel（使用Babel编译器）：选中。
- Router（使用Vue Router进行路由管理）：选中。
- Vuex（使用Vuex进行状态管理）：选中。
- CSS Pre-processors（使用CSS预处理器）：选中。
- Linter / Formatter（使用ESLint进行代码检查和格式化）：选中。
确认选择，按回车键进入下一步。
选择CSS预处理器，我们可以使用Sass或Less，这里以Sass为例，按下空格键选中“Sass/SCSS (with dart-sass)”选项，按回车键确认选择。
确认是否使用history模式进行路由管理，这里我们选择“n”（不使用），按回车键进入下一步。
确认是否安装依赖，我们选择“npm”或“yarn”，按回车键确认选择。
等待依赖安装完成，项目创建成功。

扫描二维码关注公众号，回复： 15194374 查看本文章

步骤2：安装Element-ui

我们可以使用npm或yarn来安装Element-ui，具体步骤如下：

打开命令行工具，在项目根目录下输入以下命令：
```
npm install element-plus --save
或
yarn add element-plus
```
等待依赖安装完成，Element-ui安装成功。

步骤3：配置Element-ui

我们需要在main.js中引入Element-ui并按需引入组件，具体步骤如下：

在main.js中引入Element-ui：

import {
      
       createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

在需要使用的组件中按需引入：

import {
      
       ElButton, ElInput } from 'element-plus'

export default {
      
      
  components: {
      
      
    ElButton,
    ElInput
  }
}

步骤4：封装Axios

我们可以在项目中封装Axios，方便进行网络请求，具体步骤如下：

在src目录下创建一个api目录，用于存放Axios相关代码。

在api目录下创建一个index.js文件，用于封装Axios：

import axios from 'axios'

const instance = axios.create({
      
      
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
  headers: {
      
      
    'Content-Type': 'application/json;charset=utf-8'
  }
})

instance.interceptors.request.use(
  config => {
      
      
    const token = localStorage.getItem('token')
    if (token) {
      
      
      config.headers.Authorization = token
    }
    return config
  },
  error => {
      
      
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  response => {
      
      
    return response.data
  },
  error => {
      
      
    return Promise.reject(error)
  }
)

export default instance

在main.js中引入Axios：

import axios from './api'

const app = createApp(App)

app.config.globalProperties.$http = axios

步骤5：创建路由

我们需要在router/index.js文件中配置路由，具体步骤如下：

在router目录下创建一个index.js文件，用于配置路由：

import {
      
       createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
      
      
    path: '/',
    name: 'Home',
    component: Home
  },
  {
      
      
    path: '/about',
    name: 'About',
    component: About
  }
]

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

export default router

在main.js中引入路由：

import router from './router'

const app = createApp(App)

app.use(router)

步骤6：创建页面

我们需要在views目录下创建页面，具体步骤如下：

在views目录下创建一个Home.vue文件，用于展示首页内容：

<template>
  <div>
    <h1>首页</h1>
    <el-button type="primary">点击按钮</el-button>
  </div>
</template>

<script>
export default {
      
      
  name: 'Home'
}
</script>

<style scoped>
h1 {
      
      
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}
</style>

在views目录下创建一个About.vue文件，用于展示关于页面内容：

<template>
  <div>
    <h1>关于</h1>
    <el-input placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
export default {
      
      
  name: 'About'
}
</script>

<style scoped>
h1 {
      
      
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}
</style>

步骤7：创建菜单

我们可以使用Element-ui的菜单组件创建菜单，具体步骤如下：

在App.vue中添加菜单：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title">导航一</template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="/">首页</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <template slot="title">分组二</template>
                <el-menu-item index="/about">关于</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
      
      
  name: 'App'
}
</script>

在router/index.js中添加菜单对应的路由信息：

const routes = [
  {
      
      
    path: '/',
    name: 'Home',
    component: Home
  },
  {
      
      
    path: '/about',
    name: 'About',
    component: About
  }
]

总结

本文介绍了如何基于Vue3和Element-ui搭建一个后台管理系统框架模板。我们从创建Vue3项目、安装和配置Element-ui、封装Axios、创建路由、创建页面和创建菜单等方面进行了详细的讲解。希望本文能够帮助读者更好地理解Vue3和Element-ui的使用方法，以及如何构建后台管理系统框架模板。