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

news/2025/3/19 3:42:11/

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.ppmy.cn/news/1261655.html

相关文章

vue+django 开发环境跨域前后端联调配置

vue环境是127.0.0.1:8080&#xff0c;django环境是127.0.0.1:8000 要解决url相对路径和Axios跨域权限问题。 注意&#xff1a;程序发起了一个 POST 请求&#xff0c;但请求的 URL 没有以斜杠结尾。Django 默认设置是无法执行重定向到带斜杠 URL的。例如&#xff1a;url http:/…

服务器数据恢复—ocfs2文件系统被格式化为其他文件系统如何恢复数据?

服务器故障&#xff1a; 由于工作人员的误操作&#xff0c;将Ext4文件系统误装入到存储中Ocfs2文件系统数据卷上&#xff0c;导致原Ocfs2文件系统被格式化为Ext4文件系统。 由于Ext4文件系统每隔几百兆就会写入文件系统的原始信息&#xff0c;原Ocfs2文件系统数据会遭受一定程度…

数组实现循环队列(增设队列大小size)

目录 一、前言 1.如何实现循环&#xff1f; 2.如何判断队列为空&#xff1f; 3.如何判断队列为满&#xff1f; 二、循环队列的结构定义 三、循环队列的创建及其初始化 四、入队 五、出队 六、取队头元素 七、取队尾元素 八、循环队列判空 九、循环队列判满 十、循环…

玩转系统|利用HestiaCP自建NS解析及邮局并利用MailGun进行发信

前述 HestiaCP是一个VestaCP分叉来的产物&#xff0c;而同样作为VestaCP分叉来的myVesta也具有类似的功能。VestaCP本身作为一个社区的产区&#xff0c;其仅仅有一个商业插件需要每月付费5USD进行使用&#xff0c;因此为了达到完全开放使用的目的&#xff0c;这里选择使用Hest…

2024年值得关注的8个未来数据库

2024年值得关注的8个未来数据库 关系型数据库管理系统在数据库技术领域占据主导地位已经多年了。当SQL在1970年代首次出现时&#xff0c;关系型数据库管理系统的使用和受欢迎程度迅速提升。很快&#xff0c;MySQL成为了大多数公司和团队首选的数据库。 然而&#xff0c;2023年…

代码混淆技术探究与工具选择

代码混淆技术探究与工具选择 引言 在软件开发中&#xff0c;保护程序代码的安全性是至关重要的一环。代码混淆&#xff08;Obfuscated code&#xff09;作为一种常见的保护手段&#xff0c;通过将代码转换成难以理解的形式来提升应用被逆向破解的难度。本文将介绍代码混淆的概…

Perfectly Clear Workbench Mac/Win中文版——提升照片处理效率的必备工具

Perfectly Clear Workbench是一款功能强大的照片处理工具&#xff0c;现已推出Mac和Win中文版。无论您是摄影爱好者、专业摄影师&#xff0c;还是社交媒体达人&#xff0c;这款软件都能帮助您提升照片处理效率&#xff0c;使您的作品更加出色。 Perfectly Clear Workbench的主…

220V降12V鱼缸加热棒电源芯片WT5106

220V降12V鱼缸加热棒电源芯片WT5106 WT5106&#xff0c;一款高效率高精度的非隔离降压开关电源恒压控制驱动芯片&#xff0c;赋予你的设备超能电力&#xff01;它适用于85VAC到265VAC全范围输入电压的非隔离Buck、Buckboost拓扑结构&#xff0c;为你的小家电、电机驱动、继电器…