【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。

面试官:说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢?
在这里插入图片描述

一、为什么要划分

使用vue构建项目,项目结构清晰会提高开发效率,熟悉项目的各种配置同样会让开发效率更高

在划分项目结构的时候,需要遵循一些基本的原则:

  • 文件夹和文件夹内部文件的语义一致性
  • 单一入口/出口
  • 就近原则,紧耦合的文件应该放到一起,且应以相对路径引用
  • 公共的文件应该以绝对路径的方式从根目录引用
  • /src 外的文件不应该被引入

文件夹和文件夹内部文件的语义一致性
我们的目录结构都会有一个文件夹是按照路由模块来划分的,如pages文件夹,这个文件夹里面应该包含我们项目所有的路由模块,并且仅应该包含路由模块,而不应该有别的其他的非路由模块的文件夹

这样做的好处在于一眼就从 pages文件夹看出这个项目的路由有哪些

单一入口/出口
举个例子,在pages文件夹里面存在一个seller文件夹,这时候seller 文件夹应该作为一个独立的模块由外部引入,并且 seller/index.js 应该作为外部引入 seller 模块的唯一入口

// 错误用法
import sellerReducer from 'src/pages/seller/reducer'// 正确用法
import { reducer as sellerReducer } from 'src/pages/seller'

这样做的好处在于,无论你的模块文件夹内部有多乱,外部引用的时候,都是从一个入口文件引入,这样就很好的实现了隔离,如果后续有重构需求,你就会发现这种方式的优点

就近原则,紧耦合的文件应该放到一起,且应以相对路径引用
使用相对路径可以保证模块内部的独立性

// 正确用法
import styles from './index.module.scss'
// 错误用法
import styles from 'src/pages/seller/index.module.scss'

举个例子

假设我们现在的 seller 目录是在 src/pages/seller,如果我们后续发生了路由变更,需要加一个层级,变成 src/pages/user/seller

如果我们采用第一种相对路径的方式,那就可以直接将整个文件夹拖过去就好,seller 文件夹内部不需要做任何变更。

但是如果我们采用第二种绝对路径的方式,移动文件夹的同时,还需要对每个 import 的路径做修改

公共的文件应该以绝对路径的方式从根目录引用
公共指的是多个路由模块共用,如一些公共的组件,我们可以放在src/components

在使用到的页面中,采用绝对路径的形式引用

// 错误用法
import Input from '../../components/input'
// 正确用法
import Input from 'src/components/input'

同样的,如果我们需要对文件夹结构进行调整。将 /src/components/input 变成 /src/components/new/input,如果使用绝对路径,只需要全局搜索替换

再加上绝对路径有全局的语义,相对路径有独立模块的语义

/src 外的文件不应该被引入
vue-cli脚手架已经帮我们做了相关的约束了,正常我们的前端项目都会有个src文件夹,里面放着所有的项目需要的资源,js,css, png, svg 等等。src 外会放一些项目配置,依赖,环境等文件

这样的好处是方便划分项目代码文件和配置文件

二、目录结构

单页面目录结构

project
│  .browserslistrc
│  .env.production
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│  yarn-error.log
│  yarn.lock
│
├─public
│      favicon.ico
│      index.html
│
|-- src|-- components|-- input|-- index.js|-- index.module.scss|-- pages|-- seller|-- components|-- input|-- index.js|-- index.module.scss|-- reducer.js|-- saga.js|-- index.js|-- index.module.scss|-- buyer|-- index.js|-- index.js

多页面目录结构

