当前位置: 首页 > news >正文

Vue学习计划-Vue2--VueCLi(二)vuecli脚手架创建的项目内部主要文件分析

1. 文件分析

1. 补充:

  1. 什么叫单文件组件?

    一个文件中只有一个组件

  2. vue-cli创建的项目中,.vue的文件都是单文件组件,例如App.vue

2. 进入分析

1. package.json: 项目依赖配置文件:

在这里插入图片描述

如图,我们说主要的属性:

  • name: 项目的名称
  • version: 项目版本
  • scripts: 脚本入口
    • serve: 启动项目命令
    • build: 打包项目命令
  • dependencies: 生产环境的依赖包
  • devDependencies: 开发环境的依赖包
  • eslintConfig: eslint的配置
2. vue.config.js: vue-cli的配置文件,配置代理、打包优化等等
3. 项目的容器public文件下的index.html

在这里插入图片描述

4. 项目核心文件src

在这里插入图片描述

  1. main.js:项目的入口文件:
    在这里插入图片描述

不了解template的朋友,可以再看一下多文件组件的第4点(template模板使用组件案例),template属性内的内容会完全替换掉容器中的内容。
2. App.vue
在这里插入图片描述

  • 每一个 *.vue 文件都由三种顶层语言块构成:<template><script><style>
    • template块:我们也可以称之为模板块,在里面写我们的html代码或者自定义组件,
    • script块:我们也可以称之为逻辑块,在里面写我们的Vue逻辑代码,
    • style块:我们也可以称之为样式块,在里面写我们的css样式
  • 结合main.js看,我们为什么称之为App.vue为根组件呢?

    是因为我们整个的项目会把App.vue作为一个根,渲染到容器中,其他的功能以组件的形式最终被放到App.vue内部。所以App.vue也可以称之为所以组件的父组件。而其他的组件被称之为子组件。一次类推,子组件也会有子组件,所以就形成了我们的组件树模式。
    在这里插入图片描述

3.组件:因为安装项目时安装了vue-router,所以上述的App.vue截图里没有script块,我们此时打开views下的HomeView.vue查看:

在这里插入图片描述

5. 打包后的文件dist:

我们创建的项目最后要部署是要执行npm run build/yarn build命令的,最终打包出来的文件就是dist文件,如图:
在这里插入图片描述

我们打开index.html:
在这里插入图片描述

文件内除了容器标签,其他的什么标签页什么都没有,那么我们写的组件在哪里呢?

当我们执行打包命令的时候,脚手架vue-cli会将我们写的代码打包成js文件,最后通过script标签引入
在这里插入图片描述

*.js.map文件是方便我们调试的

分析到此吧,下一节我们开始正式进入单文件组件内部的学习

相关文章:

Vue学习计划-Vue2--VueCLi(二)vuecli脚手架创建的项目内部主要文件分析

1. 文件分析 1. 补充&#xff1a; 什么叫单文件组件&#xff1f; 一个文件中只有一个组件 vue-cli创建的项目中&#xff0c;.vue的文件都是单文件组件&#xff0c;例如App.vue 2. 进入分析 1. package.json: 项目依赖配置文件&#xff1a; 如图&#xff0c;我们说主要的属性…...

spring boot项目如何自定义参数校验规则

spring boot项目对参数进行校验时&#xff0c;比如非空校验&#xff0c;可以直接用validation包里面自带的注解。但是对于一些复杂的参数校验&#xff0c;自带的校验规则无法满足要求&#xff0c;此时需要我们自定义参数校验规则。自定义校验规则和自带的规则实现方式一样&…...

springboot整合xxl-job,通过代码进行调度中心注册开启任务等

背景&#xff1a;由于工作需要&#xff0c;当用户在登录时自动触发定时任务。而不需要我们手动到调度中心管理页面去创建任务。 工程介绍&#xff1a;分为两个项目&#xff0c;第一个是调度中心的项目&#xff08;xxl-job-admin&#xff09;。第二个是我们自己的项目&#xff0…...

k8s集群部分使用gpu资源的pod出现UnexpectedAdmissionError问题

记录一次排查UnexpectedAdmissionError问题的过程 1. 问题 环境 3master节点N个GPU节点 kubelet版本&#xff1a;v1.19.4 kubernetes版本&#xff1a;v1.19.4 生产环境K8S集群&#xff0c;莫名其妙的出现大量UnexpectedAdmissionError状态的Pod&#xff0c;导致部分任务执…...

自定义 el-select 和 el-input 样式

