springboot实战小项目-前端-头部设计

插件安装：首先在idea最下方找到Terminal按钮，点击该按钮，输入npm install element-plus --save命令，安装element-plue插件

 

一.首先在components文件夹中新建一个名为Header.vue的文件（这个components文件夹可以放很多那种组件式开发的代码，比如说网站的导航栏，可以写这里边，然后通过其他界面去引入）

　　1.line-height：设置线条高度

　　2.display: flex：即采用弹性布局，flex相当于一个容器

　　3.border-bottom：设置下边框属性，边框大小1px，颜色为：#ccc

　　4.margin-left：设置元素的左外边距

　　5.el-dropdown：是elementUI中一个下拉框组件，去官网找到后直接将代码拿过来用即可

 1 <template>
 2   <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
 3     <div style="width: 200px; margin-left: 30px; color: cornflowerblue">后台管理系统</div>
 4     <div style="flex: 1"></div>
 5     <div style="width: 150px; line-height: 50px; display: flex; margin-bottom: 40px">
 6       <div class="flex flex-wrap items-center" style="margin-bottom: 20px">
 7         <el-dropdown style="margin-top: 20px">
 8           <span class="el-dropdown-link">张三
 9             <el-icon class="el-icon--right">
10                <arrow-down />
11             </el-icon>
12           </span>
13           <template #dropdown>
14             <el-dropdown-menu>
15               <el-dropdown-item>个人信息</el-dropdown-item>
16               <el-dropdown-item>退出登录</el-dropdown-item>
17             </el-dropdown-menu>
18           </template>
19         </el-dropdown>
20       </div>
21     </div>
22   </div>
23 </template>
24 
25 <script>
26 export default {
27   name: "Header"
28 }
29 </script>
30 
31 
32 <style scoped>
33 
34 </style>

二.在components文件夹中新建一个名为Aside.vue的文件，做为侧边栏。

<template>
  <div>
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
            style="height: 750px;width: 200px"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="1"
            text-color="#fff"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span style="margin-left: -30px">系统管理</span>
            </template>
            <el-menu-item index="1-4-1">用户管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Aside"
}
</script>

<style scoped>

</style>

三.将Header.vue和Aside.vue组件引入到App.vue中去

<template>
<!--头部-->
  <div><Header/></div>
<!--侧边栏-->
  <div style="display: flex"><Aside/></div>
<!--主体-->

  <router-view/>
</template>

<style>

</style>

<script>
//引入自定义的Header.vue组件
import Header from "./components/Header";
import Aside from "./components/Aside";

export default {
  name:"layout",
  components:{
    Header,
    Aside
  }
}
</script>

四.在assets/CSS/文件夹下编写一个全局样式文件global.css，星号代表所有，将所有的页边距去掉（既设为0），内边距设为0，box-sizing：将其设为一个盒状的模型。

1 *{
2     margin: 0;
3     padding: 0;
4     box-sizing: border-box;
5 }

五.在main.js文件中输入import './assets/CSS/global.css'将编写的全局样式文件引入。

六.在main.js文件中输入import ElementPlus from 'element-plus'　　import 'element-plus/dist/index.css'，将element-plue引入，然后在.use(ElementPlus)即可

 1 import { createApp } from 'vue'
 2 import App from './App.vue'
 3 import router from './router'
 4 import store from './store'
 5 import ElementPlus from 'element-plus'
 6 import 'element-plus/dist/index.css'
 7 
 8 import './assets/CSS/global.css';
 9 
10 createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

 七.运行vue程序，效果如下所示：

 

标签：实战,vue,springboot,前端,Aside,element,Header,components,import
来源： https://www.cnblogs.com/XiaoMaGuai/p/15867502.html