my-vue-test:..browserslistrc
│  .env.production
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│  yarn-error.log
│  yarn.lock
│
├─public
│      favicon.ico
│      index.html
│
└─src├─apis //接口文件根据页面或实例模块化│      index.js│      login.js│├─components //全局公共组件│  └─header│          index.less│          index.vue│├─config //配置(环境变量配置不同passid等)│      env.js│      index.js│├─contant //常量│      index.js│├─images //图片│      logo.png│├─pages //多页面vue项目,不同的实例│  ├─index //主实例│  │  │  index.js│  │  │  index.vue│  │  │  main.js│  │  │  router.js│  │  │  store.js│  │  ││  │  ├─components //业务组件│  │  └─pages //此实例中的各个路由│  │      ├─amenu│  │      │      index.vue│  │      ││  │      └─bmenu│  │              index.vue│  ││  └─login //另一个实例│          index.js│          index.vue│          main.js│├─scripts //包含各种常用配置,工具函数│  │  map.js│  ││  └─utils│          helper.js│├─store //vuex仓库│  │  index.js│  ││  ├─index│  │      actions.js│  │      getters.js│  │      index.js│  │      mutation-types.js│  │      mutations.js│  │      state.js│  ││  └─user│          actions.js│          getters.js│          index.js│          mutation-types.js│          mutations.js│          state.js│└─styles //样式统一配置│  components.less│├─animation│      index.less│      slide.less│├─base│      index.less│      style.less│      var.less│      widget.less│└─commonindex.lessreset.lessstyle.lesstransition.less

小结
项目的目录结构很重要,因为目录结构能体现很多东西,怎么规划目录结构可能每个人有自己的理解,但是按照一定的规范去进行目录的设计,能让项目整个架构看起来更为简洁,更加易用

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

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

相关文章

基于html5开发的Win12网页版,抢先体验

据 MSPoweruser 报道,Windows 11虽然刚刚开始步入正轨,但最新爆料称微软已经在开启下一个计划,Windows 12 的开发将在 去年3 月份开始。德国科技网站 Deskmodder.de 称,根据内部消息,微软将在 2022年3 月开始开发 Wind…

设计模式-11种行为型模式

行为型模式可以影响一个系统的状态和行为流。 责任链模式: 定义一个抽象处理者,其中包含了设置了下一个处理者和对请求的处理两个方法。具体的处理者都实现了这个接口。用于处理多级请,可以将多个处理者对象串联起来,每个处理者都…

1、验证1101序列(Moore)