文章目录 需求分析el-select 样式el-input 样式el-table 样式 需求 自定义 选择框的下拉框的样式和输入框 分析 el-select 样式 .select_box{// 默认placeholder:deep .el-input__inner::placeholder {font-size: 14px;font-weight: 500;color: #3E534F;}// 默认框状态样式更…...

解决本地centos虚拟机重启,自动变换 ip 地址的问题

修改网卡配置文件 vi /etc/sysconfig/network-scripts/ifcfg-ens33 原配置&#xff1a; TYPE"Ethernet" PROXY_METHOD"none" BROWSER_ONLY"no" BOOTPROTO"dhcp" DEFROUTE"yes" IPV4_FAILURE_FATAL"no" IPV6INI…...

pt36项目短信OAth2.0

5、短信验证码 1、注册容联云账号&#xff0c;登录并查看开发文档&#xff08;以下分析来自接口文档&#xff09; 2、开发文档【准备1】&#xff1a;请求URL地址1.示例&#xff1a;https://app.cloopen.com:8883/2013-12-26/Accounts/{}/SMS/TemplateSMS?sig{}ACCOUNT SID# s…...

教师们如何一对一私发成绩?

在传统的教育中&#xff0c;老师通常会通过班级群或家长会等方式发布学生的成绩信息。然而&#xff0c;这种公开的方式可能会让一些学生感到尴尬和不安&#xff0c;因为他们可能不愿意让其他人知道他们的成绩情况。为了解决这个问题&#xff0c;今天我就给老师们推荐一款免费的…...

12.11

1.q&#xff0c;w&#xff0c;e亮led1&#xff0c;2&#xff0c;3&#xff1b; a&#xff0c;s&#xff0c;d灭led1&#xff0c;2&#xff0c;3&#xff1b; main.c #include "uar1.h"#include "led.h"void delay(int ms){int i,j;for(i0;i<ms;i){for…...

Spring JdbcTemplate

一、简介 Spring 框架对 JDBC 进行封装&#xff0c;使用 JdbcTemplate 方便实现对数据库操作。它是 spring 框架中提供的一个对象&#xff0c;是对原始 Jdbc API 对象的简单封装。spring 框架为我们提供了很多的操作模板类。 针对操作关系型数据&#xff1a; jdbcTemplateHibe…...

力扣编程题算法初阶之双指针算法+代码分析

目录 第一题&#xff1a;复写零 第二题&#xff1a;快乐数&#xff1a; 第三题&#xff1a;盛水最多的容器 第四题&#xff1a;有效三角形的个数 第一题&#xff1a;复写零 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思路&#xff1a; 上期…...

实现安装“自由化”!在Windows 11中如何绕过“您尝试安装的应用程序未通过微软验证”

这篇文章描述了如果你不能安装应用程序,而是当你在Windows 11中看到消息“您尝试安装的应用程序未通过微软验证”时该怎么办。完成这些步骤将取消你安装的应用程序必须经过Microsoft验证的要求。 使用设置应用程序 “设置”应用程序提供了绕过此警告消息的最简单方法,以便你…...

【mysql】下一行减去上一行数据、自增序列场景应用

背景 想获取if_yc为1连续账期数据 思路 获取所有if_yc为1的账期数据下一行减去上一行账期&#xff0c;如果为1则为连续&#xff0c;不等于1就为断档获取不等于1的最小账期&#xff0c;就是离当前账期最近连续账期 代码 以下为mysql语法&#xff1a; select acct_month f…...

CLIP在Github上的使用教程

CLIP的github链接&#xff1a;https://github.com/openai/CLIP CLIP Blog&#xff0c;Paper&#xff0c;Model Card&#xff0c;Colab CLIP&#xff08;对比语言-图像预训练&#xff09;是一个在各种&#xff08;图像、文本&#xff09;对上进行训练的神经网络。可以用自然语…...

入职字节外包一个月,我离职了。。。

有一种打工人的羡慕&#xff0c;叫做“大厂”。 真是年少不知大厂香&#xff0c;错把青春插稻秧。 但是&#xff0c;在深圳有一群比大厂员工更庞大的群体&#xff0c;他们顶着大厂的“名”&#xff0c;做着大厂的工作&#xff0c;还可以享受大厂的伙食&#xff0c;却没有大厂…...

SpringBoot的web开发

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 web开发1 web场景1.1 自动配置1.2 默认效果 &#x1f48e;总结 web开发 SpringBoot的web开发能力是由SpringMVC提供的 1 web场景 1.1 自动配置 整合web场景 <dependency><groupId>org.springframewo…...

传染病传播速度

题干 R0值是基本传染数的简称&#xff0c;指的是在没有采取任何干预措施的情况下&#xff0c;平均每位感染者在传染期内使易感者个体致病的数量。数字越大说明传播能力越强&#xff0c;控制难度越大。一个人传染的人的数量可以用幂运算来计算。假设奥密克戎的R0为10&#xff0…...

前端打包环境配置步骤

获取node安装包并解压 获取node安装包 wget https://npmmirror.com/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz 解压 tar -xvf node-v16.14.0-linux-x64.tar.xz 创建软链接 sudo ln -s 此文件夹的绝对路径/bin/node /usr/local/bin/node&#xff0c;具体执行如下…...

css的4种引入方式--内联样式(标签内style)、内部样式表(<style>)、外部样式表(<link>、@import)

1.内联样式&#xff08;Inline Styles&#xff09;&#xff1a;可以直接在HTML元素的style属性中定义CSS样式。 例如&#xff1a; <p style"color: red; font-size: 16px;">这是一段红色的文本</p>内联样式适用于对单个元素应用特定的样式&#xff0c;…...

GPT-4 变懒了?官方回复

你是否注意到&#xff0c;最近使用 ChatGPT 的时候&#xff0c;当你向它提出一些问题&#xff0c;却得到的回应似乎变得简短而敷衍了&#xff1f;对于这一现象&#xff0c;ChatGPT 官方给出了回应。 译文&#xff1a;我们听到了你们所有关于 GPT4 变得更懒的反馈&#xff01;我…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...