news 2026/4/16 11:05:02

Vue3_工程文件之间的关系

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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的组件,并起了一个别名 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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/15 20:48:33

思考与练习(第十章 文件与数据格式化)

一、单项选择题&#xff08;本大题共 15 小题&#xff09;1、在 Python 中&#xff0c;打开文件时使用的内置函数是&#xff1a;① load()② read()③ open()④ file()2、以下哪种文件打开模式会清空文件内容&#xff1f;① r② w③ a④ x3、使用 with 语句打开文件的主要优点是…

作者头像 李华
网站建设 2026/4/10 22:24:40

Linly-Talker生成视频的人物眨眼频率可调吗?

Linly-Talker 生成视频的人物眨眼频率可调吗&#xff1f; 在当前 AI 数字人技术快速渗透教育、客服、直播等场景的背景下&#xff0c;一个看似微小却直接影响用户体验的问题逐渐浮出水面&#xff1a;虚拟人物会不会“眨眼睛”&#xff1f;眨得自然吗&#xff1f;能不能按需调节…

作者头像 李华
网站建设 2026/4/13 18:12:23

Linly-Talker训练数据来源是否公开?伦理争议回应

Linly-Talker训练数据来源是否公开&#xff1f;伦理争议回应 在虚拟主播、数字员工和AI教师逐渐走入日常生活的今天&#xff0c;一个名为 Linly-Talker 的开源项目悄然走红。它只需一张人脸照片和一段文本或语音输入&#xff0c;就能生成口型同步、表情自然的讲解视频&#xff…

作者头像 李华