位置: IT常识 - 正文

Vue3 入门笔记 ---- 利用Element Plus对页面进行布局划分以及实现左侧公共菜单

编辑:rootadmin
Vue3 入门笔记 ---- 利用Element Plus对页面进行布局划分以及实现左侧公共菜单 文章目录页面布局说明以及效果展示Element Plus简介实现布局安装引入修改Vue3初始样式实现布局CommonAside组件创建CommonAside.vue文件templatescriptstyle使用CommonAside.vue 组件

推荐整理分享Vue3 入门笔记 ---- 利用Element Plus对页面进行布局划分以及实现左侧公共菜单,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动,不会介绍Vue的基础特性,关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue,我是看这个入门的,觉得还不错。

代码地址: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

同步发表于个人站点:http://www.panzhixiang.cn/article/2022/10/22/57.html

页面布局说明以及效果展示

一个网站总有自己的布局的,所谓布局就是在什么区域展示什么信息,下面的图片就是我们设计的布局效果,分为三个部分。 页面的左侧是一个整体,用于展示菜单栏,也就是显示了网站有哪些模块;右侧分为上下两部分,上面是用于显示用户的头像,点击头像可以进行登出等操作;右侧的下半部分是网站的主体区域,展示我们希望像用户传递的信息。

由于左侧的菜单栏和右侧上半部分不论再那个页面都需要,所以我们就可以把这两个部分做成公共组件,可以为左侧菜单栏起个名字叫做CommonAside,右侧的上半部分叫做CommonHeader。

Element Plus简介

会Vue的人基本知道Element UI(和Vue2搭配使用)或者Element Plus, 他们的作用就是封装好了很多UI库,方便我们直接使用,比如我们想实现一个表格,就可以使用el-table 标签帮助我们实现。

实现布局安装

要使用Element Plus,首先要安装,在项目的根目录下执行下面的命令就可以了

npm install element-plus --save

由于我们后面还要使用Element Plus里面的icon,这里也一并安装

npm install @element-plus/icons-vue引入

安装好之后还要在Vue3中引入Element Plus才能在Vue3中使用,我们采用全局引入的方式,但是其实引入的方法有好几种,可以点击这里查看具体有哪些引入方法。 引入的方法是在main.js中进行配置,配置之后main.js如下所示,我在代码中备注了哪些代码是引入所需要的。

import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus' // 引入Element Plus 所需import 'element-plus/dist/index.css' // 引入Element Plus 所需import router from './router/index.js'import * as ElementPlusIconsVue from '@element-plus/icons-vue' // 引入Element Plus icon 所需import './assets/main.css'const app = createApp(App)// 引入Element Plus icon 所需for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component)}app.use(router)app.use(ElementPlus) // 引入Element Plus 所需app.mount('#app')修改Vue3初始样式

Vue3在创建项目的项目的时候默认有一些样式,也就是css,在 项目根目录/src/assets/路径下,有base.css 和main.css这两个样式文件,我们修改main.css就可以了。

主要是修改main.css 中两个 #app 部分,修改后如下:

#app { /* max-width: 1280px; */ margin: 0; padding: 0; font-weight: normal; height: 100vh; width: 100%;} #app { /* display: grid; */ /* grid-template-columns: 1fr 1fr; */ padding: 0; }Vue3 入门笔记 ---- 利用Element Plus对页面进行布局划分以及实现左侧公共菜单

css的部分不详细解释了,主要的目的就是为了vue能够正常在浏览器中显示我们的页面,看不懂的话需要去简单学一下css的部分。

实现布局

上一篇笔记讲路由的时候,我们在Main.vue中写入了

<template>Home </template>

我们现在将里面的内容替换为下面的部分

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

替换之后,大家在项目根目录下执行 npm run dev 运行项目,应该可以看到如下的页面

可以看到,虽然很简单,但是页面整体的框架已经出来了。

CommonAside组件

上面提到过,我们可以把左侧菜单栏抽成一个组件,称之为CommonAside。我们现在来实现它。

创建CommonAside.vue文件

首先先删除src/components在项目初始化的时候自动创建的内容。 在src/components路径下创建CommonAside.vue这个文件,文件内容如下,

