【五】 后台布局，css 全局变量 vue3 + ts + element-plus 项目实战 (后台管理系统)

1 创建src/views/Layout.vue

//布局样式https://element-plus.gitee.io/zh-CN/component/container.html#%E5%B8%B8%E8%A7%81%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80
<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-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </div>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>

  .layout {
    height: 100vh;
    background-color: #ccc;
    .el-aside {
      background-color: #eee;
      height: 100vh;
    }
    .el-header {
      background-color: skyblue;
    }
    .el-footer {
      background-color: skyblue;
    }
  }

</style>

2 app.vue 中调用。

<template>
  <Layout></Layout>

</template>

3 全局css 配置。

3.1 添加全局css 样式 。

//src/style/common.css
/* Variables */

// Base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;

// Sidebar
$sideBarWidth:300px;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$subMenuActiveText:#f4f4f5;
$menuBg:rgb(50, 65, 87);
$menuText:#162B64;
$menuActiveText:#435EBE; // Also see settings.sidebarTextTheme

// Login page
$lightGray: #eee;
$darkGray:#889aa4;
$loginBg: #2d3a4b;
$loginCursorColor: #fff;

3.2 配置 vite.config.js

export default defineConfig({
...
css: {
  preprocessorOptions:{
    scss: {
      additionalData :`@import "./src/style/variables.scss";`,
    }
  }
},
...
})

3.3 使用

//修改 Layout.vue


<style lang="scss" scoped>

  .layout {
     ...
    .el-aside {
      background-color: $menuBg;
      color: #fff;
      height: 100vh;
    }
    .... 
  }

</style>

调整后效果 。

4 全局使用 icon图标。

4.1 安装

npm install  @element-plus/icons-vue

//修改 main.ts

import  * as ElIcons from '@element-plus/icons'

const app =  createApp(App)

for(const name in ElIcons ) {
    app.component(name,(ElIcons as any)[name])
}

app.use(router).use(store).mount('#app')

4.2 在组件中使用即可。

<el-icon><document /></el-icon>
<el-icon><setting /></el-icon>
<el-icon><location /></el-icon>

去官网直接找到图片复制即可。 element-plus.gitee.io/zh-CN/compo…

总结；1 element-plus 的布局使用. 2 css 全局变量