本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766
（一）页面布局
页面布局分为3个部分：
顶部导航：系统logo，登录信息，退出按钮等左侧菜单：显示系统菜单右侧展示：显示页面主要内容（二）修改布局文件App.vue
主要是一些样式和布局，注意在IDEA下sass语法会报错，忽略即可，后续有时间再研究。
<template><divid="app"><transitionname="fade"mode="out-in"><router-view></router-view></transition></div></template><script>exportdefault{name:'app',components:{}}</script><stylelang="scss">body{margin:0;padding:0;font-family:HelveticaNeue,Helvetica,PingFangSC,HiraginoSansGB,MicrosoftYaHei,SimSun,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;}#app{position:absolute;top:0;bottom:0;width:100%;}.el-submenu[class^=fa]{vertical-align:baseline;margin-right:10px;}.el-menu-item[class^=fa]{vertical-align:baseline;margin-right:10px;}.toolbar{background:#f2f2f2;padding:10px;margin:10px0;.el-form-item{margin-bottom:10px;}}.fade-enter-active,.fade-leave-active{transition:all0.2sease;}.fade-enter,.fade-leave-active{opacity:0;}</style>（三）新建页面
在src目录下新建pages文件夹，并新建以下2个文件，文件默认内容入下图：
Main.vue：主页面Dashboard.vue：页面右边显示内容<template><div>{{msg}}</div></template><style></style><script>exportdefault{data(){return{msg:'hellovue!,thisisDashboardpage'}}}</script>（四）配置路由
修改src\router\index.js文件，加入Main和Dashboard路由
importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)importMainfrom'@/pages/Main'importDashboardfrom'@/pages/Dashboard'importUserfrom'@/pages/User'letroutes=[{path:'/',component:Main,hidden:true,children:[{path:'/',component:Dashboard,name:'系统首页'}]}]constrouter=newRouter({routes:routes})exportdefaultrouter（五）修改主页面Main.vue
vue页面一般由3部分组成：
布局代码：<template>…</template>中，语法使用html语法。
脚本代码：<script>…</script>中，使用vue结构语法或者javascript语法。
样式代码：<style>…</style>中，使用css或者scss语法。
而脚本代码：<script>…</script>中基本语法，更多语法请参考VUE官网
<divid="app"><p>{{msg}}</p></div>//scriptnewVue({el:"#app",//代表vue的范围data:{msg:'hello,vue!'//数据双向绑定},methods:{//方法},mounted:{//钩子函数}})
一下是完整的main.vue
<template><section><el-containerclass="container"><!--左边--><el-aside:width="'200px'"><el-container><el-header><imgsrc="../assets/logo.png"class="logoImg"></el-header><el-main><el-menu:collapse="collapsed"><el-submenuindex="1"><templateslot="title"><iclass="fafa-coffee"></i><span>系统管理</span></template><el-menu-item-group><el-menu-itemindex="1-1"><iclass="fafa-user-circle-o"></i>用户管理</el-menu-item><el-menu-itemindex="1-2"><iclass="fafa-file-text-o"></i>系统日志</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-main></el-container></el-aside><!--内容--><el-container><!--页眉--><el-headerclass="header"><el-row><el-col:span="20"class="header-title"><spanclass="system-name">{{systemName}}</span></el-col><el-col:span="2"><spanclass="el-dropdown-linkuserinfo-inner">你好：{{userName}}</span></el-col><el-col:span="1"><spanclass="el-dropdown-linkuserinfo-inner">|</span></el-col><el-col:span="1"><spanclass="el-dropdown-linkuserinfo-inner">退出</span></el-col></el-row></el-header><!--中间--><el-mainclass="main"><transitionname="fade"mode="out-in"><router-view></router-view></transition></el-main></el-container></el-container></section></template><script>letdata=()=>{return{collapsed:false,systemName:'用户管理系统',userName:'admin'}}exportdefault{data:data,methods:{},mounted:function(){}}</script><stylescoped="scoped"lang="scss">$width:100%;$height:100%;$background-color:#E3BA63;$header-color:#fff;$header-height:60px;.container{position:absolute;top:0;bottom:0;width:100%;.el-aside{.el-header{line-height:$header-height;background-color:$background-color;color:$header-color;text-align:center;}.el-container{height:$height;.el-main{padding:0;}}}.main{width:$width;height:$height;}.menu-button{width:14px;cursor:pointer;}.userinfo-inner{cursor:pointer;}.el-menu{height:$height;}.header{background-color:$background-color;color:$header-color;text-align:center;line-height:$header-height;padding:0;.header-title{text-align:left;span{padding:020px;}}}.system-name{font-size:large;font-weight:bold;}}.logoImg{width:50px;height:50px;border-radius:30px;margin-top:5px;}</style>
启动项目输入localhost:8080,看看效果
到此我们就初步完成了vue主页面的开发了，下一步我们要封装axios等组件。
上一篇：SpringBootVueElement入门实战（三）VueDevtools安装下一篇：SpringBootVueElement入门实战（五）封装axios点击这里返回目录
程序人生，更多分享请关注公众号
源代码下载
关注上面公众号，回复源码即可获取gitbug/gitee下载地址
