Vue3_工程文件之间的关系

工程化vue项目如何组织这些组件

1. index.html是项目的入口，其中<div id = 'app'> </div>是用于挂载所有组件的元素
2. index.html中的script标签引入了一个main.js文件，具体的挂载过程在main.js中执行
3. main.js是vue工程中非常重要的文件，他决定这项目使用哪些依赖，导入的第一个组件
4. App.vue是vue中的核心组件，所有的其他组件都要通过该组件进行导入，该组件通过路由可以控制页面的切换

main.js

// 从vue框架中导入一个createApp函数
import { createApp } from 'vue'

// 导入全局的css样式文件，该文件中的样式会作用到所有的.vue元素上
import './style.css'

// 导入了一个App.vue的组件，并起了一个别名 App
import 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