一、安装 vue3 脚手架

npm create vue@latest

cd vue-ui-template #切换到刚刚创建好的vue项目根目录中
npm install #下载项目所需要的依赖包
npm run dev #启动运行项目服务

项目启动后，默认页面显示如下：

二、安装element-ui plus

官网链接：http://element-plus.org/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8
element-ui plus
快速上手链接：http://element-plus.org/zh-CN/guide/quickstart.html

npm install element-plus --save 

在main.js中进行全局配置（也可按需配置）
因为我的项目比较小，所以我就在页面中整体引入了。正常的话是按需加载

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

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

三、使用element-ui plus 构建布局

下面是我们要达成的一个布局效果（我之前写过的课设），分为侧边栏和顶部栏以及中间主体内容。

（一）安装使用element-ui plus 的icon组件

http://element-plus.org/zh-CN/component/icon.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8

1. 安装命令

npm install @element-plus/icons-vue

2. 在main.js中进行全局挂载

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

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

（二）布局组件 container

对于element-ui plus的布局组件我就不一一介绍了，这里将使用到的组件链接放出来
container 布局容器 http://element-plus.org/zh-CN/component/container.html

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

我们将这个布局抽离为两个组件，分别为一个header组件和一个aside组件，接下来开始抽离。

（三）模板组件抽离 Aside Header Container

1. Header 组件(src\components\Header.vue)

<script setup>
import { ref } from 'vue'

import { ElMessage } from 'element-plus';
import a11Img from '@/assets/a11.jpeg'  // 导入assets下的图片，自己喜欢啥图加啥图就行
const isCollapse = ref(true)
// 获取父组件传递过来的数据 
const showIcon = defineProps({
    isCollapse: Boolean
})

// 获取父组件自定义的事件
const emit = defineEmits(['changeAside'])

// 自定义按钮点击事件，侧边栏的收缩按钮
const collapseAside = () => {
    emit('changeAside')
}

// 登出按钮
const LogOut = ()=>{}

</script>


<template>
    <div>
        <el-header style="display: flex;font-size: 16px;">
            <div style="display: inline-flex;flex: 1; align-items: center;justify-content: left;">
                <el-icon v-show="!showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
                    <Fold />
                </el-icon>
                <el-icon v-show="showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
                    <Expand />
                </el-icon>
            </div>
            <div class="toolbar"  >
                <div class="block" style="margin-right: 10px;">
                    <el-avatar :size="40" :src="a11Img" />
                </div>
                <span>管理员</span>
                <el-dropdown trigger="click">
                    <el-icon style="margin-left: 18px; margin-top: 1px;color: #303133;">
                        <setting />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>View</el-dropdown-item>
                            <el-dropdown-item>Add</el-dropdown-item>
                            <el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
    </div>
</template>



<style scoped>
.el-header {
    width: 100%;
    background-color: #fff;
    color: var(--el-text-color-primary);
    box-shadow: var(--el-box-shadow);
}

.toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
    text-align: right;
}

.el-dropdown-menu__item {
    width: 120px;
}

.icon-color {
    color: white;
}
</style>

2. Aside组件(src\components\Aside.vue)

<script setup>
import { ref } from 'vue'

const settings = defineProps({
  collapse: Boolean,
  width: String
})

const iconColor = ref('color:#F8FAFB')
</script>


<template>
  <el-aside :width="settings.width">
    <el-scrollbar>
      <el-menu :default-openeds="['1', '3']" 
      :collapse="settings.collapse" active-text-color="#F8FAFB"
        background-color="#1A1C1E" text-color="#74767A" router="true">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <House />
            </el-icon><span>首页</span>
          </template>
          <el-menu-item index="/admin/echatsIndex">首页</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Menu />
            </el-icon><span>文章管理</span>
          </template>
          <el-menu-item index="/admin/articles">文章管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Message />
            </el-icon><span>评论管理</span>
          </template>
          <el-menu-item index="/admin/comments">评论管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Files />
            </el-icon><span>模块管理</span>
          </template>
          <el-menu-item index="/admin/blocks">模块管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon>
              <User />
            </el-icon><span>用户管理</span>
          </template>
          <el-menu-item index="/admin/users">用户管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon>
              <Watermelon />
            </el-icon><span>资源管理</span>
          </template>
          <el-menu-item index="/admin/filesAdmin">资源管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>
            <el-icon>
              <Edit />
            </el-icon><span>编辑器</span>
          </template>
          <el-menu-item index="/admin/md">markdown</el-menu-item>
          <el-menu-item index="/admin/richText">富文本</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="8">
          <template #title>
            <el-icon>
              <setting />
            </el-icon><span>系统设置</span>
          </template>
          <el-menu-item index="/admin/light">背景色</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>


<style scoped>
.el-aside {
  height: 100vh;
  overflow: hidden;
  box-shadow: var(--el-box-shadow-lighter);
}

.el-scrollbar {
  height: 100vh;
  overflow: hidden;
  background-color: #1A1C1E;
}

.el-menu {

  border-right: none;
}
</style>

tips:侧边栏菜单这里我开启了路由，然后对应的index="xxx"都是我要跳转的页面，可以自行修改哈

3. HomeView.vue 视图(src\views\HomeView.vue)

<script setup>
import { ref } from 'vue'


// 组件注册
import Header from '@/components/Header.vue'

import Aside from '@/components/Aside.vue'



const asideSettings = ref({
    isCollapse:true,
    width:'200'
})

// 给子组件绑定事件，通过子组件emit从而改变父组件的值
const changeAside = ()=>{
   asideSettings.value.isCollapse = !asideSettings.value.isCollapse
   if(asideSettings.value.isCollapse){
    asideSettings.value.width = "64"
   }else{
    asideSettings.value.width = "200"
   }
}



</script>
<template>
  <el-container style="min-height: 100vh;min-width: 100vw;overflow: hidden;">
    <Aside :collapse="asideSettings.isCollapse" :width="asideSettings.width"></Aside>
    <el-container style="height: 100vh;width:100%;display: flex;flex-direction: column;">
      <Header :isCollapse="asideSettings.isCollapse"  @changeAside="changeAside"></Header>
      <el-main>
        <div>
         <el-card>
          <h1>文本内容</h1>
         </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>



<style scoped>

body{
  background-color: #eee;
  max-width: 100vw;
  overflow: hidden;
}

.el-main {
  width: 100%;
  padding: 0;
  height: 100vh;
  overflow-x: hidden;
}

</style>

4. App.vue修改(src\App.vue)

<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <div>
    <RouterView></RouterView>
  </div>
</template>

<style scoped>

</style>

5. vue3的默认css调优 (src\assets\main.css)

@import './base.css';

#app {
  /* max-width: 1280px; */
  margin: 0 auto;
  /* padding: 2rem; */
  min-width: 100vw;
  min-height: 100vh;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* padding: 0 2rem; */
  }
}

tips:最终的项目结构为下图，黄色标注为修改过的文件，红色文件标注的为新增的文件

6. 页面效果

蹲一个赞 b(￣▽￣)d ★,°:.☆(￣▽￣)/$:.°★ 。

以上代码的全部文件 :百度网盘链接: https://pan.baidu.com/s/1WtepwERvqIoq_tYm0BwwSg 提取码: 5kmx

git仓库地址 https://gitee.com/zhweb2022/vue-ui-template
克隆命令：git clone [email protected]:zhweb2022/vue-ui-template.git