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文件是方便我们调试的

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

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

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

相关文章

性能测试经典面试题(带答案)!

概述一下性能测试流程&#xff1f; 1.分析性能需求。挑选用户使用最频繁的场景来测试。确定性能指标&#xff0c;比如&#xff1a;事务通过率 为100%&#xff0c;TOP99%是5秒&#xff0c;最大并发用户为1000人&#xff0c;CPU和内存的使用率在70%以下2.制定性能测试计划&…

Ubuntu20.04使用cephadm部署ceph集群

文章目录 Requirements环境安装Cephadm部署Ceph单机集群引导&#xff08;bootstrap&#xff09;建立新集群 管理OSD列出可用的OSD设备部署OSD删除OSD 管理主机列出主机信息添加主机到集群从集群中删除主机 部署Ceph集群 Cephadm通过在单个主机上创建一个Ceph单机集群&#xff0…

游戏开发库

整理了38个Python游戏开发库 https://zhuanlan.zhihu.com/p/505095419 https://zhuanlan.zhihu.com/p/262012936 2023 年最佳游戏引擎推荐 https://zhuanlan.zhihu.com/p/624771157 十大开源游戏引擎深入比较之美 https://blog.51cto.com/u_15273495/2915535 panda3d https:…

【EI会议征稿中】第三届网络安全、人工智能与数字经济国际学术会议(CSAIDE 2024)

第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&#xff09; 2024 3rd International Conference on Cyber Security, Artificial Intelligence and Digital Economy 第二届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2023&…

Verilog基础:寄存器输出的两种风格

相关文章 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 Verilog中的寄存器操作一般指的是那些对时钟沿敏感而且使用非阻塞赋值的操作。例如状态机中的状态转移&#xff0c;实际上就是一种寄存器操作&#xff0c;因为这相…

听GPT 讲Rust源代码--src/tools(10)

File: rust/src/tools/rust-analyzer/crates/ide-assists/src/handlers/generate_is_empty_from_len.rs 在Rust源代码中&#xff0c;rust-analyzer是一个Rust语言的IDE插件和代码分析器。其中&#xff0c;generate_is_empty_from_len.rs是rust-analyzer中的一个处理程序&#x…

终于有人把tcp、http、rpc和grpc总结完整了

随着微服务的迅速发展&#xff0c;各大互联网企业也投入到微服务的​使用种。微服务最大的特点是&#xff0c;跨进程、跨服务、跨语言之间的调用&#xff0c;使得我们能够像调用本地类、函数一样。当微服务具备该特点&#xff0c;将我们复杂的业务拆分成不同的服务&#xff0c;…

CentOS7安装Docker,DockerCompose

安装docker 1、卸载docker 查看是否有旧版本docker docker info首先检测我们虚拟机是否已经安装过Docker&#xff0c;如果安装则需卸载。代码中“\”符号为换行符&#xff0c;相当于一行内容分为多行&#xff0c;这是检测docker的各种组件 yum remove docker \docker-clien…

VGG模型

概念&#xff1a; CNN感受野 在卷积神经网络中&#xff0c;决定某一层输出结果中的一个元素所对应的输入层的区域大小&#xff0c;被称作感受野&#xff08;receptive field&#xff09;。通俗的解释是&#xff0c;输出feature map上的一个单元对应输入层上的区域大小。 VGG…

协同过滤算法springboot+java+ssm高校图书馆图书借阅管理系统k32vr

课题主要分为四大模块&#xff1a;即管理员模块&#xff0c;员工模块&#xff0c;教师模块和学生模块&#xff0c;主要功能包括&#xff1a;首页&#xff0c;个人中心&#xff0c;员工管理&#xff0c;学生管理&#xff0c;教师管理&#xff0c;图书分类管理&#xff0c;图书信…

wsl2 ubuntu上搭建OpenIM

文档 踩坑 版本要选择好&#xff0c;不要直接main来跑&#xff0c;目前版本OpenIMServer 有release-v3.3和release-v3.4&#xff0c;对应Chat版本的release-v1.4和release-v1.4。但我跑3.4是有问题的&#xff0c;切到3.3可以跑通。export OPENIM_IP"http://ip:10002"…

HNU计算机结构体系-实验2:CPU动态指令调度Tomasulo

文章目录 实验2 CPU动态指令调度Tomasulo一、实验目的二、实验说明三、实验内容问题1&#xff1a;问题2&#xff1a;问题3&#xff1a;问题4&#xff1a;问题5&#xff1a; 四、思考题问题1&#xff1a;问题2&#xff1a; 五、实验总结 实验2 CPU动态指令调度Tomasulo 一、实验…

【数据挖掘】国科大苏桂平老师数据库新技术课程作业 —— 第三次作业

part 1 设计一个学籍管理小系统。系统包含以下信息&#xff1a; 学号、学生姓名、性别、出生日、学生所在系名、学生所在系号、课程名、课程号、课程类型&#xff08;必修、选修、任选&#xff09;、学分、任课教师姓名、教师编号、教师职称、教师所属系名、系号、学生所选课…

汽车网络安全--ISO\SAE 21434解析(一)

目录 1.标准总览 2.示例分析 2015年美国黑帽大会,知名网络安全专家Charlie Miller和Chris Valasek详细描述了他们是如何在有限距离下通过WiFI入侵到Jeep大切诺基的中控系统,从此关于汽车网络安全的讨论拉开了序幕。 2016 年,ISO 道路车辆技术委员会与 SAE 联合成立 SC32/…

【算法每日一练]-结构优化(保姆级教程 篇5 树状数组)POJ3067日本 #POJ3321苹果树 #POJ2352星星

目录 今天知识点 求交点转化求逆序对&#xff0c;每次操作都维护一个y点的前缀和 树的变动转化成一维数组的变动&#xff0c;利用时间戳将节点转化成区间 先将y排序&#xff0c;然后每加入一个就点更新求一次前缀和 POJ3067&#xff1a;日本 思路&#xff1a; POJ3321苹…

案例063:基于微信小程序的传染病防控宣传系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder …

leetcode系列:反转链表的形象表示

反转链表是一道比较简单的题&#xff0c;主要考察的是对链表数据结构的理解和双指针应用&#xff0c;比较容易出错的地方是指针的移动顺序。在练习的过程中想到了一个比较形象的表示方法&#xff0c;于是记录下来。 # Definition for singly-linked list. # class ListNode: #…

地理信息系统概论

地理信息系统概论 第一章导论第二章地理信息系统的数据结构第三章空间数据的处理第四章地理信息系统空间数据库第五章空间分析的原理与方法第六章地理信息系统的应用模型第七章地理信息系统的设计与评价第八章地理信息系统产品的输出与设计 第一章导论 数据与信息的关系&#…

Java基础-java.util.Scanner接收用户输入

目录 1. 导入所需要的jar包2. 编写代码运行3. 输出运行结果 1. 导入所需要的jar包 import java.util.Scanner;2. 编写代码运行 public class ScannerDemo {public static void main(String[] args) {/** 使用Scanner接收用户键盘输入的数据* 1. 导包&#xff1a;告诉程序去JD…

【Python】translate包报错RuntimeError: generator raised StopIteration

根据网上有些教程&#xff0c;使用translate包翻译稍微复杂语句的时候&#xff0c;会报错RuntimeError: generator raised StopIteration 实际测试之后发现&#xff0c;主要是from_lang、to_lang两个参数的设置有问题&#xff0c;比如有人说中文写"Chinese"、"Z…