webpack5所用依赖以及对应的版本
所有依赖以及版本
{"name": "market-web","version": "0.1.0","private": true,"scripts": {"dev": "cross-env NODE_ENV=development webpack serve --config ./vue.config.js","build": "cross-env NODE_ENV=production webpack --config ./vue.config.js","lint": "vue-cli-service lint"},"dependencies": {"@babel/core": "^7.26.10","@babel/plugin-transform-runtime": "^7.26.10","@babel/preset-env": "^7.26.9","@babel/runtime-corejs3": "^7.27.0","animate.css": "^4.1.1","axios": "^1.9.0","babel-loader": "^10.0.0","babel-polyfill": "^6.26.0","core-js": "^3.41.0","css-loader": "^7.1.2","dotenv-webpack": "^8.1.0","element-ui": "^2.15.3","html-webpack-plugin": "^5.6.3","mini-css-extract-plugin": "^2.9.2","nprogress": "^0.2.0","postcss-loader": "^8.1.1","postcss-pxtorem": "^5.1.1","sass": "^1.83.4","sass-loader": "^10.2.0","unplugin-auto-import": "^0.16.0","unplugin-vue-components": "^0.22.0","vue": "^2.6.14","vue-loader": "^15.11.1","vue-router": "^3.6.5","vue-seamless-scroll": "^1.1.23","vue-style-loader": "^4.1.3","vuex": "^3.6.2","webpack": "5.72.1","webpack-cli": "5.0.0","webpack-dev-server": "4.9.0"},"devDependencies": {"@babel/eslint-parser": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0","autoprefixer": "^9.8.8","babel-plugin-component": "^1.1.1","cross-env": "^7.0.3","css-minimizer-webpack-plugin": "^7.0.2","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3","imagemin": "^9.0.1","imagemin-gifsicle": "^7.0.0","imagemin-jpegtran": "^8.0.0","imagemin-optipng": "^8.0.0","imagemin-svgo": "^11.0.1","postcss": "^7.0.39","tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17","thread-loader": "^4.0.4","vue-template-compiler": "^2.7.16"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/essential","eslint:recommended"],"parserOptions": {"parser": "@babel/eslint-parser"},"rules": {}}
}
.browserslistrc
last 2 version
> 1%
iOS 7
last 3 iOS version
.postcss.config.js
modules.exports = {plugins: [require('autoprefixer') ]
}
babel.config.js
module.exports = {presets: [['@vue/cli-plugin-babel/preset']],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}
postcss.config.js
module.exports = {plugins: {autoprefixer: {},tailwindcss: {},},},
};
vue.config.js
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementUiResolver } = require('unplugin-vue-components/resolvers');
const os = require("os");
const { DefinePlugin } = require("webpack")
const Dotenv = require("dotenv-webpack")
// cpu核数
const threads = os.cpus().length;
const TerserPlugin = require("terser-webpack-plugin")const env = process.env.NODE_ENV || "development"
// 在生产环境中替换 vue-style-loader
const styleLoaders = (isProduction) => {const loaders = [isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader','css-loader','postcss-loader'];return {test: /\.css$/,use: loaders};
};// 生产环境 SCSS 配置
const scssLoaders = (isProduction) => {const loaders = [isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader','css-loader','postcss-loader','sass-loader'];return {test: /\.scss$/,use: loaders};
};const isProduction = process.env.NODE_ENV === 'production';
module.exports = {mode: 'development',devtool: 'cheap-module-source-map', //source-mapentry: {main: './src/main.js',},output: {filename: '[name]-[contenthash:6].js',path: path.resolve(__dirname, 'dist'),clean: true,},resolve: {alias: {'@': path.resolve(__dirname, 'src'),vue: "vue/dist/vue.esm.js",}},module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: {compilerOptions: {preserveWhitespace: false},options: {// 开启缓存cacheDirectory: path.resolve(__dirname,"node_modules/.cache/vue-loader"),}}},{test: /\.js$/,exclude: /node_modules/, // 排除 node_modules 目录use: [{loader: "thread-loader", // 开启多进程options: {workers: threads, // 数量},},{loader: "babel-loader",options: {cacheDirectory: false, // 开启babel编译缓存cacheCompression: false, // 缓存文件不要压缩targets: {"browsers": [">0.1%"]},presets: [["@babel/preset-env", {useBuiltIns: "usage",corejs: 3}]],plugins: [["@babel/plugin-transform-runtime",{corejs: false,helpers: true,regenerator: true}]]}}]},styleLoaders(isProduction),scssLoaders(isProduction),{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,type: 'asset/resource',parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {filename: 'img/[name].[hash:8][ext]'}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,type: 'asset/resource',generator: {filename: 'fonts/[name].[hash:8][ext]'}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,type: 'asset/resource',generator: {filename: 'media/[name].[hash:8][ext]'}}]},optimization: {minimize: true,minimizer: [// css压缩也可以写到optimization.minimizer里面,效果一样的new CssMinimizerPlugin(),// 当生产模式会默认开启TerserPlugin,但是我们需要进行其他配置,就要重新写了new TerserPlugin({parallel: threads // 开启多进程})],},devServer: {host: 'localhost',port: 9000,open: true,hot: true,proxy: {"/mapi": {target: 'http://10.100.2.99', //http://10.100.2.94:9011changeOrigin: true,logLevel: "debug",// pathRewrite: {// "^/mapi": ''// },onProxyRes(proxyRes, req, res) {const realUrl = "http://10.100.2.99" + req.url|| ''; // 真实请求网址proxyRes.headers['A-Real-Url'] = realUrl; // 添加响应标头(A-Real-Url为自定义命名),在浏览器中显示}}},},plugins: [new VueLoaderPlugin(),new DefinePlugin({}),new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public/index.html'),filename: "index.html",templateParameters: {BASE_URL: `/`},title: '奇迹点'}),new Dotenv({path: `./.env.${env}`}),AutoImport({imports: ['vue', 'vue-router'],resolvers: [ElementUiResolver()],}),Components({resolvers: [ElementUiResolver()],}),...(isProduction ? [new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',chunkFilename: 'css/[name].[contenthash:8].chunk.css'})] : [])],
};
相关文章:
webpack5所用依赖以及对应的版本
所有依赖以及版本 {"name": "market-web","version": "0.1.0","private": true,"scripts": {"dev": "cross-env NODE_ENVdevelopment webpack serve --config ./vue.config.js","buil…...
vue-cli 构建打包优化(JeecgBoot-Vue2 配置优化篇)
项目:jeecgboot-Vue2 在项目二次开发后,在本人电脑打包时间为3分35秒左右 webpack5默认优化: Tree Shaking(摇树优化):删除未使用的代码base64 内联: 小于 8KB 的资源(图片等&…...
Webpack 分包策略详解及实现
Webpack 的分包策略(Code Splitting)是优化前端应用性能的重要手段,它能将代码拆分成多个 bundle,实现按需加载或并行加载,从而减少初始加载时间。 分包策略的必要性 在大型项目中,如果将所有代码打包到一…...
大模型微调与高效训练
随着预训练大模型(如BERT、GPT、ViT、LLaMA、CLIP等)的崛起,人工智能进入了一个新的范式:预训练-微调(Pre-train, Fine-tune)。这些大模型在海量数据上学习到了通用的、强大的表示能力和世界知识。然而&…...
postgreSQL日常维护
目录 登录数据库 数据库操作列出列出库 创建库 删除库 切换库 查看库的大小 数据表操作 列出表 创建表 复制表 删除表 查看表的结构 模式操作命令 创建模式 默认模式 删除模式 查看所有模式 在指定模式中创建表 切换当前模式 查看当前所在schema 查看搜索…...
数据直观分析与可视化
数据直观分析与可视化 一、数据的直观分析核心价值 数据的直观分析旨在通过视觉化的方式,帮助人们更直观、更快速地理解数据的特征和模式,从而发现趋势、异常值、分布情况以及变量之间的关系,为决策提供支持。 数据可视化与信息图形、信息可…...
BeamDojo: Learning Agile Humanoid Locomotion on Sparse Footholds
BeamDojo: Learning Agile Humanoid Locomotion on Sparse Footholds 研究动机解决方案技术路线踏脚点奖励双Critic进行稀疏奖励学习两阶段学习地形感知运动马尔可夫决策空间Sim2Real 附录实验结果 BeamDojo: Learning Agile Humanoid Locomotion on Sparse Footholds 研究动机…...
Spark大数据分与实践笔记(第五章 HBase分布式数据库-02)
文章目录 每日一句正能量第五章 HBase分布式数据库章节概要5.2 HBase的集群部署 每日一句正能量 人有三样东西是无法隐瞒的,咳嗽,穷困和爱,你想隐瞒越欲盖弥彰。人有三样东西是不该挥霍的,身体,金钱和爱,你…...
【面经分享】微派网络一面
HashMap 如何解决 哈希冲突? HashMap 是拉链法解决。 发生哈希冲突时,同一个槽位上,会形成一个链表。 一个槽位上的节点达到树化的阈值后,会树化为红黑树。 拉链法:哈希冲突时,同一个哈希槽拉成一个链表…...
【寻找Linux的奥秘】第七章:虚拟地址空间
前言 本专题将基于Linux操作系统来带领大家学习操作系统方面的知识以及学习使用Linux操作系统。上一章我们简单认识了环境变量,本章将讲解操作系统中另一个重要的概念——程序地址空间。 1. 初步认识 之前在我们学习C语言和C时我们知道,在我们的程序中不…...
网络安全-等级保护(等保) 2-0 等级保护制度现行技术标准
################################################################################ 第二章:现行等保标准要求,通过表格方式详细拆分了等保的相关要求。 GB 17859-1999 计算机信息系统 安全保护等级划分准则【现行】 GB/T22240-2020 《信息安全技术…...
Linux:进程信号---信号的保存与处理
文章目录 1. 信号的保存1.1 信号的状态管理 2. 信号的处理2.1 用户态与内核态2.2 信号处理和捕捉的内核原理2.3 sigaction函数 3. 可重入函数4. Volatile5. SIGCHLD信号 序:在上一章中,我们对信号的概念及其识别的底层原理有了一定认识,也知道…...
【Linux】C语言模拟实现shell命令行(程序替换原理)
目录 一、自动化构建工具(makefile) 二、输出提示符 三、获取用户输入的数据 四、将用户输入的指令字符串进行分割: 五、执行用户输入的命令 六、发现cd命令用不了(内建命令) 原因在于: 七、处理内…...
WordPress Madara插件存在文件包含漏洞(CVE-2025-4524)
免责声明 本文档所述漏洞详情及复现方法仅限用于合法授权的安全研究和学术教育用途。任何个人或组织不得利用本文内容从事未经许可的渗透测试、网络攻击或其他违法行为。使用者应确保其行为符合相关法律法规,并取得目标系统的明确授权。 对于因不当使用本文信息而造成的任何直…...
【Java】泛型在 Java 中是怎样实现的?
先说结论 , Java 的泛型是伪泛型 , 在运行期间不存在泛型的概念 , 泛型在 Java 中是 编译检查 运行强转 实现的 泛型是指 允许在定义类 , 接口和方法时使用的类型参数 , 使得代码可以在不指定具体类型的情况下操作不同的数据类型 , 从而实现类型安全的代码复用 的语言机制 . …...
Lambda表达式的高级用法
今天来分享下Java的Lambda表达式,以及它的高级用法。 使用它可以提高代码的简洁度,使代码更优雅。 一、什么是lambda表达式 Lambda 表达式是 Java 8 引入的特性,用于简化匿名内部类的语法,使代码更简洁,尤其在处理函…...
ctfhub技能书http协议
http://challenge-ffe8afcf1a75b867.sandbox.ctfhub.com:10800/index.php curl -v -X CTFHUB http://challenge-ffe8afcf1a75b867.sandbox.ctfhub.com:10800/index.php curl:用于发送 HTTP 请求的命令行工具。 -v(--verbose):开启…...
面试题 - 微服务相关的经典问题(33道)
1.什么是微服务? 微服务(Microservices)是一种软件架构风格,将一个大型应用程序划分为一组小型、自治且松耦合的服务。每个微服务负责执行特定的业务功能,并通过轻量级通信机制(如HTTP)相互协作…...
在C#中对List<T>实现多属性排序
本文介绍了四种实现多级排序的方法:1. LINQ链式调用:使用OrderBy和ThenBy实现多级排序,直观易读,适合动态需求,返回新列表。2. 自定义比较器(IComparer):适用于复杂或高频排序&#…...
C++初阶-vector的模拟实现3
目录 1.预备知识:initializer_list 1.1初步了解 1.2关于initializer_list的deepseek的回答 C中的 std::initializer_list 主要特性 常见用途 1. 接受列表的构造函数和函数 2. 基于范围的 for 循环 重要注意事项 实现示例 2.vector::vector(initializer_li…...
详解鸿蒙仓颉开发语言中的日志打印问题
一门新的开发语言在诞生初期,由于它本身的特性和使用人数暂时较少,会容易出现一些大家不太容易理解的问题,或者说有一些坑。今天就详细分享一下仓颉开发语言中的日志打印相关内容,带大家踩一踩坑。 AppLog 在新创建的项目中&…...
dify基于文本模型实现微调Fine-tune语料构造工作流
主要是分为5个部分。分别是:开始、文档提取器、代码执行、LLM大语言模型、结束 5个部分 打开dify,创建一个空白页面-选择工作流,我们给应用起个名字。 创建完成后,进入工作流画布界面 开始 在开始节点中新建2个输入参数。1个是用…...
手机充电协议
1、手机快充 公有:PD、QC(高通骁龙芯片) 私有: 华为:FCP(fast charge protocol) 、SCP( super charge protocol) 、 小米: Mi Turbo Charge oppo:VOOC/SuperVOOC vivo:FlashCharge、…...
HarmonyOS 应用开发,如何引入 Golang 编译的第三方 SO 库
本指南基于笔者临时修复的 ohos_golang_go 项目fork,解决HO 应用导入 cgo编译产物时的 crash 问题。 1. 下载 ohos_golang_go git clone https://gitcode.com/deslord/ohos_golang_go.git📌 该仓库为笔者临时修复版本,修复了 CGO 编译模式下…...
polarctf-web-[某函数的复仇]
考点: 匿名构造函数(create_function) 题目来源:polarctf-web-[某函数的复仇] 解题: 代码审计: <?phphighlight_file(__FILE__);//flag:/flagif(isset($_POST[shaw])){$shaw $_POST[shaw];$root $_GET[root];if(preg_mat…...
Node.js Express 项目现代化打包部署全指南
Node.js Express 项目现代化打包部署全指南 一、项目准备阶段 1.1 依赖管理优化 # 生产依赖安装(示例) npm install express mongoose dotenv compression helmet# 开发依赖安装 npm install nodemon eslint types/node --save-dev1.2 环境变量配置 /…...
华为云Flexus+DeepSeek征文|Flexus云服务器Dify-LLM资源部署极致体验Agent
前引:重磅来袭!本次以DeepSeek-V3/R1商用大模型和Dify-LLM应用平台一键部署为核心,专为新手打造“开箱即用”的AI开发体验。无论你是想快速搭建企业级AI应用,还是探索大模型落地的无限可能,只需跟随小编实现三步走&…...
Java详解LeetCode 热题 100(18):LeetCode 73. 矩阵置零(Set Matrix Zeroes)详解
文章目录 1. 题目描述2. 理解题目3. 解法一:使用两个额外数组标记法3.1 思路3.2 Java代码实现3.3 代码详解3.4 复杂度分析3.5 适用场景 4. 解法二:使用矩阵的第一行和第一列作为标记4.1 思路4.2 Java代码实现4.3 代码详解4.4 复杂度分析4.5 适用场景 5. …...
MySQL刷题 Day08
LC 1341电影评分 本题思路简单,但一不注意就错了 : 不难想到用union,写出如下代码: (select u.name results from MovieRating mr left join Users u on mr.user_id u.user_id group by mr.user_id order by count(mr.user_id…...
linux查看本机服务器的外网IP命令
在 Linux 中查看本机服务器的外网 IP(公网 IP)可以通过以下几种方法: 1. 使用 curl 查询外部服务(推荐) curl ifconfig.me或: curl icanhazip.com或: curl ipinfo.io/ip这些服务会返回你的公…...
DVWA-XSS
DOM low 这是一个下拉框的形式,但是如果我们不让他等于English呢,换成js代码呢? <script>alert(xss);</script> Medium <script> 标签,但仅使用简单的字符串匹配进行替换(比如移除 "<scr…...
第15天-NumPy科学计算实战:从基础到图像处理
一、NumPy核心优势 高效数组运算:矢量操作比纯Python快10-100倍 广播机制:不同形状数组的算术运算 内存优化:连续内存块存储,支持大数据处理 丰富API:线性代数、傅里叶变换、随机数生成等 二、环境准备 pip install numpy matplotlib 三、基础操作演示 1. 创建数组 im…...
Spring Boot + +小程序, 快速开发零工市场小程序
现在零工经济发展的越来越好,不止是很多人想要利用空余时间找零工赚外快,也有很多企业有灵活用工的需求,根据这样的需求,我们利用Spring Boot 和小程序,快速开发出了零工市场小程序。 利用 Spring Boot 开发零工市场小…...
Vue 3.0中核心的Composition API
在当今快速发展的前端生态系统中,Vue 3.0以其革命性的Composition API重新定义了组件开发的范式。作为Vue框架的一次重大进化,Composition API不仅解决了Options API在复杂组件中面临的逻辑复用和组织难题,更为开发者提供了更灵活、更强大的代…...
洛谷B3840 [GESP202306 二级] 找素数
题目描述 小明刚刚学习了素数的概念:如果一个大于 1 的正整数,除了 1 和它自身外,不能被其他正整数整除,则这个正整数是素数。现在,小明想找到两个正整数 A 和 B 之间(包括 A 和 B)有多少个素数…...
Axure设计之带分页的穿梭框原型
穿梭框(Transfer)是一种常见且实用的交互组件,广泛应用于需要批量选择或分配数据的场景。 一、应用场景 其典型应用场景包括: 权限管理系统:批量分配用户角色或系统权限数据筛选工具:在大数据集中选择特…...
VsCode开发环境之Node.js离线部署
1.下载node部署文件 地址为:CNPM Binaries Mirror 2.下载后解压 3.验证版本 4.配置环境变量 5.外网寻找一个对应项目的npm文件--node_modules 6.node_modules文件夹复制到node.js的路径下 7.接着就可以正常运行了。...
补充Depends 和 request: Request 依赖注入用法的注意事项
不要在非路由函数(如类的 __init__ 方法或普通模块函数)中直接使用 Depends() 或 request。 Depends 和 request: Request 是 FastAPI 提供的依赖注入机制的一部分,仅适用于FastAPI 路由函数或由 FastAPI 调用的依赖函数中。在类初始化、模块…...
uniapp-商城-64-后台 商品列表(商品修改---页面跳转,深浅copy应用,递归调用等)
完成了商品的添加和展示,下面的文字将继续进行商品页面的处理,主要为商品信息的修改的页面以及后天逻辑的处理。 本文主要介绍了商品信息修改页面的实现过程。首先,页面布局包括编辑和删除功能,未来还可添加上架和下架按钮。通过c…...
【MySQL】联合查询(上)
目录 一. 什么是联合查询 二. 笛卡尔积 三. 内连接查询 示例演示 四. 外连接 示例演示 五. 自连接 自连接 示例演示 一. 什么是联合查询 在之前学习的增删改查中都是对于单表进行查询,但是因为在数据库设计时需要遵循范式的要求,数据就会被拆分到多…...
Model 是 Agent 的大脑(以camel为例)
Model 是 Agent 的大脑,负责处理所有输入和输出数据。通过有效调用不同的模型,智能体可以根据任务需求执行文本分析、图像识别和复杂推理等操作。CAMEL 提供了一系列标准和可定制的接口,并与各种组件无缝集成,以赋能大语言模型&am…...
Linux条件变量
在 Linux 系统中,pthread_cond_init() 函数和条件变量(Condition Variable)是多线程编程中用于线程同步的核心机制。它们通过协调线程间的等待与通知逻辑,解决共享资源的竞争问题。以下从功能、工作机制、使用场景和注意事项等方面…...
k8s-NetworkPolicy
在 Kubernetes 中,NetworkPolicy 是一种资源对象,用于定义 Pod 之间的网络通信策略。它允许你控制哪些 Pod 可以相互通信,以及如何通信。通过使用 NetworkPolicy,可以实现更细粒度的网络访问控制,增强集群的安全性。 1…...
什么是“架构孤岛”?如何识别与整合?为什么现代企业在追求敏捷开发的同时,反而更容易陷入架构孤岛陷阱?
在现代信息技术飞速发展的时代,系统架构日益复杂,组织在构建与演进其信息系统时,面临着前所未有的挑战。然而,就在不断追求敏捷性、可扩展性与数字化创新的过程中,一个被广泛忽视却日益严峻的问题悄然浮现——“架构孤岛”。它们像岛屿一样,彼此孤立,通信不畅,数据难以…...
nfs存储IO等待,导致k8s业务系统卡慢问题处理
注:服务器配置:64C,128G,麒麟v10系统,系统磁盘使用空间(5T)均低于50%,存储磁盘iops约为800左右 发现业务系统卡慢,使用top 命令查看.系统负载较高长期保持在60以上,发现wa值的指标参数长期高于15,返现CPU用于写入磁盘IO等待的时间较高,系统的磁盘I/O压力较大. 配合开发查看日志…...
如何使用两块硬盘作为 Ubuntu24 的系统盘,实现坏掉一块不影响系统运行。
最近我想使用Ubuntu组一个NAS系统,想实现系统盘冗余,各位大佬可以给点建议吗。 Deep Seek 为了实现两块硬盘作为 Ubuntu 24 系统盘的冗余配置(RAID 1),确保一块硬盘损坏时系统仍可运行,以下是详细步骤&am…...
电子电气架构 --- 细化造车阶段流程
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 钝感力的“钝”,不是木讷、迟钝,而是直面困境的韧劲和耐力,是面对外界噪音的通透淡然。 生活中有两种人,一种人格外在意别人的眼光;另一种人无论…...
物联网之使用Vertx实现UDP最佳实践【响应式】
小伙伴们,你们好呀,我是老寇,跟我一起学习使用Vertx实现UDP-Server 实现UDP【响应式】 Vertx-Core地址 注意 UDP是无连接的传输,这意味着您与远程客户端没有建立持续的连接。 所以,您发送和接收的数据包都要包含有…...
代码管理平台Gitlab如何通过快解析实现远程访问?
一、Gitlab功能介绍 Gitlab是被广泛使用的基于git的开源代码管理平台,用于管理、存储开发人员代码,同时可以协同开发 二、外网试用Gitlab遇到的问题 运维人员将Gitlab服务器部署在总部机房,而分公司开发人员和出差运维人员就无法访问Gitlab…...
七彩喜防摔马甲:科技守护银发安全的“隐形铠甲”
随着现代人生活方式的多样化,尤其是在户外运动和骑行等活动中,安全问题日益受到重视。 七彩喜防摔马甲,作为一款兼具防护性与舒适性的智能穿戴设备,正在改变人们对传统防护装备的认知。 创新设计 防摔马甲的设计灵感来源于人体…...