当前位置: article > 正文

Vue3 + Element-UI 搭建一个后台管理系统框架模板_vue3.0+elementplus如何模版

作者：IT小白 | 2024-02-20 06:56:42

踩

vue3.0+elementplus如何模版

概述

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

技术栈

Vue3
Element-ui
Axios

前置知识

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

步骤

步骤1：创建Vue3项目

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

打开命令行工具，在任意目录下输入以下命令：
```
vue create {项目名称}
1
```
选择“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”，按回车键确认选择。
等待依赖安装完成，项目创建成功。

步骤2：安装Element-ui

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

打开命令行工具，在项目根目录下输入以下命令：

npm install element-plus --save
或
yarn add element-plus

1
2
3
4

等待依赖安装完成，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')

1
2
3
4
5
6
7

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

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

export default {
  components: {
    ElButton,
    ElInput
  }
}

1
2
3
4
5
6
7
8
9

步骤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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在main.js中引入Axios：

import axios from './api'

const app = createApp(App)

app.config.globalProperties.$http = axios

1
2
3
4
5
6

步骤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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在main.js中引入路由：

import router from './router'

const app = createApp(App)

app.use(router)

1
2
3
4
5
6

步骤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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

步骤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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

总结

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/118984