Vue43-单文件组件

news2025/2/22 9:47:13

一、脚手架的作用

单文件组件:xxx.vue,浏览器不能直接运行!!!

脚手架去调用webpack等第三方工具。

二、vue文件的命名规则

建议用下面的两种方式。(首字母大写!!!

三、vue文件的结构

对比非单文件组件, 非单文件组件的弊病:样式不能跟着组件走!

 非单文件组件的样式,要写在html标签中:

四、组件的暴露与引入 

4-1、暴露方式一:分别暴露

4-1、暴露方式二:统一暴露

4-3、暴露方式三:默认暴露(推荐)

 

一般用默认暴露,因为这样写,import引入简单:

4-4、统一暴露的简写形式:

五、App.vue汇总所有的组件

App.vue必须要有!汇总所有的组件

六、 入口文件:main.js

所有的组件都要听从vm的分配,所以要创建vm(不要写在xxx.vue文件中)

 xxx.vue文件就是组件。

vm创建在main.js文件中(main.js——入口文件)

 

main.js文件中的内容

1、el:说明服务哪个容器

2、说明组件的领头者:App。

注意:

main.js中没有容器,要专门为容器创建一个文件:index.html!!!

七、创建vue服务的容器:index.html 

或者index.html中不写<App>标签,写在main.js中:

八、运行index.html文件

报错原因:浏览器不能直接支持ES6的模块化语法:

 所以,运行的话,要用到脚手架!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1824554.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云原生系列之Docker常用命令

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列文章目录 云原生之…

大模型算法备案全网最详细说明(附附件)

本文要点&#xff1a;大模型备案最详细说明&#xff0c;大模型备案条件有哪些&#xff0c;《算法安全自评估报告》模板&#xff0c;大模型算法备案&#xff0c;大模型上线备案&#xff0c;生成式人工智能(大语言模型)安全评估要点&#xff0c;网信办大模型备案。 共分为以下几…

逻辑这回事(五)---- 资源优化

基础篇 Memory 避免细碎的RAM。将大的RAM拆分成多个小RAM&#xff0c;并根据地址关断可以优化功耗&#xff0c;但把多个小RAM合成大RAM可以优化面积。Block RAM和分布式RAM合理选择。根据存储容量&#xff0c;对Block RAM和分布式RAM的实现面积和功耗进行评估&#xff0c;选择…

「网络原理」IP 协议

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;计网 &#x1f387;欢迎点赞收藏加关注哦&#xff01; IP 协议 &#x1f349;报头结构&#x1f349;地址管理&#x1f34c;动态分配 IP 地址&#x1f34c;NAT 机制&#xff08;网络地址映射&am…

【计算机毕业设计】242基于微信小程序的外卖点餐系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

SX2106B 2A同步降压型DC/DC转换器芯片IC

一般描述 SX2106B是一款同步降压DC/DC转换器&#xff0c;提供宽广的4.5V至24V输入电压范围和2A连续负载电流能力。 SX2106B故障保护包括逐周期电流限制、UVLO、输出过电压保护和热关机。可调软启动功能&#xff0c;防止启动时的浪涌电流。该器件采用电流模式控…

四轴飞行器、无人机(STM32、NRF24L01)

一、简介 此电路由STM32为主控芯片&#xff0c;NRF24L01、MPU6050为辅,当接受到信号时&#xff0c;处理对应的指令。 二、实物图 三、部分代码 void FlightPidControl(float dt) { volatile static uint8_t statusWAITING_1; switch(status) { case WAITING_1: //等待解锁 if…

Syncovery:跨平台高效文件备份与同步的得力助手

在数字化时代&#xff0c;数据安全与文件同步已成为个人及企业不可或缺的需求。Syncovery作为一款专为Mac和Windows用户设计的文件备份和同步工具&#xff0c;凭借其高效、安全和易用的特点&#xff0c;赢得了广泛赞誉。 一、强大备份功能 Syncovery支持多种备份方案和数据格…

基于BERT微调+模板填充快速实现文本转DSL查询语句

前言 Text2SQL是指将自然语言转化为类SQL查询语句&#xff0c;使得用户的查询文本可以直接实现和数据库交互&#xff0c;本文介绍一种以BERT为基础模型&#xff0c;通过模板填充来实现的Text2SQL算法和产品化。 内容摘要 Text2SQL任务说明模板填充的思路条件列选择子模型搭建…

SOFTS: 时间序列预测的最新模型以及Python使用示例

近年来&#xff0c;深度学习一直在时间序列预测中追赶着提升树模型&#xff0c;其中新的架构已经逐渐为最先进的性能设定了新的标准。 这一切都始于2020年的N-BEATS&#xff0c;然后是2022年的NHITS。2023年&#xff0c;PatchTST和TSMixer被提出&#xff0c;最近的iTransforme…

【编程技巧】降低程序复杂度:控制逻辑与业务逻辑分离

为什么要降低代码复杂度 好的项目都是迭代出来的&#xff0c;所以代码肯定是会被人维护的 降低代码复杂度就是为了降低下一个维护人的维护成本&#xff0c;更简单地理解跟修改代码 代码组成 代码逻辑 控制逻辑 业务逻辑 控制逻辑 控制业务逻辑的代码 例如&#xff1a;加缓存…

计算机网络(7) 错误检测

一.校验和 使用补码计算校验和是一种常见的错误检测方法&#xff0c;应用于网络协议如IP和TCP。补码是二进制数的一种表示方法&#xff0c;可以有效地处理符号位和进位。下面是如何利用补码计算校验和的详细步骤和算数例子。 ### 计算步骤 1. **将数据分块**&#xff1a;将数…

七个备受欢迎的IntelliJ IDEA实用插件

有了Lombok插件&#xff0c;IntelliJ就能完全理解Lombok注解&#xff0c;使它们能如预期般工作&#xff0c;防止出现错误&#xff0c;并改善IDE的自动完成功能。 作为IntelliJ IDEA的常用用户&#xff0c;会非常喜欢使用它&#xff0c;但我们必须承认&#xff0c;有时这个IDE&…

Linux---系统的初步学习【 项目二 管理Linux文件和目录】

项目二 管理Linux文件和目录 2.1项目知识准备 ​ 文件是存储在计算机上的数据集合。在Windows系统中&#xff0c;我们理解的文件可以是文本文档、图片、程序、音乐、视频等。在Linux中&#xff0c;一切皆文件&#xff0c;也就是除了Windows中所理解的文件&#xff0c;目录、字…

AI模型部署:Triton Inference Server部署ChatGLM3-6B实践

前言 内容摘要 本篇先将搭建基础Triton设置模块&#xff0c;将ChatGLM3-6B部署为服务跑通&#xff0c;再加入动态批处理和模型预热来提升服务的性能和效率&#xff0c;包括以下几个模块 Docker镜像环境准备模型基础配置config.pbtxt自定义Python后端model.py模型服务加载卸载…

人工智能历史与现状

1 人工智能历史与现状 1.1 人工智能的概念和起源 1.1.1 人工智能的概念 人工智能 (Artificial Intelligence ,AI)是一门研究如何使计算机 能够模拟人类智能行为的科学和技术,目标在于开发能够感知、理解、 学习、推理、决策和解决问题的智能机器。人工智能的概念主要包含 以…

Stable Diffusion本地化部署详细攻略

一、硬件要求 内存&#xff1a;至少16GB 硬盘&#xff1a;至少60GB以上的磁盘空间&#xff0c;推荐SSD固态硬盘 显卡&#xff1a;推荐NVIDIA显卡 显存&#xff1a;至少4GB Stabl Diffusion因为是在本地部署&#xff0c;对显卡的要求比较高&#xff0c;如果经济能力可以的话…

如何打造电力全域知识中心:知识库融合知识图谱

前言 随着人工智能技术的进步&#xff0c;智能化成为产业转型升级的关键抓手&#xff0c;国家电网在“十四五”发展规划中提出加快公司数字化转型进程、推进能源互联网企业建设的要求。知识管理能力建设作为强化企如何打造电力全域知识中心&#xff1a;知识库融合知识图谱业运…

荣耀笔记本IP地址查看方法详解:轻松掌握网络配置技巧

在数字化时代的浪潮中&#xff0c;笔记本电脑已经成为我们生活和工作中不可或缺的重要工具。对于荣耀笔记本用户而言&#xff0c;掌握基本的网络配置技巧显得尤为重要。其中&#xff0c;查看IP地址是连接网络、配置设备、排除故障等场景下的关键步骤。本文将详细介绍荣耀笔记本…

Python 全栈系列252 一些小计划

说明 最近整体进展还比较顺利&#xff0c;不过也因为这样&#xff0c;好几个线头怎么继续平衡和推进需要稍微捋一下。 内容 按重要|紧急方法来看&#xff0c;线头1是重要且紧急的&#xff0c;QTV200也算重要且紧急&#xff0c;其他都算是重要不紧急。 线头1: 数据清洗 虽然…