题目要求: 用Moore型状态机验证1101序列。 题目描述: 用使用状态机验证1101序列,注意:允许重复子序列。如图 端口描述: module moore_1101(input clk,//时钟信号input clr,//reset复位信号,高电平有效in…

pdf处理工具 Enfocus PitStop Pro 2022 中文 for mac

Enfocus PitStop Pro 2022是一款专业的PDF预检和编辑软件,旨在帮助用户提高生产效率、确保印刷品质量并减少错误。以下是该软件的一些特色功能: PDF预检。PitStop Pro可以自动检测和修复常见的PDF文件问题,如缺失字体、图像分辨率低、颜色空…

在Android平板上使用code-server公网远程Ubuntu服务器编程

文章目录 1.ubuntu本地安装code-server2. 安装cpolar内网穿透3. 创建隧道映射本地端口4. 安卓平板测试访问5.固定域名公网地址6.结语 1.ubuntu本地安装code-server 准备一台虚拟机,Ubuntu或者centos都可以,这里以VMwhere ubuntu系统为例 下载code server服务,浏览器…

​EtherNet/IP 库卡机器人和EtherCAT倍福PLC总线协议连接案例​

EtherNet/IP 是一种适合于工业环境和对时间要求比较苛刻的应用的网络。而远创智控YC-EIPM-ECT通讯网关,是一款自主研发的EtherNet/IP 从站功能的通讯网关。它不仅可以实现EtherNet/IP 和EtherCAT的无缝连接,还可以将EtherNet/IP 作为从站连接到EtherCAT总…

嵌入式数据库sqlite3【基础篇】基本命令操作,小白一看就懂(C/C++)

目录 前言 一、sqlite概念和特性 二、sqlite安装 三、sqlite3数据类型 四、sqlite数据库约束 五、sqlite常用命令 六、SQL语句(增删改查) 七、sqlite使用实例(教学管理数据库) 总结 前言 数据在实际工作中应用非常广泛…

【LLM微调范式1】Prefix-Tuning: Optimizing Continuous Prompts for Generation

论文标题:Prefix-Tuning: Optimizing Continuous Prompts for Generation 论文作者:Xiang Lisa Li, Percy Liang 论文原文:https://arxiv.org/abs/2101.00190 论文出处:ACL 2021 论文被引:1588(2023/10/14&…

目录启示:使用 use 关键字为命名空间内的元素建立非限定名称

文章目录 参考环境三种名称非限定名称限定名称完全限定名称举个栗子 useuse 关键字use ... as .. 命名冲突真假美猴王两个世界 参考 项目描述搜索引擎Bing、GoogleAI 大模型文心一言、通义千问、讯飞星火认知大模型、ChatGPTPHP 官方PHP ManualPHP 官方language.namespaces.ra…

HTML复习笔记

HTML(超文本标记语言) 文章目录 HTML(超文本标记语言)1.HTML1.概念2.标签2.1双标签超链接音频标签视频标签无序列表有序列表定义列表表格合并单元格 表单表单项单选框-**radio**文件上传-file多选框-checkbox 下拉菜单文本域-text…

Unity 3D视频教程

上一篇:各种品牌汽车车标 记录了一些车标。 在懂车帝App上,会有3D看车功能。最近发现一个Unity 3D的视频教程,分享下! https://www.bilibili.com/video/BV1TZ4y1o76s/

JavaSE学习值之--认识异常

💕"有效知识的前提是承认知识边界,承认我们对边界那边的一切无可奉告。"💕 作者:Mylvzi 文章主要内容:JavaSE学习值之--认识异常 一.什么是异常? 异常就是程序在运行的时候产生的不正常的行为 …

linux上构建任意版本的rocketmq多架构x86 arm镜像——筑梦之路

现状 目前市面上和官方均只有rocketmq x86架构下的docker镜像,而随着国产化和信创适配的需求越来越多,显然现有的x86架构下的docker镜像不能满足多样化的需求,因此我们需要根据官方发布的版本制作满足需求的多架构镜像,以在不同cp…

Ubuntu的Python从2.x升级到3.x

我的Ubuntu系统默认是2.7,我想升级为3.5 升级python3.5 下载python sudo apt-get install python3查看 刚才下载的Python程序被安装在usr/local/lib/python3.5 中 cd usr/local/lib备份一下 sudo cp /usr/bin/python /usr/bin/python_bak删除python的旧关联 sudo rm -rf py…

Linux网络编程系列之网络编程基础

Linux网络编程系列 (够吃,管饱) 1、Linux网络编程系列之网络编程基础 2、Linux网络编程系列之TCP协议编程 3、Linux网络编程系列之UDP协议编程 4、Linux网络编程系列之UDP广播 5、Linux网络编程系列之UDP组播 6、Linux网络编程系列之服务器编…

如何降低海康、大华等网络摄像头调用的高延迟问题(二)

目录 1.RTSP介绍 2.解决办法1 3.解决办法2 1.RTSP介绍 RTSP(Real-time Streaming Protocol)是一种用于实时流媒体传输的网络协议。它被设计用于在服务器和客户端之间传输音频、视频以及其他流媒体数据。 RTSP协议允许客户端通过与服务器建立RTSP会话…

Easysearch压缩模式深度比较:ZSTD+source_reuse的优势分析

引言 在使用 Easysearch 时,如何在存储和查询性能之间找到平衡是一个常见的挑战。Easysearch 具备多种压缩模式,各有千秋。本文将重点探讨一种特别的压缩模式:zstd source_reuse,我们最近重新优化了 source_reuse,使得它在吞吐量…

【linux】日志和journalctl 管理查看日志

目录 既看即用 简略介绍 linux的日志类型 系统日志 介绍 区别的简单说明 区别的详细说明 journalctl是什么?(查看系统日志的工具) 详细内容 linux的日志类型 systemd日志(systemd-journald) 放在哪个目录 …

Linux系统编程详解

Linux 多线程编程 什么是线程? 与线程类似,线程是允许应用程序并发执行多个任务的一种机制 线程是轻量级的进程(LWP:Light Weight Process),在 Linux 环境下线程的本 质仍是进程。 一个进程可以包含多个线…

D. Divide and Equalize--Codeforces Round 903 (Div. 3)

D. Divide and Equalize 题意:让一组数中的一个数除以一个因子,一个数除以一个因子,假如经过若干次操作后能够使数组所有数相等,那么输出YES,否则输出NO。 分析:乘除因子,那么实际上就是因子的…