Vue3 + Element-UI builds a background management system framework template

overview

This article will introduce how to build a background management system framework template based on Vue3 and element-ui. We will walk through the code flow in detail and provide detailed instructions.

technology stack

View 3
Element-ui
Axios

Pre-knowledge

This article assumes that readers are familiar with the basic usage of Vue3 and Element-ui, and have a certain understanding of Axios.

step

Step 1: Create a Vue3 project

We can use Vue CLI to create a Vue3 project, the specific steps are as follows:

Open the command line tool and enter the following command in any directory:
```
vue create {
      
      项目名称}
```
Select the "Manually select features" option (manually select features), press Enter to enter the next step.
Press the space bar to select the following properties:
- Choose Vue version: Select "3.x".
- Babel (use the Babel compiler): Checked.
- Router (use Vue Router for routing management): Checked.
- Vuex (Use Vuex for state management): Checked.
- CSS Pre-processors (use CSS pre-processors): Selected.
- Linter/Formatter (use ESLint for code checking and formatting): Checked.
Confirm the selection and press Enter to enter the next step.
To select CSS preprocessor, we can use Sass or Less. Here we take Sass as an example. Press the space bar to select the "Sass/SCSS (with dart-sass)" option, and press the Enter key to confirm the selection.
Confirm whether to use history mode for routing management, here we select "n" (not used), press Enter to enter the next step.
Confirm whether to install dependencies, we select "npm" or "yarn", press Enter to confirm the selection.
Wait for the dependency installation to complete and the project to be created successfully.

Step 2: Install Element-ui

We can use npm or yarn to install Element-ui, the specific steps are as follows:

Open the command line tool and enter the following command in the project root directory:
```
npm install element-plus --save
或
yarn add element-plus
```
Wait for the dependency installation to complete, and Element-ui is installed successfully.

Step 3: Configure Element-ui

We need to introduce Element-ui in main.js and import components as needed. The specific steps are as follows:

Introduce Element-ui in main.js:

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')

Introduce as needed in the components that need to be used:

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

export default {
      
      
  components: {
      
      
    ElButton,
    ElInput
  }
}

Step 4: Package Axios

We can encapsulate Axios in the project to facilitate network requests. The specific steps are as follows:

Create an api directory under the src directory to store Axios related codes.

Create an index.js file in the api directory to encapsulate 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

Introduce Axios in main.js:

import axios from './api'

const app = createApp(App)

app.config.globalProperties.$http = axios

Step 5: Create Routes

We need to configure routing in the router/index.js file, the specific steps are as follows:

Create an index.js file in the router directory to configure routing:

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

Introduce routing in main.js:

import router from './router'

const app = createApp(App)

app.use(router)

Step 6: Create Pages

We need to create a page in the views directory, the specific steps are as follows:

Create a Home.vue file in the views directory to display the content of the home page:

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

Create an About.vue file in the views directory to display the content of the about page:

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

Step 7: Create the Menu

We can use the menu component of Element-ui to create a menu, the specific steps are as follows:

Add menu in 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>

Add the routing information corresponding to the menu in router/index.js:

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

Summarize

This article introduces how to build a background management system framework template based on Vue3 and Element-ui. We have given a detailed explanation on creating Vue3 projects, installing and configuring Element-ui, packaging Axios, creating routes, creating pages, and creating menus. I hope this article can help readers better understand how to use Vue3 and Element-ui, and how to build a background management system framework template.