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

青旅半醒 2023-09-26 22:56 143阅读 0赞

### 概述 ###

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

### 技术栈 ###

*  Vue3
 *  Element-ui
 *  Axios

### 前置知识 ###

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

### 步骤 ###

#### 步骤1：创建Vue3项目 ####

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

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

#### 步骤2：安装Element-ui ####

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

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

#### 步骤3：配置Element-ui ####

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

1.  在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')
2.  在需要使用的组件中按需引入：
    
        import {
               ElButton, ElInput } from 'element-plus'
        
        export default {
              
          components: {
              
            ElButton,
            ElInput
          }
        }

#### 步骤4：封装Axios ####

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

1.  在src目录下创建一个api目录，用于存放Axios相关代码。
2.  在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
3.  在main.js中引入Axios：
    
        import axios from './api'
        
        const app = createApp(App)
        
        app.config.globalProperties.$http = axios

#### 步骤5：创建路由 ####

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

1.  在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
2.  在main.js中引入路由：
    
        import router from './router'
        
        const app = createApp(App)
        
        app.use(router)

#### 步骤6：创建页面 ####

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

1.  在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>
2.  在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的菜单组件创建菜单，具体步骤如下：

1.  在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>
2.  在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的使用方法，以及如何构建后台管理系统框架模板。