頁(yè)面三要素：html，js，css
組件：組件是頁(yè)面的局部功能模塊，可以包括html/css/js/img等(視情況而定)，這些資源是組件的組成部分
vue項(xiàng)目入口js，main.js
一般會(huì)有一個(gè)根組件App.vue，放在src的根目錄下
index.html需顯示的頁(yè)面文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
vue組件包括三個(gè)部分template， script，style，如Hello.vue
<template>
//必須包含根標(biāo)簽
<div>
<p class="msg">{{msg}}</p>
</div>
</template>
<script>
//寫(xiě)法一般比較固定，向外默認(rèn)暴露一個(gè)配置對(duì)象(與Vue一致),data可以寫(xiě)對(duì)象data: {}，也可以寫(xiě)函數(shù)data(){return {}}
export default{
//在組件里面，data必須寫(xiě)函數(shù)
data() {
return{
msg: 'Hello Vue Component'
}
}
}
</script>
<style>
.msg{
color: red;
font-size: 30px;
}
</style>
要使用已寫(xiě)好的組件，在App.vue中
<template>
<div>
<img class="logo" src="./assets/logo.png" alt="logo"></img>
//3.使用組件標(biāo)簽
<Hello/>
</div>
</template>
<script>
//1.引入組件
import Hello from './components/Hello.vue'
export default{
//2.映射組件標(biāo)簽
components: {
Hello
}
}
</script>
<style>
.logo{
width: 200px;
height: 200px;
}
</style>
入口js：main.js，作用是創(chuàng)建Vue實(shí)例
import Vue from 'vue'
import App from './App.vue'
new Vue{
el: '#app',//頁(yè)面html上的div的id
components: { //將引入的App映射成標(biāo)簽
App
},
template: '<App/>'
}
效果：
image.png
