第2天

一. vue3使用element-Plus

有三种引入方法

第一种 完整引入：

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

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import "../src/assets/less/index.less"
import router from "./router"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router).mount('#app')
app.use(ElementPlus)

App.vue:

<template>
  <div>
    <router-view></router-view>
    <el-button>Default</el-button>
    <el-button type="success">Success</el-button>
  </div>
</template>

<script>
export default {

}
</script>

<style> 
#app{
  width:100%;
  height:100%;
  overflow: hidden;
}
</style>

第二种： 自动导入

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

vite.config:

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://vite.dev/config/
export default defineConfig({
  plugins: [vue(), AutoImport({
    resolvers: [ElementPlusResolver()],
  }),
  Components({
    resolvers: [ElementPlusResolver()],
  })
  ],
})

这里我使用的是第一种完整引入

二. 引入图标

mian.js中加入

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

三. 简单实现Main组件

Main.vue:

<template>
  <div class="common-layout">
    <el-container class="lay-container">
     <!-- 左侧 -->
      <common-aside> 
      </common-aside>
      <!-- 右侧 -->
      <el-container>
         <el-header class="el-header">
          <common-header></common-header>
         </el-header>
         <el-main class="right-main">
          main
         </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
 .common-layout,.lay-container{
  height: 100%;
 }
 .el-header{
  background-color: #333;
 }
</style>

实现效果：

四.左侧菜单栏

（这里写了好久，因为没写CommonAside的引入，还有菜单栏的v-for没弄懂）

main.js中加入：

<script>
import { defineAsyncComponent } from 'vue';
export default{
  components:{
    'common-aside':defineAsyncComponent(()=>import('../components/CommonAside.vue'))
  }
}
</script>

CommonAside.vue:

<template>
  <el-aside width="180px">
    <el-menu background-color="#545c64" text-color="#fff">
      <h3>管理平台</h3>

      <el-menu-item
       v-for="item in noChildren" 
      :index="item.path"
      :key="item.path">
        
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.label }}</span>
        </el-menu-item>

        <!-- //有子菜单的 -->
        <el-sub-menu 
        v-for="item in hasChildren" 
        :index="item.path"
        :key="item.path"
        >
          <template #title>
            <component class="icons" :is="item.icon"></component>
            <span>{{ item.label }}</span>
          </template>
          <el-menu-item-group >
            <el-menu-item
            v-for="subItem in item.children" 
            :index="subItem.path"
            :key="subItem.path"
            >
            <component class="icons" :is="subItem.icon"></component>
            <span>{{ subItem.label }}</span>
           </el-menu-item>
            
          </el-menu-item-group>
          
          
        </el-sub-menu>

        
        
      </el-menu>
  </el-aside>
</template>

<script setup>
import {ref,computed} from 'vue'
const list =ref([
      	{
          path: '/home',
          name: 'home',
          label: '首页',
          icon: 'house',
          url: 'Home'
      	},
        {
            path: '/mall',
            name: 'mall',
            label: '商品管理',
            icon: 'video-play',
            url: 'Mall'
        },
        {
            path: '/user',
            name: 'user',
            label: '用户管理',
            icon: 'user',
            url: 'User'
        },
        {
            path: 'other',
            label: '其他',
            icon: 'location',
            children: [
                {
                    path: '/page1',
                    name: 'page1',
                    label: '页面1',
                    icon: 'setting',
                    url: 'Page1'
                },
                {
                    path: '/page2',
                    name: 'page2',
                    label: '页面2',
                    icon: 'setting',
                    url: 'Page2'
                }
            ]
        }
])

const noChildren=computed(()=>list.value.filter(item=>!item.children))
const hasChildren=computed(()=>list.value.filter(item=>item.children))


</script>

<style lang="less" scoped>

.icons {
  width:18px;
  height:18px;

}
.el-menu{
  border-right:none;
  h3 {
    line-height: 48px;
    color: #fff;
    text-align: center;
    }
}
.el-aside{
   height:100%;
   background-color: #545c64;
}

</style>

五.Header部分

CommonHeader.vue: 增加了面包屑，头像下拉菜单

<template>
  <div class="header">
      <div class="l-content">
        <el-button size="small">
           <component class="icons" :is="menu"></component>
        </el-button>
        <el-breadcrumb separator="/" class="bread">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="r-content">
        <el-dropdown>
            <span class="el-dropdown-link">
                <img :src="getImageUrl(user)" class="user"/>
            </span>
            <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
                
            </el-dropdown-menu>
            </template>
        </el-dropdown>
      </div>

  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const user = ref('defaultUser') // 定义 user 变量
    const getImageUrl = (user) => {
      return new URL(`../assets/images/${user}.png`, import.meta.url).href
    }

    return {
      user,
      getImageUrl
    }
  }
}
</script>

<style>
 .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #333;
 }
 .icons {
     width: 20px;
     height: 20px;

 }
 .l-content {
    display: flex;
    align-items: center;
    
 }
 .el-button {
        margin-right: 20px;
    }

     .user {
        width: 40px;
        height: 40px;
        border-radius: 50% ;

     }
:deep(.bread span){
    color: #fff !important;
    cursor: pointer !important;
}
.el-breadcrumb-item {
    cursor: pointer !important;
}
</style>

页面显示结果：