App.vue
<template>
<div id="app" class="h-100">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
@import "../static/css/main.css";
</style>SiderBar.vue
<template>
<div class="side-bar">
Hello,side-bar
</div>
</template>
<script>
export default {
name: 'Sidebar',
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Home.vue
<template>
<div class="contain">
Hello,Home
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/common/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})Home.vue
<template>
<div class="hbox h-100">
<v-sidebar></v-sidebar>
<div class="contain">
hello,Home
</div>
</div>
</template>
<script>
import vSidebar from '@/components/common/Sidebar'
export default {
name: 'Home',
components:{
vSidebar
},
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
Sidebar.vue
<template>
<div class="side-bar aside-sm">
<el-menu default-active="2" class="el-menu-vertical-demo h-100" theme="dark">
<el-menu-item index="home">
<i class="el-icon-caret-right"></i>首頁
</el-menu-item>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>教務管理</template>
<el-menu-item index="notify">通知管理</el-menu-item>
<el-menu-item index="department">部門管理</el-menu-item>
</el-submenu>
<el-menu-item index="user">
<i class="el-icon-setting"></i> 個人中心
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: 'Sidebar',
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<template>
<div style="text-align: center">
<h1>歡迎來到首頁！</h1>
</div>
</template><template>
<div>我是通知管理</div>
</template>
<!-- <script type="text/ecmascript-6"> -->
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
<template>
<div>我是部門管理</div>
</template>
<!-- <script type="text/ecmascript-6"> -->
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
<template>
<div>
個人中心
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/common/Home'
import Welcome from '@/components/page/Welcome.vue'
import Notify from '@/components/page/Notify.vue'
import Department from '@/components/page/Department.vue'
import User from '@/components/page/User.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '*',redirect:'/' },
{
path: '/',component: Home,redirect: '/index',
children: [
{ path: 'index',component: Welcome },
{ path: 'notify',component: Notify },
{ path: 'department',component: Department },
{ path: 'user', component: User }
]
}
]
})