? ? ? ? 頁面中可以看見的內容不再在index.html中進行編輯，而是在App.vue中進行編輯。
組件化開發
? ? ? ? 在傳統的html開發中，一個頁面的資源往往都寫在同一個html文件中。這種模式在開發小規模、樣式簡單的項目時會相當便捷，但當項目規模越來越大，一個頁面中統括的代碼量越來越多，此時傳統的開發模式會對日后的測試和維護造成極大不便。
? ? ? ? 就同后端編程中分entity、datasoure等包的思想一樣，組件化開發是將一個頁面中的不同區域的內容分成一個個組件，每個組件都有自己的結構、樣式、行為。最后在統括到一起。這樣便于代碼復用提高開發效率，也便于維護降低運維成本。
?????????組件也分根組件和普通組件，普通組件可以有很多個，但根組件只能有一個（根組件只能有一個的限制只在vue2有，vue3的更新解除了這個限制）
App.vue
? ? ? ? 下面是App.vue中的主要部分分別分為三個：<template>、<script>、<style>?
<template>：
? ? ? ? 結構，相當于原html中的<head><body><footer>部分。原本的index.html現在只做一個容器，在Vue中，所有的元素的編寫最后都會集成在根組件中，再渲染進html容器中。
? ? ? ? 在Vue中，<template>中根盒子<div>只能有一個，而Vue3則沒有這個限制。
?<script>：
? ? ? ? 編寫js邏輯，原本在Vue對象中編寫的data、watch、methods（事件）、鉤子函數等屬性和行為也在這里面寫。
<script>
//意味導出當前組件的配置項
//在這里面寫原本在Vue對象中編寫的data、watch、methods（事件）、鉤子函數等屬性和行為
export default {created() {},methods: {fn(){alert("點擊了盒子");}}
}
</script><style>：
? ? ? ? 樣式，可支持less，需要裝包less和less-loader（yarn add less lessloader -D）。
? ? ? ? 默認不支持less，需要我們寫個lang="less"來聲明使用less
?
)
