简单的vue项目

HellowWorld.vue组件

<template>
  <div class="hello">
<el-menu :default-active="'2-1'" class="el-menu-demo"  >
	<el-col>
	<el-menu-item index="1">处理中心</el-menu-item>
	<el-submenu index='2'>
		<template slot="title">我的工作台</template>
		<el-menu-item index="2-1">今日待办</el-menu-item>
		<el-menu-item index="2-2">明日待办</el-menu-item>
		<el-menu-item index="2-3">后天待办</el-menu-item>
		<el-submenu index='2-4'>
			<template slot="title">下周待办</template>
			<el-menu-item index="2-4-1">下周一待办</el-menu-item>
			<el-menu-item index="2-4-2">下周二待办</el-menu-item>
			<el-menu-item index="2-4-3">下周三待办</el-menu-item>
		</el-submenu>
	</el-submenu>
</el-col>
	
</el-menu>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.menu_1{
	width: 30%;
}
</style>

leftmenu.vue组件

<template>
	<div id="menu_box">
		<!-- 		<ul>
			<li  @click.stop="click_one()">10001
			<ul v-if="flag_one">
				<li  @click.stop="click_sec()">10011
				<ul v-if="flag_sec" >
					<li>10111</li>
					<li >10112</li>
					<li >10113</li>
								</ul></li>
				<li>10021</li>
				<li>10031</li>
			</ul></li>
			<li>10002</li>
			<li>10003</li>
		</ul> -->
		<ul v-if="flag_one">
			<li v-for="item1 in list" v-bind:key="item1.name" @click.stop="fn1">{{item1.name}}
				<ul v-if="flag_sec">
					<li v-for="item2 in item1.children" :key="item2.name" @click.stop="fn2">{{item2.name}}
						<ul v-if="flag_tri">
							<li v-for="item3 in item2.children" :key="item3.name">{{item3.name}}</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		<!-- 	<ul>
			<li v-for="item in list1" v-bind:key="item.name">{{item.name}}</li>
		</ul> -->
		
 
	</div>
 
</template>
 
<script>
	export default {
		name: "list",
		data() {
			return {
				flag_one: true,
				flag_sec: false,
				flag_tri: false,
				// list:[]
				list: [{
						name: '10001',
						children: [{
							name: '10011',
							children: [{
								name: '10111',
								children: []
							}, {
								name: '10211',
								children: []
							}]
						}, {
							name: '10012',
							children: [{
									name: '10121',
									children: []
								},
								{
									name: '10221',
									children: []
								}
							]
						}]
					}, {
						name: '10002',
						children: []
					},
					{
						name: '10003',
						children: []
					}
				],
				list1: [{
						name: "1"
					}, {
						name: "2"
					},
					{
						name: "3"
					}
				]
			}
		},
		methods: {
			// click_one(){
			// 	this.flag_one=!this.flag_one;
			// },
 
			// click_sec(){
			// 	this.flag_sec=!this.flag_sec;
			// },
			fn1() {
				this.flag_sec = !this.flag_sec;
			},
			fn2() {
				this.flag_tri = !this.flag_tri;
 
			},
			// fn3(){
			// 	this.flag_tri=!this.flag_tri;
			// }
 
		}
	}
</script>
 
<style>
	#menu_box {
		height: 100%;
	} 	
	#menu_box>li,ul{
		background-color: #409EFF;
	}
</style>

topmenu.vue组件

<template>
	<div id="">
		<div class="topmenu_top">
			我是顶部菜单栏
		</div>
	</div>
</template>

<script>
	export default {
		name:'topmenu',
		
	}
</script>

<style>
	.topmenu_top{
		height: 40px;
		background-color: green;
		width: 100%;	
	}
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

resize.css(引用此css的用来消除页面的padding margin等空行）

@charset "uf-8";
html,body,p,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,fieldset,legend,form,img,input{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
ul,ol,li{
	list-style:none;
}
img{
	display: block;
	border: 0;
}
.clear:after{
	content: "";
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

App.vue(主组件）

<template>
	<div class="container">
		<div class="topmenu">
			<Menu1></Menu1>
		</div>
		<div class="leftandright">
			<div class="leftmenu">
				<Menu></Menu>
			</div>
			<div class="main">
				<router-view />
			</div>
		</div>
	</div>
</template>

<script>
	import Menu from './components/leftmenu.vue'
	import Menu1 from './components/topmenu.vue'

	export default {
		name: 'App',
		components: {
			Menu,
			Menu1
		}
	}
</script>

<style>
	@import url("./utils/resize.css");
	.container {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
	}

	.topmenu {
		text-align: center;
	}

	.leftandright {
		display: flex;
		height: calc(100% - 40px);
	}

	.leftmenu {
		height: 100vh;
		flex: 1;
	}

	.main {
		height: 100vh;
		flex:4;
	}
</style>

main.js（引用的模块）

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';	
import App from './App.vue';
import router from './router'


Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
  router
}).$mount('#app')