【Vue学习总结】2. Vue目录结构分析

接上篇《1.Vue环境搭建、运行第一个项目

上一篇我们主要讲解了Vue的环境的搭建,本篇我们主要来分析Vue项目的目录结构。

一、Vue项目文件目录详情介绍

下面就是上一篇我们搭建的一个样例工程的完整结构(install后):
【Vue学习总结】2. Vue目录结构分析
其中包括了node_modules、build、config、src、static以及test文件夹,还有index.html的超文本文件,和package.json以及package-lock.json的json文本文件,还有一个markdown的文本文件。
我们一一来讲解各个文件夹以及文件的作用。
1、node_modules
与其说node_modules是一个文件夹,不如说它是一个资源库,即我们在对工程进行install的时候,会从npm的资源库中下载我们Vue工程所需要的所有依赖。我们可以打开看一下:
【Vue学习总结】2. Vue目录结构分析
下面还有好多依赖,这里就不一一展示了。
我们随便打开一个依赖资源,可以看到里面其实也是一个小的前端工程:
【Vue学习总结】2. Vue目录结构分析
这些各种小的前端工程,为我们提供了Vue工程所需要了所有依赖标签、样式、公共方法等,可以理解为Java工程依赖的各种jar包。

2、build
build文件夹如同它的名字一样,里面放置了用来进行项目构建(webpack)的相关代码。

3、config 
用来存放项目的一些基本配置信息,如配置静态资源目录,包括访问的域名和端口号等:
【Vue学习总结】2. Vue目录结构分析

4、src
src就是用来放置我们项目开发的相关代码,这里已经默认为我们新建好了一些文件夹:
【Vue学习总结】2. Vue目录结构分析
其中,assets为静态资源目录,其中放置的是一些图片等静态资源,这里的资源会被wabpack构建。
而components是公共组件目录,这里存放的就是我们编写的一些vue公共组件。
routes是前端路由文件夹,里面放置的是路由配置,即什么样的服务请求,应该路由到哪个相关的组件文件上去,如我们工程目前的默认请求路由:
【Vue学习总结】2. Vue目录结构分析
app.vue文件是根组件,其中存放的是项目访问的默认根节点,可以理解为首页加载的Vue资源。
main.js是整个项目工程的入口文件,在此加载相关的路由以及Vue组件:
【Vue学习总结】2. Vue目录结构分析

另外,如果我们要开发新的组件(不是components这种公共组件),则需要在src下创建新的文件夹,文件夹的名称就是组件的名称,里面放置的就是自己开发的组件的vue文件。

5、static
与src下的assets作用相同,是用来放置静态资源的文件夹,但这里的资源不会被wabpack构建。

6、test
这里顾名思义放置的是测试文件。我们可以在unit文件夹下进行单元测试:
【Vue学习总结】2. Vue目录结构分析

7、index.html
该文件就是项目的入口页面文件,可以看到里面加载了id为app的模板组件:
【Vue学习总结】2. Vue目录结构分析

8、package.json
package.json中放置的是运行npm install指令的时候,向npm获取依赖的请求信息,其中包括了该工程需要加载的相关组件:
【Vue学习总结】2. Vue目录结构分析
这些组件被下载下来后,就保存在了上面我们的node_modules中。可以将该文件理解为Java工程的maven的pom.xml配置文件,用于配置需要加载的相关依赖jar信息。

9、package-lock.json
package-lock.json 是在执行 npm install命令的时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。这是为了解决依赖版本的问题,比如我们看一下目前工程的package.json文件:!
【Vue学习总结】2. Vue目录结构分析
我们可以看到,有一些依赖的版本不是固定的,而是一种大于某个版本的表达式,这就大致我们每次进行npm install的时候,都是拉取的该大版本下的最新的版本。如果我们将代码移植发到一个新的机器上,或者新的下载源上,有可能会下载更新版本的依赖。而一般为了稳定性考虑,我们几乎是不敢随意升级依赖包的,这将导致多出来很多测试/适配的工作量。
而package-lock.json文件就是解决这个问题的,当你每次安装一个依赖的时候就锁定在你安装的这个版本,下次再安装的时候,就会按照这个package-lock.json所标示的具体版本下载依赖库包,就能确保所有库包与你上次安装的完全一样。

10、readme.md
这个就很简单的,它是项目的说明文档,为markdown 格式。一般我们在git上创建新的项目的时候,都会默认让大家生成一个readme.md文件,用来描述项目的基本信息。

二、目录结构总结

下图为上面的目录结构的一个整体描述:
【Vue学习总结】2. Vue目录结构分析

发布者:小站,转转请注明出处:http://blog.gzcity.top/4686.html

(1)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年7月6日 14:18
下一篇 2022年7月7日 11:27

相关推荐

  • linux启动php-cgi,linux下php-fpm启动参数及重要配置

    php-fpm我们并不陌生了,下面来介绍一篇php-fpm 启动参数及重要配置的文章,如果各位对于php-fpm 启动参数及重要配置不了解可以进来看看。 约定几个目录 /usr/local/php/sbin/php-fpm /usr/local/php/etc/php-fpm.conf /usr/local/php/etc/php.ini I. php-fp…

    学习笔记 2022年9月25日
    411380
  • Centos PaddleOCR环境安装-完整过程

    先安装python3.7 1.安装编译相关工具 yum -y groupinstall “Development tools” yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db…

    2022年5月25日
    49930
  • Java调用selenium爬取网页内容

    前言 Selenium Java API Docs官方文档:https://www.selenium.dev/selenium/docs/api/java/ Selenium WebDriver | Selenium 中文文档: https://wizardforcel.gitbooks.io/selenium-doc/content/official-si…

    学习笔记 2022年10月21日
    31910
  • 识别并修复 Web 应用中的 XSS 漏洞

    什么是跨站点脚本? 跨站点脚本 (XSS) 是一个代码注入漏洞,当开发人员在将用户输入插入 HTML 模板之前未对用户输入进行足够好的审查时,就会在处理 HTML 的应用程序中发生该漏洞。它允许攻击者将任意 JavaScript 代码插入模板并在用户的上下文中执行它: 在上图中,开发人员未能清理“姓氏”div 的内容,这导致用户能够通过操纵其姓氏来包含恶意脚…

    2023年6月11日
    1.0K760
  • Linux命令汇总 | vim | shell | 进阶【2022版】

    Linux大全 一、Linux上下五千年 1.1 历史长河 Linux,全称GNU/Linux,是一种免费使用和自由传播的类UNIX操作系统,其内核由林纳斯·本纳第克特·托瓦兹于1991年10月5日首次发布。 它主要受到Minix和Unix思想的启发,是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的Unix工具软件、应用程…

    2022年6月24日
    29800

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

评论列表(1条)

  • 打开Binance账户
    打开Binance账户 2025年1月12日 15:08

    Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.