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

🕗 发布于 2024-12-12 00:56 vue.js 前端框架 java

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

🏡个人主页：謬熙，欢迎各位大佬到访❤️❤️❤️~
👲个人简介：本人编程小白，正在学习互联网开发求职知识……
如果您觉得本文对您有帮助的话，记得点赞👍、收藏⭐️、评论💬，如果文章有什么需要改进的地方还请大佬不吝赐教🙏🙏🙏

一、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项目中，从配置依赖项开始到打开前端页面进行交互的顺序大致如下：

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

三、 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布局模式，用于创建复杂的二维布局。	复杂的页面布局设计。

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