工程化vue项目如何组织这些组件
index.html是项目的入口，其中<div id = 'app'> </div>是用于挂载所有组件的元素index.html中的script标签引入了一个main.js文件，具体的挂载过程在main.js中执行main.js是vue工程中非常重要的文件，他决定这项目使用哪些依赖，导入的第一个组件App.vue是vue中的核心组件，所有的其他组件都要通过该组件进行导入，该组件通过路由可以控制页面的切换
main.js
// 从vue框架中导入一个createApp函数import{createApp}from'vue'// 导入全局的css样式文件，该文件中的样式会作用到所有的.vue元素上import'./style.css'// 导入了一个App.vue的组件，并起了一个别名 Appimport App from'./App.vue'// 使用导入的App组件生成一个对象，并将该对象挂载到id值为app的元素上createApp(App).mount('#app')App.vue
自定义一下App.vue
<script setup></script><template><h1 class="h1cla">hello vue</h1></template><style scoped>.h1cla{color:red;}</style>这个App.vue里面还是可以引入别的vue文件
创建Haha.vue
App.vue中引入
重新引入
可以看出展示的位置和标签的位置有关
如下代码中报红（这里报红不是很影响），是因为语法上，要求template只能有一个一级子标签
可以在外层添加标签解决
在App.vue中再引入hihi.vue