<template> <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse-transition="false" active-text-color="#ffd04b"> <h3>后台管理</h3> <el-menu-item :index="item.path+''" v-for="item in list" :key="item.label"> <component class="icons" :is="item.icon"></component> <span>{{item.label}}</span> </el-menu-item> </el-menu></template><script>export default { setup() { const list = [ { path: '/user', name: 'user', label: '用户管理', icon: 'user', url: '/user' }, { label: '其它', name: 'other', icon: 'location', path: '/other', url: 'other' }, ]; return { list, } }}</script><style lang="less" scoped>.icons { width: 18px; height: 18px; margin-right: 4px;}.el-menu-vertical-demo { width: 100%; border-right: none; h3 { color: #fff; text-align: center; margin-top: 10px; }}</style>

代码中分为template、script和style三个部分,我们分别来说明一下。

template

template里面引用el-menu标签实现我们需要的样式,我们这里其实只使用了很简单的部门,还有很多方法和属性我们都没有使用,大家可以多看看element plus的官网。

script

script里面是js代码,Vue3支持选项式API和组合式API,我使用的是组合式API,关于这两者的区别以及应该怎么选择可以看这里

我在script里面其实就定义并返回了一个包含左侧菜单内容的list。

style

style里面是样式,也就是css,但是我使用的是less,关于less的部分可以看这里, 其实不会less的也没关系,看看上面的代码,跟着模仿就行了,我其实也不会less,只会模仿而已。

使用CommonAside.vue 组件

之前分析过,CommonAside这个组件会在所有的页面中都出现,所以我们可以在Main.vue中引入这个组件,引入之后Main.vue的内容如下,

<template> <div class="common-layout"> <el-container> <el-aside width="180px"> <!-- 要注意这里引用CommonAside组件的方法,拆分了两个字符,用中短线连接的--> <common-aside></common-aside> </el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </el-container> </div></template><script>import CommonAside from "../components/CommonAside.vue";export default { components: { CommonAside, }}</script><style lang="less" scoped>.common-layout { height: 100%; &>.el-container { height: 100%; &>.el-aside { height: 100%; background: #545c64; } &>.el-container { &>.el-header { padding: 0%; } } }}</style>

代码的内容很简单,只解释一下style里面的一个小知识点。

.common-layout 表示 其后所跟的花括号的样式会作用在class="common-layout"的范围内, 我们会看到 .common-layout下面会有 &>.el-container,这会关联到common-layout里面的el-container,如果在.common-layout之外也有el-container的话是不会起效的。

到这里CommonAside组件也完成了,启动项目之后页面应该如下所示,

本文链接地址:https://www.jiuchutong.com/zhishi/284071.html 转载请保留说明!

上一篇:ghoststartservice.exe是什么进程 有什么作用 ghoststartservice进程查询

下一篇:keyhook.exe是什么进程 有什么作用 keyhook进程查询(onekey.exe是什么)

  • 华为手机怎么调24小时时间格式(华为手机怎么调彩色屏幕)

    华为手机怎么调24小时时间格式(华为手机怎么调彩色屏幕)

  • 苹果13pro怎么设置字体大小(苹果13pro怎么设置灵动岛)

    苹果13pro怎么设置字体大小(苹果13pro怎么设置灵动岛)

  • iphone键盘怎么换下一行(iphone键盘怎么换皮肤)

    iphone键盘怎么换下一行(iphone键盘怎么换皮肤)

  • 小米我的收藏在哪(小米我的收藏在哪里找到)

    小米我的收藏在哪(小米我的收藏在哪里找到)

  • 华为mate20pro尺寸(华为mate20pro尺寸多少寸)

    华为mate20pro尺寸(华为mate20pro尺寸多少寸)

  • 苹果8怎么无线充不了(苹果8怎么无线网打不开)

    苹果8怎么无线充不了(苹果8怎么无线网打不开)

  • 华为手机屏幕亮度调到最大还是暗怎么办(华为手机屏幕亮度调节在哪里)

    华为手机屏幕亮度调到最大还是暗怎么办(华为手机屏幕亮度调节在哪里)

  • 由一些外部地址组合而成的一个地址集合称为(外部地址是0.0.0.0:0)

    由一些外部地址组合而成的一个地址集合称为(外部地址是0.0.0.0:0)

  • 侧面指纹的缺陷(侧面指纹好吗)

    侧面指纹的缺陷(侧面指纹好吗)

  • 怎样录屏微信聊天语音(怎样录屏微信聊天视频)

    怎样录屏微信聊天语音(怎样录屏微信聊天视频)

  • 华为手机人脸识别怎么设置(华为手机人脸识别黑屏怎么回事)

    华为手机人脸识别怎么设置(华为手机人脸识别黑屏怎么回事)

  • 主机后面插孔没声音(电脑主机后方插孔)

    主机后面插孔没声音(电脑主机后方插孔)

  • 十个g是多少兆流量(10个g多少m)

    十个g是多少兆流量(10个g多少m)

  • 交换机console接口是干嘛的(交换机console接口怎么配置)

    交换机console接口是干嘛的(交换机console接口怎么配置)

  • 12306凌晨可以买票吗(铁路12306凌晨可以买票不)

    12306凌晨可以买票吗(铁路12306凌晨可以买票不)

  • word文档怎么设置表格列宽(word文档怎么设置背景图片)

    word文档怎么设置表格列宽(word文档怎么设置背景图片)

  • 华为M6充满电要多久(华为m6充满电自动断电吗)

    华为M6充满电要多久(华为m6充满电自动断电吗)

  • vivo怎么关闭云空间(vivo怎么关闭云相册)

    vivo怎么关闭云空间(vivo怎么关闭云相册)

  • 手机怎么看路由器密码(手机怎么看路由器是2.4g还是5g)

    手机怎么看路由器密码(手机怎么看路由器是2.4g还是5g)

  • 手机版wps怎么删减页数(手机版wps怎么删除文件中的部分内容)

    手机版wps怎么删减页数(手机版wps怎么删除文件中的部分内容)

  • Reno Ace的SOS紧急联络怎么用(设置sos紧急)

    Reno Ace的SOS紧急联络怎么用(设置sos紧急)

  • mt762是什么型号(mt76-2002)

    mt762是什么型号(mt76-2002)

  • i76820hk什么档次(i76820hk什么档次2021)

    i76820hk什么档次(i76820hk什么档次2021)

  • 电脑显示屏上有显卡吗(电脑显示屏上有个特别小的红点)

    电脑显示屏上有显卡吗(电脑显示屏上有个特别小的红点)

  • qq音乐怎么改用户名(qq音乐怎么更改用户)

    qq音乐怎么改用户名(qq音乐怎么更改用户)

  • Linux怎样查看网络配置(linux查看网络数据)

    Linux怎样查看网络配置(linux查看网络数据)

  • 微信自己发的朋友圈怎么看(微信自己发的朋友圈怎么修改)

    微信自己发的朋友圈怎么看(微信自己发的朋友圈怎么修改)

  • Python跳动的爱心(python编程爱心形状)

    Python跳动的爱心(python编程爱心形状)

  • GPT4来了,多模态模型上线(gpt3模型大小)

    GPT4来了,多模态模型上线(gpt3模型大小)

  • 总分公司企业所得税合并申报
  • 企业所得税申报时间
  • 代扣代缴个人所得税有滞纳金吗
  • 消防工程改造怎么做账务处理
  • 查询不到已经上市的股票
  • 税率开错了影响征税吗
  • 主营业务收入和销售收入
  • 短期借款属于经营性资产吗
  • Xm公司为增值税小规模纳税企业
  • 一个季度是多长时间
  • 已认证的发票如何冲红步骤
  • 外商投资企业是民营企业吗
  • 英国租金收入所得税
  • 现金预算表中的利息怎么算
  • 价内税是指
  • 固定性制造费用成本差异是
  • 个人承包集体企业历史
  • 财务软件要入固定资产吗
  • 消费税计算视频讲解
  • 发票进项和销项对不上后果
  • 对外支付类型
  • 加权平均净资产收益率等于企业净利润除以
  • 长期待摊费用当月减少当月摊销吗
  • 收到保险返利计入什么
  • 车船税的减免税
  • 哪些票据可以冲抵增值税
  • 银行抵押贷款结清后需要解押吗
  • 1500元左右打游戏最好的手机
  • 今年交去年的工会经费账务处理?
  • 让记事本文件自动删除
  • 如何找到您会获得的权限
  • 如何修复面部毛孔粗大
  • 未售车位出租有哪些税要缴纳
  • win7命令行模式
  • php中序遍历
  • php常见的错误级别
  • softag
  • 补缴去年的工会经费计提
  • 公允价值模式的特点
  • vue2路由跳转页面不刷新问题
  • 关联公司代缴社保会计处理
  • php文件缓存类
  • java事件处理机制三个重要概念
  • 借款合同按什么缴纳印花税
  • 销售赠品入什么科目
  • 劳动法里病假工资怎么算
  • 哪些收入需要缴纳个人所得税
  • 办公室租金会有公摊吗
  • 小规模纳税人是个体户吗
  • 收到社保的退费是怎么回事
  • 城镇土地使用税怎么算
  • 预存电费和后付费哪个好
  • 银行股分红划算吗
  • 公司按最低标准交社保可以申请补偿吗
  • 收到发票冲红怎么做分录
  • 债权投资的账务处理办法
  • 设计费可以一次支付吗
  • 垫付的资金
  • 购买二氧化氯
  • 一般会计准则是什么
  • 动产什么时候发生效力
  • sql server如何远程登录
  • 机箱前面板是哪里
  • 外接法实物图
  • 重装windows764 位后后如何将apache mysql加入系统服务
  • apt-get download
  • windows有两个
  • 苹果电脑bim
  • Win10 Mobile 10586.312提前体验
  • Android游戏开发打砖块
  • linux分区类型默认的是什么
  • 什么是批处理模式
  • jq获取节点属性
  • Python回调函数注册类型不匹配
  • jquery的validate前端表单验证
  • Android 使用log4j2
  • 税务局追缴社保流程及办理期限
  • 多张发票怎么粘贴在a4纸上面
  • 煤炭资源税税率选煤税率多少黑龙江
  • 从印度往中国邮寄药品
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设