vue基础教程(4)——深入理解vue项目各目录

博主个人微信小程序已经上线:【中二少年工具箱】。欢迎搜索试用


正文开始

  • 专栏简介
  • 1. 总览
  • 2. node_modules
  • 3.public
  • 4.src
  • 5.assets
  • 6.components
  • 7.router
  • 8.stores
  • 9.views
  • 10.App.vue
  • 11.main.js
  • 12.index.html


专栏简介

本系列文章由浅入深,从基础知识到实战开发,非常适合入门同学。

零基础读者也能成功由本系列文章入门,但如果您具备以下基础,将会事半功倍:

  1. HTML基础
  2. css基础
  3. js基础

当然,即使从未接触过前端代码的小白,也能轻松学习本系列课程,因为我会在文章中简略穿插前端基础知识。

由于各平台对专栏文章的支持度不同,所以如果您看到这篇文章的平台,系统学习专栏文章的操作不够丝滑,可以先关注小程序,后续小程序会开发专栏博客功能。

可以直接搜索【中二少年工具箱】,也可通过
二维码知乎地址:https://www.zhihu.com/question/53230344/answer/3180004527
二维码csdn地址:https://bbs.csdn.net/topics/618134623
二维码头条地址:https://www.toutiao.com/w/1790412984859652/
等入口进入,扫码关注。


1. 总览

下面是新创建项目的目录:
在这里插入图片描述
其中我们需要了解的有一下几个文件:

  1. node_modules
  2. public
  3. src
  4. assets
  5. components
  6. router
  7. stores
  8. views
  9. App.vue
  10. main.js
  11. index.html
  12. vite.config.js

下面我们一一介绍这些文件的作用。

2. node_modules

这个文件夹存放项目依赖,我们使用npm或者yarn下载的插件,以及插件所依赖的一些资源,都会下载到node_modules文件夹。这个我们不需要过多关注。

3.public

这个文件夹存放项目里的一些静态资源,包括图片/css文件/js文件等。后面我们还会讲到一个存放静态资源的文件夹,这两个文件夹的不同之处在于,public存放的资源,不会被编译。

也就是说,public中存放的资源是什么,最终打包vue后的项目根目录就会存在什么,而后面将要讲解的静态资源路径,则会被编译,被编译后,文件会被压缩,混淆等等,无法正常阅读和修改。

所以我们经常在public中存放一些公共资源,或者在打包后,仍然可能需要修改的文件。

4.src

src是项目的主要文件路径,里面存放着vue所有需要编译的文件。

我们需要简单理解前端的编译。我们了解,vue文件的后缀为.vue,但是浏览器其实并不认识何为.vue文件,它只认识.html文件。所以如果直接把.vue文件拖拽到浏览器中,是无法正常显示的。

想要把vue文件变成浏览器认识的html文件,就需要用到编译。编译的过程,简单而言,就是nodejs负责把src下面所有的vue文件,js文件,css文件,图片文件等,都读取并按照规则组合,变成一个巨大的html文件,最终浏览器运行的是这个html文件。

只有src下的文件才会参与上述的编译过程,其它文件并不会被编译。

也正是由于需要编译,vue的运行和打包,才需要nodejs环境。

5.assets

与上面的public对应,也是一个存放静态资源的文件夹。

不同的是,assets中存放的静态资源会被编译,而上面已经讲过,public中的静态资源不会被编译。

6.components

存放项目中的公共组件,公共组件往往是一些基础通用的组件,可以被复用到更多位置。

7.router

存放路由文件。路由的概念,简而言之,就是输入一个网址,找到对应的页面。我们输入的网址,即是路由地址。

由于网址的前面部分,是域名地址,所有页面都是一致的,只有后面的部分不同,所以在vue中,网址后半部分,即是路由地址。

初学者有个基础概念即可,入门阶段并不需要深入了解路由,很多时候我们只需要知道怎么写可以构建一个完整路由即可。先记结论,再学原理。

8.stores

存放vue状态管理的文件。vue有两个重要的基础插件,一是路由插件,二是状态管理插件。

路由插件上面已经说过,是控制页面跳转的。状态管理插件顾名思义,是管理状态的。这里的状态一般是全局状态,也就是说写在状态管理中的值,可以在项目src目录下,任何地方操作和使用,从而达到全局状态管理的目的。

实现全局状态管理的插件时pinia,而pinia如何应用,如何定义的js文件,则默认放在stores目录下。

9.views

这里存放和业务相关的前端页面,项目中大部分的.vue文件都是存放在views文件夹下。

10.App.vue

这是我们所有vue文件的入口文件。

