页面中可以看见的内容不再在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
