前端工程化-vue项目开发流程

news2024/11/15 20:58:57

vue项目创建参考该文: 

前端工程化-vue项目创建-CSDN博客

 

组件就是页面的意思;

默认的App.vue根组件如下图

我们可以修改为如下图所示,注意script的选择, 

 

<html>中的标签,此处是放在<template>中,其余两项一样。 一个组件(页面)包含三项。

热部署:在不停止程序、不刷新页面的情况下,修改了App.vue中的代码,网页中http://localhost:9000/#/会自动展示。

App.vue中的script中使用export,在main.js中就可以使用import。

一、自定义组件 

 

 

在自定义的组件中,<template>中,一定要使用布局标签<div> 

在views文件中创建自定义组件,注意组件名必须是以View结尾,且扩展名为.vue。

 二、在根组件App.vue中引入自定义组件

 

根组件中,标签中,按照自定义组件的名称写标签,会自动补全。 

script中也会自动填写。 

引入两个自定义组件的案例: 

 

 

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

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

相关文章

[php7系列]--php7里的返回类型声明和标量类型声明及不要用isset判断数组是否定义某个KEY-最好使用array_key_exists

一、[php7系列]--php7里的返回类型声明和标量类型声明 php7里增加了返回类型声明和标题类型声明&#xff0c;可以理解为对一个方法的输入输出进行了类型验证&#xff0c;在PHP7之前&#xff0c;方法里的数组、对象参数是有类型声明的&#xff0c;但其它的整数、字符串等类型声明…

Idea设置自动导包

Idea设置自动导包 【File】→【Setting】(或使用快捷键【Crlt Shift S】)打开Setting设置。 点击【Editor】→【General】→【Auto Import】。勾选自定导包的选项&#xff0c;并确定&#xff0c;如下&#xff1a;

心大陆AI科学养育,共情陪伴孩子的幸福童年!

3-8岁是宝宝的关键期&#xff0c;在这个阶段也是父母最费心的时候&#xff1a;孩子吃饭、洗澡、睡觉总爱拖延、玩玩具三分钟热度、上课小动作多、语言能力弱&#xff0c;讲话不连贯容易暴怒、天性好奇&#xff0c;总有十万个为什么等等...... 这些情况在儿童早期发育阶段爸爸妈…

优思学院|如何透过客户忠诚度分析决定六西格玛改善项目?

客户忠诚度分析提供了一个框架&#xff0c;从而便于公司理解客户不再忠诚的原因&#xff0c;并做出相应的改善。客户忠诚度不仅是要关注现有的客户&#xff0c;还应包括已失去的客户。客户忠诚度研究有助于公司发现使客户转向竞争对手的有关客户服务、产品或可靠性等的一些问题…

论文阅读:A Survey on Evaluation of Large Language Models-鲁棒性相关内容

A Survey on Evaluation of Large Language Models 只取了鲁棒性相关的内容 LLMs&#xff1a;《A Survey on Evaluation of Large Language Models大型语言模型评估综述》理解智能本质(具备推理能力)、AI评估的重要性(识别当前算法的局限性设 对抗鲁棒性是衡量大型语言模型&…

C语言进阶 11.结构体

C语言进阶 11.结构体 文章目录 C语言进阶 11.结构体11.1. 枚举11.2. 结构类型11.3. 结构与函数11.4. 结构中的结构11.5. 类型定义11.6. 联合11.7. PAT11-0. 平面向量加法(10)11-1. 通讯录的录入与显示(10) 11.1. 枚举 常量符号化: 用符号而不是具体的数字表示程序中的数字 cons…

基于FPGA的数字信号处理(19)--行波进位加法器

1、10进制加法是如何实现的&#xff1f; 10进制加法是大家在小学就学过的内容&#xff0c;不过在这里我还是帮大家回忆一下。考虑2个2位数的10进制加法&#xff0c;例如&#xff1a;15 28 43&#xff0c;它的运算过程如下&#xff1a; 个位两数相加&#xff0c;结果为5 8 1…

Linux系统配置STM32的开发环境(代码编辑,编译,下载调试)

常见的stm32开发都是直接使用keil-MDK工具的&#xff0c;这是个集成开发环境&#xff0c;包含了代码编辑&#xff0c;编译&#xff0c;下载&#xff0c;调试&#xff0c;等功能&#xff0c;而且keil还是个图形化操作工具&#xff0c;直接可以点击图标案件就可以实现编译下载啥的…

实现物理数据库迁移到云上

实现物理数据库迁移到云上 以下是一个PHP脚本,用于实现物理数据库迁移到云上的步骤: <?php// 评估和规划 $databaseSize = "100GB"; $performanceRequirements = "high"; $dataComplexity = "medium";$cloudProvider = "AWS"; …