vue有组件的概念,也就是所有的vue页面都是由一个个组件组合而成。项目中所有的vue组件,都是组合起来后,再放到App.vue中。这其中有很多细节,涉及到路由的概念,但是并不影响我们理解App.vue——所有vue文件的入口。

11.main.js

通过观察main.js中的代码可以发现,main.js主要有两个作用:一是引入各种插件,全局样式;二是将App.vue与index.html连接起来。

12.index.html

观察项目目录,可以发现,整个项目中只有一个html文件——index.html。

index.html中的关键代码如下:

  <body><div id="app"></div><script type="module" src="/src/main.js"></script></body>

这个文件里的代码非常简洁,一个div元素,提供id为app的容器,用来盛放需要显示的前端代码。一个是script标签,用来引入main.js文件。

main.js文件里除了引入插件的代码,还有将App.vue与index.html连接起来的代码:

app.mount('#app')

将App.vue,main.js,index.html三个文件串联起来,就能把三者的关系梳理清楚。

index.html把main.js引入,把main.js中的功能引入页面。然后main.js中负责引入App.vue组件,并把App.vue中的所有内容挂载到id为app的容器中。最终App.vue是组件的入口,负责将所有的vue组件整合在一起。

三者脉络清晰后,就能把所有的vue组件编译后,都挂载到#app容器中。

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

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

相关文章

docker部署若依项目

