概述
本文将介绍如何基于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”,按回车键确认选择。
-
等待依赖安装完成,项目创建成功。
步骤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中添加菜单对应的路由信息:文章来源:https://www.toymoban.com/news/detail-425872.html
const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ]
总结
本文介绍了如何基于Vue3和Element-ui搭建一个后台管理系统框架模板。我们从创建Vue3项目、安装和配置Element-ui、封装Axios、创建路由、创建页面和创建菜单等方面进行了详细的讲解。希望本文能够帮助读者更好地理解Vue3和Element-ui的使用方法,以及如何构建后台管理系统框架模板。文章来源地址https://www.toymoban.com/news/detail-425872.html
到了这里,关于Vue3 + Element-UI 搭建一个后台管理系统框架模板的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!