Python小工具之httpstat网络分析

一、简介 Python httpstat是一个基于Python的命令行工具&#xff0c;用于测量HTTP请求的性能和状态信息。它能够向目标服务器发送HTTP请求&#xff0c;并显示详细的统计信息&#xff0c;包括DNS解析时间、建立连接时间、TLS/SSL握手时间、首字节时间、总时间等。这些信息对于排…

AI写作有用?未成年不准看巴黎奥运会!——早读(逆天打工人爬取热门微信文章解读)

早上动力AI该作的念头&#xff0c;发觉改完&#xff0c;狗屁不是 引言Python 代码第一篇 洞见 最残忍的社会现实&#xff1a;你能挣多少钱&#xff0c;都是被设计好的第二篇 啦啦啦 开剪辑啦结尾 引言 呀 我们正年轻着 最近觉得有点烦 因为自己有点堕怠 但是呢 越烦越急躁 导致…

网络协议一 : 搭建tomacat,intellij IDEA Ultimate 的下载,安装,配置,启动, 访问

需要搭建的环境 1.客户端--服务器开发环境 客户端&#xff1a;浏览器&#xff08;HTMLCSSJS&#xff09; 服务器&#xff1a;JAVA 1.安装JDK&#xff0c;配置JAVA_HOME 和 PATH 2.安装Tomcat 3.安装IDE--intellij IDEA Ultimate 是旗舰版的意思。 2.TOMCAT 的下载和解…

基于嵌入-对比学习的联邦知识图谱补全

1 引言 1.1 现存问题 在联邦学习中&#xff0c;跨客户端的数据异质性(即非相同分布的数据)是主要挑战&#xff0c;因为当数据异质性存在时&#xff0c;本地目标可能与全局目标不同。 如图所示&#xff0c;School KG中的三元组表示Bob和Jack的学术信息&#xff0c;而ecommerc…

Redis与缓存

文章目录 Redis与缓存一致性问题大Key问题缓存穿透缓存击穿缓存雪崩 Redis与缓存 Redis作为缓存具有高性能、丰富的数据结构和灵活的过期机制等优点。由于Redis将数据存储在内存中&#xff0c;它能提供极低的延迟和高吞吐量&#xff0c;适合用于缓存数据库查询结果、会话数据和…

集成测试:确保软件模块协同工作的关键步骤

目录 前言1. 集成测试的概念1.1 增量集成测试1.2 大爆炸集成测试 2. 集成测试的主要作用2.1 确保模块间正确交互2.2 发现设计缺陷2.3 提高系统稳定性 3. 集成测试在整个测试过程中的地位3.1 从单元测试到集成测试3.2 从集成测试到系统测试 4. 常用的集成测试工具4.1 JUnit4.2 T…

嵌入式开发测试实训室解决方案

一、建设背景 随着物联网、人工智能等技术的飞速发展&#xff0c;嵌入式系统作为这些技术的重要载体&#xff0c;其重要性日益凸显。为了满足市场对嵌入式技术人才的需求&#xff0c;培养具有扎实理论基础、熟练实践技能及创新能力的嵌入式开发工程师&#xff0c;设计并建设一…

3. 类的生命周期

类的生命周期是指一个类被加载&#xff0c;使用&#xff0c;卸载的一个过程&#xff0c;如下图&#xff1a; 类的加载阶段&#xff1a; 加载(Loading)阶段第一步是类加载器根据类的**全限定名&#xff08;也就是类路径&#xff09;**通过不同的渠道以二进制流的方式获取字节码…

ClkLog:开源用户行为分析框架,让数据分析更轻松

ClkLog&#xff1a;开源用户行为分析框架&#xff0c;让数据分析更轻松 在数据驱动的时代&#xff0c;找到一个好用的用户行为分析工具真是难上加难。但是今天你有福了&#xff0c;开源免费的 ClkLog 就是你的不二选择&#xff01;本文将为你详细介绍 ClkLog 的功能特点、技术架…

OpenCV 彩色直方图

彩色直方图 &#xff08;1&#xff09;直方图是图像中像素强度分布。 &#xff08;2&#xff09;直方图统计了每一个强度值所具有的像素个数。 &#xff08;3&#xff09;cv2.calcHist(images, channels, mask, histSize, ranges) import cv2 import matplotlib.pyplot as …

2023年系统架构设计师考试总结

原文链接&#xff1a;https://www.cnblogs.com/zhaotianff/p/17812187.html 上周六参加了2023年系统架构设计师考试&#xff0c;这次考试与以前有点区别&#xff0c;是第一次采用电子化考试&#xff0c;也是教材改版后的第一次考试。 说说考前准备&#xff1a;为了准备这次考试…