从0-1搭建后台管理系统(01)-Layout布局

因为项目搭建的文章之前有做过笔记了，这里就不再赘述了，直接从Layout布局开始！

后台管理系统的布局一般分为三个固定区域：头部导航、侧边栏菜单以及主要内容区域。在此项目中我选择如下的这种布局：

需要做的事情

创建layout文件夹（跟layout有关的组件等等全部放到这个文件夹下）
router/目录下声明constant.ts文件夹（用来存放layout布局组件）
App.vue组件中添加路由视图组件router-view

安装Element Plus，使用Container组件进行布局

安装element-plus

pnpm add element-plus

pnpm add --save-dev unplugin-element-plus

因为我选择的是手动按需引入组件，所以需要安装unplugin-element-plus。

vite.config.ts添加配置

 // vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'

export default {
   plugins: [
     ElementPlus({}),
   ],
 }

插件会自动转换，无需自己手动再引入相关组件的样式表文件：

import { ElButton } from 'element-plus'
//    ↓ ↓ ↓ ↓ ↓ ↓
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

plugins/目录下创建element-plus.ts文件

element-plus.ts专门用来存放手动引入的饿了么的组件以及进行全局注册的。

/** 按需引入Element-plus组件 */
import { ElContainer, ElAside, ElHeader, ElMain } from 'element-plus'
import { type App } from 'vue'

/** ElementPlusComponents：用来存放element-plus组件，便于遍历，全局注册组件 */
const ElementPlusComponents = [ElContainer, ElAside, ElHeader, ElMain]

/**
 * @description 全局注册element-plus组件
 * @param app vue实例对象
 */
export function useElementComponents(app: App): void {
  ElementPlusComponents.forEach((component) => {
    console.log(component)
    app.component(component.name, component)
  })
}

在main.ts中引入并调用useElementComponents:

/** 引入createApp函数，创建Vue实例对象 */
import { createApp } from 'vue'
/** 引入根组件 */
import App from './App.vue'
/** 引入useElementComponents方法 */
import { useElementComponents } from '@/plugins/element-plus'

/** 创建vue实例对象 */
const app = createApp(App)
/** 注册element-plus组件 */
useElementComponents(app)

console.log(component)打印的内容如下：

使用过全局注册组件都知道，app.component()它接受两个参数：名称和组件，这个在组件全局注册时的名称，就是以后在别的组件中去使用的组件标签名称。

app.component(component.name, component)就类似于：

// 全局注册组件
import Table from '@/xxx/Table.vue'
app.component('myTable', Table)

// 在组件中
<template>
    <my-table></my-table>
</template>

使用Container组件布局

直接去element-plus官网将代码复制粘贴过来：

// layout.vue
<template>
    <div class="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>

【Vue3+Element Plus】从0-1搭建后台管理系统(01)-Layout

从0-1搭建后台管理系统(01)-Layout布局

需要做的事情

最终效果