Environment Setup

Ensure the development environment is prepared with Node.js version 21.7 or higher. While the legacy Vue CLI is available, using Vite is the recommended approach for modern Vue 3 projects due to its faster build times.

# Initialize a new Vite project
npm create vite@latest my-admin-panel -- --template vue

# Navigate to the directory
cd my-admin-panel

# Install dependencies
npm install

# Add Element Plus and required auto-import plugins
npm install element-plus unplugin-auto-import unplugin-vue-components -D

Build Configuration

Configure the build tool to handle automatic imports. This optimizes the bundle size by only including the specific Element Plus components used in the application.

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

Application Entry Point

Register the library in the main entry file. Although auto-import is configured for components, registering the stylesheet and the app instance is necessary.

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // Assuming routing is set up

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const appInstance = createApp(App)

appInstance.use(router)
appInstance.use(ElementPlus)
appInstance.mount('#app')

Component Implementation

Below is an example of a functional button panel using the Composition API. Note the use of specific icon components imported from the Element Plus icons library.

<template>
  <div class="panel-container">
    <h3>Actions</h3>
    
      Create
      Confirm
      Favorite
      Remove
    
    
    <div class="link-group">
      Documentation
      
      Support
    </div>
  </div>
</template>

<script setup>
import { Plus, Check, Star, Delete, Link } from '@element-plus/icons-vue'
</script>

<style scoped>
.panel-container {
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
.link-group {
  margin-top: 15px;
}
</style>

Layout Structure

Element Plus provides a container layout system to quickly scaffold admin interfaces. The following example demonstrates a classic header-aside-main-footer structure.

<template>
  
    Dashboard Header
    
    
      
        Navigation
      
      
      
        
          Main Content Area
        
        
          © 2023 System Status: Normal
        
      
    
  
</template>

<style scoped>
.layout-wrapper {
  height: 100vh;
  width: 100%;
}
.app-header {
  background-color: #545c64;
  color: #fff;
  line-height: 60px;
}
.app-aside {
  background-color: #d3dce6;
  color: #333;
  line-height: 200px;
}
.app-main {
  background-color: #e9eef3;
  color: #333;
  line-height: 160px;
}
.app-footer {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
</style>