1. 安装Element-plus

1.1 安装组件库

• 执行安装

 $ npm install element-plus --save

安装完成以后，会在package.json中多出下面的选项

   "dependencies": {
     "element-plus": "^2.7.2",
     ...
   }, 

需要注意的是，由于时间问题，你安装的可能与我目前版本不同，只要成功安装即可。

1.2 设置element-plus配置

• 由于element-plus的导入方式有多种，在本套课程中，我们采用主流的“按需导入”的方式。
• 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件，并执行下发指令：

 npm install -D unplugin-vue-components unplugin-auto-import 

• 修改项目下vite.config.js内容如下：

 import { fileURLToPath, URL } from 'node:url'
 
 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'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     AutoImport({
       resolvers: [ElementPlusResolver()],
     }),
     Components({
       resolvers: [ElementPlusResolver()],
     }),
     vue(),
   ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   }
 })
  

2. 管理页Layout布局

2.1 新建组件

• 新建 src/components/admin/MainHeader.vue 组件，内容如下：

 <template>
  <div class="sub-head">
    <div class="user">
      <el-icon :size="14"><User /></el-icon> 李小三
    </div>
    <div class="quit">
      <el-icon :size="14"><Remove /></el-icon> 退出
    </div>
  </div>
 </template>
 
 <script setup>
 import { User, Remove } from '@element-plus/icons-vue'
 
 
 </script>
 
 <style scoped>
 
 </style> 

• 新建左侧菜单栏组件 src/components/admin/MainSider.vue 内容如下：

 <template>
   <el-menu
     default-active="1"
     class="el-menu-vertical-width"
     text-color="#fff"
     @open="handleOpen"
     @close="handleClose"
   >
     <el-sub-menu index="1">
       <template #title>
         <el-icon><Setting /></el-icon>
         <span>系统设置</span>
       </template>
       <el-menu-item-group>
         <el-menu-item index="1-1">用户管理</el-menu-item>
         <el-menu-item index="1-2">菜单管理</el-menu-item>
       </el-menu-item-group>
     </el-sub-menu>
     <el-sub-menu index="2">
       <template #title>
         <el-icon><Files /></el-icon>
         <span>内容管理</span>
       </template>
       <el-menu-item-group>
         <el-menu-item index="2-1">分类管理</el-menu-item>
         <el-menu-item index="2-2">文章管理</el-menu-item>
       </el-menu-item-group>
     </el-sub-menu>
   </el-menu>
 </template>
 
 <script setup>
 import {
   Files,
   Setting,
 } from '@element-plus/icons-vue'
 const handleOpen = (key, keyPath) => {
   console.log(key, keyPath)
 }
 const handleClose = (key, keyPath) => {
   console.log(key, keyPath)
 }
 </script>
 
 <style scoped>
 
 </style> 

• 创建 src/views/admin/main.vue 文件并引入上述两个公共组件文件，内容如下：

 <template>
   <div class="common-layout">
     <el-container>
       <el-aside width="200px">
         <div class="admin-header">
           <div class="admin-logo">
             <img src="../../assets/admin/images/logo.png" 
                  style="width: 30px; height: 30px;">
             <h1 class="padding-l">管理CMS</h1>
           </div>
         </div>
         <div>
           <MainSide />
         </div>
       </el-aside>
       <el-container>
         <el-header>
           <MainHeader />
         </el-header>
         <el-main>
           <router-view />
         </el-main>
       </el-container>
     </el-container>
   </div>
 </template>
 
 
 <script setup>
 import MainSide from '@/components/admin/MainSider.vue'
 import MainHeader from '@/components/admin/MainHeader.vue'
 
 </script>
 
 <style scoped>
 </style> 

• 创建管理页默认主机，即main内的欢迎页，以后可以做后台看板页 src/views/admin/workplace/index.vue，内容如下：

 <template>
   <div>
     <h1>默认页，管理员控制台</h1>
   </div>
 </template>
 
 <script setup>
 
 </script>
 
 <style scoped>
 
 </style> 

• 修改并添加路由信息 src/router/index.js 新增路由后的内容如下：

 import { createRouter, createWebHistory } from 'vue-router'
 
 const routes = [
   {
     path: '/main',
     component: () => import('@/views/admin/main.vue'),
     meta: {requiresAuth: true, title: '后台管理'},
     children: [
       { path: '', component: () => import('@/views/admin/workplace/index.vue') },
     ]
   },
 ];
 
 const router = createRouter({
   history: createWebHistory(),
   routes
 })
 
 export default router 

• 将静态文件Logo添加到 src/assets/admin/images/logo.png，图片文件：

• 并创建样式文件main.css路径 src/assets/admin/css/main.css 内容如下：

 /*后台主页全局页边距设置*/
 * {
     margin: 0;
     padding: 0;
 }
 /*正文字体大小*/
 body {
     font-size: 14px;
 }
 /*后台主页默认超链接样式*/
 a {
     outline: none;
     text-decoration: none;
     cursor: pointer;
 }
 /*去除默认ul与li的样式*/
 ul,li {
     list-style-type: none;
 }
 
 /*后台主页顶部背景*/
 .el-header {
     line-height: 55px;
     background-color: #32A3D5;
     color: #fff;
     font-size: 16px;
 }
 /*头部右侧样式*/
 .sub-head {
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }
 /*用户头像与文字之间间距*/
 .sub-head .padding-user{
     margin-left:5px;
 }
 /*退出按钮与头像间的间距*/
 .sub-head .quit {
     margin-left:15px;
 }
 
 /*后台主页左侧菜单栏*/
 .el-aside{
     background-color: #00162A;
     color: #fff;
     height: 100vh;
     box-sizing: border-box;
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
 /*Logo与文字部分*/
 .admin-header .admin-logo {
     transition: width .2s, left .2s;
     white-space: nowrap;
     position: relative;
     overflow: hidden;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 20px auto;
 }
 /*LOGO与文字间距*/
 .admin-header .padding-l {
     margin-left:10px
 }
 /*菜单的背景色去除*/
 .el-menu {
     background-color: transparent !important;
     border-right: 0 !important;
 }
 /*左侧菜单文字颜色*/
 .el-sub-menu__title {
     color: #fff !important;
 }
 /*左侧菜单鼠标经过背景色*/
 .el-sub-menu__title:hover{
     background-color: #142F47 !important;
 }
 /*左侧二级菜单选中后的样式*/
 .el-menu-item.is-active {
     background-color: #142F47 !important;
 }
 .el-menu-item:hover {
     background-color: #142F47 !important;
 }
 /*调整菜单宽度*/
 .el-menu-vertical-width:not(.el-menu--collapse) {
     width: 200px;
     min-height: 400px;
 }
  

• 将样式文件assets/admin/css/main.css导入到main.js文件中，修改后的内容如下：

 import './assets/admin/css/main.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
 
 app.mount('#app')