目录 目录 一、搭建局域 二、redis安装 1.创建目录 2. redis.conf修改 三、MySQL安装 1. 安装 2. 设置远程连接 3. 创建数据库 四、若依后端项目搭建 1. 切换到家目录 2. 上传jar包 3. 上传Dockerfile文件 4. 构建镜像 5. 运行容器 6. 查看运行情况 7. 测试(自己…

AD20软件使用指南:拼板操作与Gerber文件生成详解

文章目录 一、前言二、拼板1.创建新的PCB&#xff0c;用于放置拼板文件2.放置拼板阵列3.设置阵列信息4.V割拼板&#xff0c;放置工艺边和定位孔和光点5.完成拼板 三、生成Gerber文件1.输出Gerber文件2.选择单位和格式3.选择输出的图层4.生成Gerber文件5.生成钻孔文件 四、上传嘉…

01.AJAX 概念和 axios 使用

01.AJAX 概念和 axios 使用 1. 什么是 AJAX ? 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中&#xff0c;使用 AJAX技术&#xff08;XHR对象&#xff09;发起获取省份列表数据的请求&#xff0c;服务器代码响应准备好的省份列表数据给前端&#xff0c;前端拿…

使用Pandas 玩转透视表(pivot_table)

也许大多数人都有在Excel中使用数据透视表的经历&#xff0c;其实Pandas也提供了一个类似的功能&#xff0c;名为 pivot_table。虽然pivot_table非常有用&#xff0c;但是我发现为了格式化输出我所需要的内容&#xff0c;经常需要记住它的使用语法。所以&#xff0c;本文将重点…

腾讯云学生服务器多少钱?怎么申请?

2024年腾讯云学生服务器优惠活动「云校园」&#xff0c;学生服务器优惠价格&#xff1a;轻量应用服务器2核2G学生价30元3个月、58元6个月、112元一年&#xff0c;轻量应用服务器4核8G配置191.1元3个月、352.8元6个月、646.8元一年&#xff0c;CVM云服务器2核4G配置842.4元一年&…

微信小程序(五十一)页面背景(全屏)

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.页面背景的基本写法 2.去除默认上标题实习全屏背景 3. 背景适配细节 源码&#xff1a; index.wxss page{/* 背景链接 */background-image: url(https://pic3.zhimg.com/v2-a76bafdecdacebcc89b5d4f351a53e6a_…

python 截取字符串string.split

目录 作用语法只要第一个值获得第3个值遍历 作用 根据某个符号对数据进行截取 从而获得自己想要的内容 语法 使用’string.split’ 方法 对字符串’123/abc/BPYC’ 以 ‘/’ 进行截取 string "123/abc/BPYC" substring string.split("/") print(subs…

【目标分类图像增强方法】

图像增强方法及其原理 目标分类图像增强是一种用于提高深度学习模型泛化能力的技术&#xff0c;通过在训练过程中对原始图像进行各种变换来增加模型所见数据的多样性。以下是几种常见的图像增强方法及其原理&#xff1a; 几何变换&#xff1a; 旋转&#xff08;Rotation&#…

【排序】435. 无重叠区间

435. 无重叠区间 方法概述 整体解决方案分为两个部分&#xff1a; eraseOverlapIntervals(int[][] intervals)&#xff1a;这是主要方法&#xff0c;用于计算并返回需要移除的区间数量。intervalSchedule(int[][] intvs)&#xff1a;这个辅助方法用于通过贪心算法计算出最大…

【SEO 初学者指南】搜索引擎的工作原理:抓取、索引、排名

了解搜索引擎的工作原理&#xff0c;从抓取和索引到排名和惩罚&#xff0c;以及优化和故障排除技巧。 搜索引擎是如何工作的&#xff1f; 搜索引擎通过抓取、索引和排名互联网内容来工作。首先&#xff0c;爬虫通过网络爬虫发现在线内容。然后&#xff0c;索引分析内容并将其…

Spring核心原理

目录 IOCxml配置创建对象xml配置注入属性自动装配引入外部属性文件注解创建对象注解注入属性 AOP方式一 : 通过JDK接口实现方式二 : 通过AspectJ实现AOP JdbcTemplateSpring事务管理整合Mybatis实现一实现二 WebFlux函数式编程 Spring是一个开放源代码的JavaEE设计层面框架&…

C++:拷贝构造函数

1.概念 在现实生活中&#xff0c;可能存在一个与你一样的自己&#xff0c;我们称之为双胞胎。那在创建对象的时候&#xff0c;可否创建一个与已存在对象一模一样的新对象呢&#xff1f;答案是可以的&#xff0c;这就要通过拷贝构造函数来实现了。 拷贝构造函数&#xff1a;只有…

微服务基础

目录 一、单体架构 二、分布式架构 三、微服务 四、微服务结构 五、SpringCloud 六、服务拆分 七、远程调用 一、单体架构 单体架构就是将业务的所有功能都集中在一个项目中进行开发&#xff0c;并打成一个包进行部署。 他的优点很明显&#xff0c;就是架构简单&#xff…

C++的类和对象(四):拷贝构造函数

目录 拷贝构造函数 特性 自定义类型的传值传参和传引用传参对比 赋值运算符重载 拷贝构造函数 基本概念&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用&#xff08;一般常用const修饰&#xff09;&#xff0c;在创建一个已存在对象一模一样的新对象时…

MySQL运维实战之备份和恢复(8.4)xtrabackup恢复全量备份

作者&#xff1a;俊达 恢复全量备份大致可以分成以下几步&#xff1a;解压备份文件、prepare备份文件、将数据copy到目标实例相关目录、启动数据库实例。 解压文件 如果备份时使用了xbstream&#xff0c;需要先解压备份文件。 我们备份时使用了–streamxbstream和gzip压缩&am…

数据结构:AVL树

目录 1、AVL树的概念 2、二叉搜索树的功能与实现 1、AVL树节点定义 2、AVL树的插入 3、AVL树的旋转操作 1、左旋 2、右旋 3、左右旋 4、右左旋 3、AVL树完整代码实现 1、AVL树的概念 在前面的文章中&#xff0c;我们学过了二叉搜索树&#xff0c;二叉搜索树虽可以缩短查…

勾股定理的七种经典证明

据说勾股定理约有500种证明方法&#xff0c;下面介绍几种经典的证明方法。 一、切割重拼法。 顾名思义&#xff0c;就是将图形切割成其他形式的图形&#xff0c;然后通过拼图转换为另一种图形&#xff0c;这个过程中图形的面积是不变的。 “赵爽弦图”是这种方法的经典应用&…

MYSQL刷题2| 1112.每位学生的最高成绩、1398.购买了产品A和产品B缺没有购买产品C的顾客

1112.每位学生的最高成绩 题目链接&#xff1a;1112. 每位学生的最高成绩 - 力扣&#xff08;LeetCode&#xff09; # Write your MySQL query statement below select e.student_id, MIN(course_id) AS course_id, grade from enrollments e where (student_id,grade) in (s…

JimuReport 积木报表 v1.7.2 紧急发布,修复1.7.1严重Bug

1.7.2-beta 紧急版 2024-03-07 紧急版本&#xff0c;修复1.7.1版本的严重bug。 集成依赖 springboot2依赖 <dependency><groupId>org.jeecgframework.jimureport</groupId><artifactId>jimureport-spring-boot-starter</artifactId><versi…

Android视角看鸿蒙第三课(module.json中的各字段含义之nametype)

Android视角看鸿蒙第三课(module.json中的各字段含义) 前言 上篇文章我们试图找到鸿蒙app的程序入口&#xff0c;确定了在鸿蒙工程中,由AppScope下的app.json5负责应用程序的图标及名称,由entry->src->main-module.json5负责桌面图标及名称的展示。 AppScope下的app.js…