网站管理助手+建设中,seo网站提交,cn域名注册网站,校庆网站建设策划书范文修改项目入口 一、创建新入口二、分析代码#xff0c;修改入口三、搭建项目主页面布局1、Container 布局容器介绍2、创建布局3、布局器铺满屏幕4、创建Header页面5、加入Aside、Main和Footer模块 一、创建新入口
创建新的入口#xff0c;取消原来的HelloWorld入口 参考代码… 修改项目入口 一、创建新入口二、分析代码修改入口三、搭建项目主页面布局1、Container 布局容器介绍2、创建布局3、布局器铺满屏幕4、创建Header页面5、加入Aside、Main和Footer模块 一、创建新入口
创建新的入口取消原来的HelloWorld入口 参考代码如下
templatedivh1{{ msg }}/h1/div
/template
script
export default {name: Index,props: {msg: String,},
};
/script
style scoped
/style二、分析代码修改入口
查看main.js 我们可以看到项目是通过App.vue来加载的 分析App.vue代码 这里3个地方加载并使用HelloWorld页面此时我们来改成自己的Index.vue修改这3个地方 图片也可以换成自己的建议放在assets目录下 三、搭建项目主页面布局
上面修改完成自己的项目入口之后接下来搭建项目主页面头部、导航、主体等页面布局 因为很多项目都是类似管理系统的界面最上面是头部、左边是导航菜单、右边是主体页面、下方是Footer的框架结构所以我们也按照这个方式来搭建。 1、Container 布局容器介绍
用于布局的容器组件方便快速搭建页面的基本结构
组件名描述el-container外层容器。当子元素中包含 el-header或 el-footer 时全部子元素会垂直上下排列否则会水平左右排列。el-header顶栏容器el-aside侧边栏容器el-main主要区域容器el-footer底栏容器 以上组件采用了 flex 布局使用前请确定目标浏览器是否兼容。此外 的子元素只能是后四者后四者的父元素也只能是 。 2、创建布局
修改Index.vue的代码
templatediv classcontainerel-containerel-headerHeader/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-containerel-footerFooter/el-footer/el-container/div
/templatescript
export default {name: Index,props: {msg: String,},
};
/script
style
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;line-height: 200px;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;
}body .el-container {margin-bottom: 40px;
}.container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
/style查看页面效果 问题布局器没有铺满 3、布局器铺满屏幕
创建全局css文件 在src/assets/css创建global.css 文件代码如下
*{margin:0;padding:0;box-sizing: border-box;/* 全局设置100%可能后面会有坑其他的组件巨长在变形的标签设置heightauto;可解决 */height: 100%;
}这里主要是用到了height: 100%; 其他的是为了把其他空格占位去除为后面做准备。 在main.js 中注册此全局的css文件
import /assets/css/global.css;这一步可做可不做我是根据自己的电脑屏幕设置的15.6的注释App.vue中style的margin-top要不然屏幕超出高度 4、创建Header页面
新建一个Header/index.vue采用flex布局讲头部分成左、中、右3个部分。
templatediv styledisplay:flex;div stylewidth: 200px;头部/divdiv styleflex:1/divdiv stylewidth: 100px;欢迎/div/div
/templatescriptexport default {name: Header}
/scriptstyle scoped
/style修改Index.vue
使用 import Header from ./Header/index.vue;在export中加入 components: {Header}在template的el-header中使用 Header 组件 运行结果 接下来实现一下头部的具体代码头部就实现3个东西
加入”欢迎来到Vue2项目”的字样编写用户头像显示代码 可以指定图片路径为远程的比如我指定一个图片网址。 点击用户头像出现下拉个人中心、退出登录… 用户头像点击一般都是选择个人中心、退出登录这些的这个功能需要用到el-dropdown 代码实现 具体的宽高值根据自己的电脑分辨率进行代码实现我的mac和windows的值就不一样。 templateheaderdivh1 classhd_title欢迎来到Vue2项目/h1/divdiv classopt-wrapperel-dropdown :hide-on-clickfalsediv classdemo-basic--circlediv classblockel-avatar :size40 :srcavatar :class[avatar-info]/el-avatar/div/divel-dropdown-menu slotdropdown classpersoninfoel-dropdown-itemi classel-icon-info/i个人中心/el-dropdown-itemel-dropdown-itemi classel-icon-switch-button/i退出登录/el-dropdown-item/el-dropdown-menu/el-dropdown/div/header
/templatescript
export default {name: Header,data() {return {// 使用静态资源图片//avatar: require(/assets/images/logo.png)// 使用网络图片avatar:https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png,};},
};
/scriptstyle scoped
header {display: flex;align-items: center;justify-content: space-between;color: #fff;
}
.hd_title {color: #425049;font-size: 30px;
}
/*设定头像图片样式*/
.avatar-info {margin-top: 10px;margin-right: 40px;cursor: pointer;
}
.personinfo {height: auto;margin-top: 0px;margin-left: -20px;
}
/style5、加入Aside、Main和Footer模块
上面的代码中只写了头部Header接下来加入Aside、Main和Footer。 分别创建文件夹然后创建index.vue 最后分别加入下列代码只需要对应的name: Main换成AsideFooter即可不要让几个一样
templatedivmain div/div
/templatescriptexport default {name: Main}
/scriptstyle scoped/style修改components/Index.vue中的几个内容全部如下代码
templatediv classcontainerel-containerel-headerHeader //el-headerel-containerel-aside width200pxAside //el-asideel-mainMain //el-main/el-containerel-footerFooter //el-footer/el-container/div
/templatescript
import Header from ./Header/index.vue;
import Aside from ./Aside/index.vue;
import Footer from ./Footer/index.vue;
import Main from ./Main/index.vue;export default {name: Index,components: { Header, Aside, Footer, Main },props: {msg: String,},
};
/script
style
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;line-height: 200px;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;
}body .el-container {margin-bottom: 40px;
}.container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
/style效果如图
