vue组件化开发

1.vue组件化开发

父页面

<template>
	<div id="app">
		<div class="header">
			<myHeader></myHeader>
		</div>
		<div class="container">
			<myAside></myAside>
			<myMain></myMain>
		</div>
	</div>
</template>

<script>
	import myHeader from './components/myheader.vue'
	import myAside from './components/myAside.vue'
	import myMain from './components/myMain.vue'

	export default {
		name: 'app',
		components: {
			myHeader,
			myAside,
			myMain
		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
	}
</style>

子组件页面

<template>
	<div class="header">我是header</div>
</template>

<script>
</script>

<style>
	.header{
		width: 100%;
		height: 10vh;
		background-color: pink;
	}
</style>

<template>
	<div class="aside">我是aside</div>
</template>

<script>
</script>

<style>
	.aside{
		width: 10vw;
		height: 90vh;
		background-color: palegreen;
	}
</style>

<template>
	<div class="main">我是main</div>
</template>

<script>
</script>

<style>
	.main{
		width: 90vw;
		height: 90vh;
		background-color: hotpink;
	}
</style>

显示结果：

PC端

 移动端：