组件：局部功能界面，包含所有实现页面的所有资源
HelloWorld.vue：
<template>
<div>
<p class="msg">{{msg}}</p>
</div>
</template>
<script>
export default { //配置对象（与vue一致）
data(){ //在组件中必须写函数
return{
msg:'hello Vue Component'
}
}
}
</script>
<style>
.msg{
color: red;
font-size: 30px;
}
</style>
App.vue:
<template>
<div>
<img class="logo" src="./assets/logo.png" alt="">
<!--3.使用组件标签-->
<HelloWorld></HelloWorld>
</div>
</template>
<script>
//1. 引入组件
import HelloWorld from './components/HelloWorld'
export default {
//2.映射组件标签
components:{
HelloWorld
}
}
</script>
<style>
.logo{
width: 200px;
height: 200px;
}
</style>
main.js:
/*
入口JS：创建Vue实例
*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
components:{
App
},
template:'<App/>'
})
