Vue.js：代码架构组成与布局设置

前言：最近在弄一个开源的管理系统项目，前后端分离开发，这里对前端的Vue框架做一个总结，有遗漏和错误的地方欢迎大家指出~

🏡个人主页：謬熙，欢迎各位大佬到访❤️❤️❤️~

👲个人简介：本人编程小白，正在学习互联网开发求职知识......

如果您觉得本文对您有帮助的话，记得点赞👍、收藏⭐️、评论💬，如果文章有什么需要改进的地方还请大佬不吝赐教🙏🙏🙏

目录

• 一、Vue.js简介
• [1.1 什么是Vue.js](#1.1 什么是Vue.js)
• [1.2 与其它框架对比](#1.2 与其它框架对比)
• [二、 Vue项目结构组成](#二、 Vue项目结构组成)
• • [2.1 目录结构概览](#2.1 目录结构概览)
  • [2.2 核心目录和文件详解](#2.2 核心目录和文件详解)
  • • node_modules/
    • public/
    • src/
    • tests/
    • 配置文件
  • [2.3 核心文件作用与联系](#2.3 核心文件作用与联系)
  • • main.js
    • App.vue
    • router/index.js
    • store/index.js
  • [2.4. 文件执行顺序与关联](#2.4. 文件执行顺序与关联)
  • [三、 Vue布局](#三、 Vue布局)
  • • [3.1 基本布局方式](#3.1 基本布局方式)
    • [3.2 响应式布局](#3.2 响应式布局)
    • [3.3 Flex布局](#3.3 Flex布局)
• 四、常见关键字和术语
• • [4.1 HTML标签](#4.1 HTML标签)
  • [4.2 脚本](#4.2 脚本)
  • [4.3 布局和样式](#4.3 布局和样式)

一、Vue.js简介

1.1 什么是Vue.js

Vue.js，简称Vue，是一个构建用户界面的渐进式JavaScript框架。它由前Google工程师尤雨溪（Evan You）创建，并于2014年正式开源。Vue的设计哲学是轻量级、组件化、易学易用，同时它也能够支持构建大型、复杂的单页应用（SPA）。Vue的核心库只关注视图层，不仅易于上手，而且可以轻松地与其他库或已有项目整合。

1.2 与其它框架对比

在前端开发领域，Vue.js、React和Angular是三个备受欢迎的框架。它们都在一定程度上解决了前端开发中的问题，但各自有着不同的特点和适用场景。

特性	Vue.js	React	Angular
学习曲线	低	中	高
灵活性	高	高	低
生态系统	中	大	中
响应式	支持	支持	支持
双向数据绑定	支持	不支持	支持

二、 Vue项目结构组成

2.1 目录结构概览

一个典型的Vue项目结构通常包含以下核心目录和文件：

my-vue/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── store/
│   ├── App.vue
│   └── main.js
├── tests/
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

2.2 核心目录和文件详解

node_modules/

• 作用：存放项目的所有依赖包，由npm或yarn管理。
• 核心性：极高，项目运行所依赖的所有第三方库都存放于此。

public/

• 作用：包含不会被Webpack处理的静态资源。
• 核心文件 ：
  • favicon.ico：网站图标。
  • index.html：应用的主HTML文件，Vue实例会挂载到这个文件中的<div id="app"></div>元素上。

src/

• 作用：项目的源代码目录，包含应用的核心代码。
• 子目录 ：
  • assets/：存放静态资源，如图片、样式文件等。
  • components/：存放项目的Vue组件。
  • views/：存放页面级组件，通常对应路由。
  • router/：定义路由配置。
  • store/：Vuex状态管理目录。
  • App.vue：根组件，所有页面组件都是其子组件。
  • main.js：入口文件，初始化Vue实例并挂载到DOM上。

tests/

• 作用：存放测试代码，包括单元测试和端到端测试。

配置文件

• .gitignore：指定Git忽略的文件和目录。
• babel.config.js：Babel配置文件，用于转换ES6+代码。
• package.json：项目配置文件，包含依赖列表和脚本命令。
• README.md：项目说明文档。
• vue.config.js：Vue CLI配置文件，用于自定义Webpack配置。

2.3 核心文件作用与联系

main.js

• 作用：作为项目的入口文件，负责创建和挂载Vue实例。
• 联系 ：导入App.vue作为根组件，并通过router和store配置文件连接路由和状态管理。

App.vue

• 作用：作为根组件，包含应用的整体布局和全局样式。
• 联系 ：使用<router-view>作为占位符，根据当前路由显示对应的视图组件。

router/index.js

• 作用：定义应用的路由规则，指定路径与组件的映射关系。
• 联系 ：与views/中的视图组件紧密相关，根据路由配置渲染相应的视图。

store/index.js

• 作用：使用Vuex进行状态管理，集中存储和管理应用的全局状态。
• 联系 ：与components/和views/中的组件相连，通过mapState、mapGetters等辅助函数为组件提供状态和方法。

2.4. 文件执行顺序与关联

在Vue.js项目中，从配置依赖项开始到打开前端页面进行交互的顺序大致如下：

1. package.json ：这是项目的配置文件，它定义了项目的依赖项和脚本命令。开发者通过npm install或yarn来安装依赖项。
2. .gitignore ：在将项目推送到Git版本控制系统之前，.gitignore文件用来指定需要忽略的文件和目录，避免将不必要的文件包含到版本控制。
3. babel.config.js：Babel配置文件，它确保ES6+代码能够被转译成兼容旧浏览器的代码。
4. vue.config.js：这是一个可选的配置文件，用于自定义Vue CLI的构建行为，比如修改Webpack配置。
5. src/main.js ：这是JavaScript的入口文件。在项目构建过程中，main.js会被处理并打包，最终生成一个JavaScript文件，这个文件会在浏览器加载index.html后执行。
6. src/App.vue ：作为根组件，App.vue在main.js中被引入，并挂载到index.html的div#app元素上。
7. src/router/index.js ：如果项目中使用了Vue Router，main.js会导入并使用它，以便设置路由。路由定义了应用的页面结构和路径。
8. src/store/index.js ：如果项目中使用了Vuex进行状态管理，main.js也会导入并使用它。Vuex存储在全局状态中，可以在任何组件中通过this.$store访问。
9. src/api/*：如果项目中有API请求，通常会在这些文件中定义。它们可以被任何组件导入并用于数据交互。
10. src/assets/ ：包含应用的静态资源，如图片、样式表等。这些资源可以在组件中通过import语句导入并使用。
11. src/components/* ：这些是可复用的子组件，它们可以被App.vue或其他组件按需引用。
12. src/views/*：这些是页面级别的组件，通常与路由配置相关联。它们根据路由的变化被创建和销毁。
13. src/tests/*：包含应用的测试代码。这些测试可以在开发过程中或持续集成流程中运行。
14. public/index.html ：这是项目的入口点。当用户访问网站时，这个HTML文件被首先加载。它通常包含一个<div id="app">元素，作为Vue应用的挂载点。
15. 启动开发服务器 ：通过运行npm run serve或yarn serve命令，Vue CLI会启动一个开发服务器，使得开发者可以在本地预览和调试应用。
16. 构建生产环境 ：通过运行npm run build或yarn build命令，Vue CLI会构建应用，准备部署到生产环境。
17. 部署应用：构建完成后，将生成的静态文件部署到服务器，用户就可以通过浏览器访问并与之交互了。

三、 Vue布局

3.1 基本布局方式

• 单栏布局：适用于简单页面或移动端页面。
• 两栏布局：常用于PC端网页，分为左栏和右栏。
• 三栏布局：将内容区域分为左栏、中栏和右栏。

3.2 响应式布局

• 媒体查询（Media Queries）：根据不同设备特性应用不同样式。
• 响应式CSS框架：如Bootstrap和Tailwind CSS，提供自定义组件和样式。
• Grid布局：实现复杂页面布局。

3.3 Flex布局

• 基本用法 ：通过设置display: flex实现灵活布局。
• 水平居中和垂直居中：Flex布局轻松实现居中效果。
• 自适应宽度和固定宽度：Flex布局可以根据内容大小自动调整宽度。

四、常见关键字和术语

以下是前端开发中常用的HTML标签和脚本相关术语的条理化解释：

4.1 HTML标签

术语	解释	应用场景
<div>	一个通用的容器元素，用于组织和分组HTML元素。	布局和样式应用，常用于CSS布局。
<script>	用于嵌入或引用JavaScript代码。	在HTML文档中引入JavaScript逻辑。

4.2 脚本

术语	解释	应用场景
同步加载	<script>标签默认行为，会阻塞HTML解析直到脚本加载并执行完毕。	适用于依赖DOM的脚本或小脚本，避免阻塞页面渲染。
异步加载	使用async或defer属性，允许脚本异步加载，不阻塞HTML解析。	async适用于独立脚本，defer适用于依赖顺序的脚本。
async	脚本异步加载并在可用时立即执行，不保证执行顺序。	适用于不依赖其他脚本的独立脚本。
defer	脚本异步加载但执行顺序与脚本在文档中出现的顺序一致，通常在DOMContentLoaded事件之后执行。	适用于依赖DOM或有顺序依赖的脚本。
type="module"	将脚本视为JavaScript模块，支持模块化导入和导出。	适用于ES6模块的使用。
crossorigin	设置CORS（跨源资源共享）策略，用于控制加载资源时的跨域行为。	适用于需要跨域加载资源的情况。
integrity	用于验证加载的脚本是否被篡改。	适用于需要确保资源完整性的场景。
nonce	一次性加密值，用于内容安全策略（CSP）中允许特定的内联脚本执行。	适用于需要增强安全性的场景。
referrerpolicy	控制加载资源时发送的Referer值。	适用于需要控制隐私或安全策略的场景。
阻塞解析的JavaScript	没有async、defer或type="module"属性的脚本会在解析时阻塞页面。	适用于必须立即执行且不依赖其他脚本的脚本。
模块回落	使用nomodule属性为不支持JavaScript模块的浏览器提供回退脚本。	渐进增强和兼容性处理。
导入映射	使用type="importmap"定义模块标识符的映射，简化模块导入路径。	模块化JavaScript项目中简化模块解析。

4.3 布局和样式

术语	解释	应用场景
CSS布局	使用CSS对HTML元素进行布局，包括Flexbox、Grid等技术。	响应式设计和页面布局。
流式布局	元素依次排列，宽度由内容决定，可适应不同屏幕尺寸。	适用于简单的页面布局。
弹性盒子(Flexbox)	一种CSS布局模式，用于在不同屏幕尺寸下灵活地排列元素。	现代网页设计中常用的布局技术。
网格布局(Grid)	一种CSS布局模式，用于创建复杂的二维布局。	复杂的页面布局设计。

---

欢迎各位大佬们讨论指正，希望和大家共同进步💪💪💪