目的javascript
開發一個後臺管理的前端,頂部是標題,左側是菜單導航欄,中間是要顯示的內容。而內容能夠是各類圖表,也能夠是數據列表。css
1、準備工做html
1..修改App.vue文件前端
代碼以下:vue
<template> <div id="app"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </div> </template> <script> export default { name: 'app', components: {} } </script> <style lang="scss"> body { margin: 0; padding: 0; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 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: 10px 0; .el-form-item { margin-bottom: 10px; } } .fade-enter-active, .fade-leave-active { transition: all 0.2s ease; } .fade-enter, .fade-leave-active { opacity: 0; } </style>
2.在src目錄下新建pages文件夾,並添加兩個空vue文件:「Main.vue」和「Dashboard.vue」,java
Main.vue:是主頁面git
Dashboard.vue:是爲了之後顯示首頁內容的儀表盤github
文件內容以下:web
<template> <section> </section> </template> <script> export default {} </script> <style scoped> </style>
3.修改路由spring
修改src\router\index.js文件
內容以下:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Main from '@/pages/Main' import Dashboard from '@/pages/Dashboard' let routes = [{ path: '/', component: Main, hidden: true, children: [{ path: '/', component: Dashboard, name: '首頁' }] }] const router = new Router({ routes: routes }) export default router
這時,刷新頁面。則頁面變成白色,並且沒有任何內容
2、首頁佈局
vue文件的代碼結構以下:
佈局代碼:<template>...</template>中,語法使用html語法
腳本代碼:<script>...</script>中,使用javascript語法
樣式代碼:<style>...</style>中
咱們須要實現以下佈局:
參考element-ui文檔,佈局容器組件:http://element.eleme.io/#/zh-CN/component/container
Main.vue的完整代碼以下:
<template> <section> <el-container class="container"> <!--左邊--> <el-aside :width="collapsed? '65px' : '200px' "> <el-container> <el-header> <span class="menu-button" v-if="collapsed" @click.prevent="collapsed=!collapsed"> <i class="fa fa-align-justify"></i> </span> <span v-else class="system-name">{{systemName}}</span> </el-header> <el-main> <el-menu :collapse="collapsed"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-menu"></i> <span>菜單一</span> </template> <el-menu-item-group> <el-menu-item index="1-1">選項1</el-menu-item> <el-menu-item index="1-2">選項2</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-main> </el-container> </el-aside> <!--內容--> <el-container> <!--頁眉--> <el-header class="header"> <el-row> <el-col :span="18" class="header-title"> <span v-if="collapsed" class="system-name">{{systemName}}</span> <span v-else class="menu-button" @click.prevent="collapsed=!collapsed"> <i class="fa fa-align-justify"></i> </span> </el-col> <el-col :span="6"><span class="el-dropdown-link userinfo-inner">你好:{{userName}}</span></el-col> </el-row> </el-header> <!--中間--> <el-main class="main"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </el-main> </el-container> </el-container> </section> </template> <script> let data = () => { return { collapsed: false, systemName: '後臺管理', userName: '系統管理員' } } export default { data: data, methods: { }, mounted: function() { } } </script> <style scoped="scoped" lang="scss"> $width: 100%; $height: 100%; $background-color: #0b0a3e; $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: 0 20px; } } } .system-name { font-size: large; font-weight: bold; } } </style>
在script中,使用了vue的語法結構。
其中,data是vue實例綁定的對象;
methods是能夠調用的方法;
mounted是頁面綁定完畢後執行的方法。
刷新頁面,效果以下:
點擊菜單展開與收縮的效果:
git代碼地址:https://github.com/carter659/spring-boot-vue-element.git
若是你以爲個人博客對你有幫助,能夠給我點兒打賞,左側微信,右側支付寶。
有可能就是你的一點打賞會讓個人博客寫的更好:)