概述
本文将介绍如何基于Vue3和element-ui搭建一个后台管理系统框架模板。我们将详细讲解代码流程，并提供详细的说明。
技术栈
前置知识
本文假设读者已经熟悉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”，按回车键确认选择。
-
等待依赖安装完成，项目创建成功。
步骤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的使用方法，以及如何构建后台管理系统框架模板。
