Vue 2快速实现px转vw适配

Vue 2 + Vue CLI 项目 px 转 vw 完整使用指南

📋 概述

本指南详细介绍如何在 Vue 2 + Vue CLI 项目中使用 postcss-px-to-viewport-8-plugin 插件，实现自动将 px 单位转换为 vw 单位的响应式设计。

🚀 第一步：插件安装

1.1 安装命令

# 使用 npm 安装
npm install postcss-px-to-viewport-8-plugin --save-dev# 或使用 yarn 安装
yarn add postcss-px-to-viewport-8-plugin --dev# 或使用 pnpm 安装
pnpm add postcss-px-to-viewport-8-plugin --save-dev

1.2 验证安装

安装完成后，检查 package.json 文件中是否包含该依赖：

{"devDependencies": {"postcss-px-to-viewport-8-plugin": "^1.2.5"}
}

⚙️ 第二步：Vue CLI 配置方法

2.1 配置 vue.config.js（推荐方法）

在项目根目录创建或修改 vue.config.js 文件：

const { defineConfig } = require("@vue/cli-service");module.exports = defineConfig({transpileDependencies: true,css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require("postcss-px-to-viewport-8-plugin")({// 设计稿的视口宽度viewportWidth: 1920,// 设计稿的视口高度（可选）viewportHeight: 1080,// 转换后的单位精度unitPrecision: 3,// 需要转换的CSS属性，* 表示所有属性propList: ["*"],// 转换后的视口单位viewportUnit: "vw",// 字体相关属性转换后的单位fontViewportUnit: "vw",// 不需要转换的选择器selectorBlackList: [".ignore", ".hairlines"],// 最小转换的像素值，小于这个值的px不会被转换minPixelValue: 1,// 是否转换媒体查询中的pxmediaQuery: false,// 是否直接替换属性值而不添加备用属性replace: true,// 忽略某些文件夹下的文件或特定文件exclude: [/node_modules/, /\.min\.css$/],// 只转换匹配的文件（可选）include: undefined,// 是否添加横屏时的媒体查询landscape: false,// 横屏时使用的单位landscapeUnit: "vw",// 横屏时的视口宽度landscapeWidth: 568,}),],},},},},
});

2.2 配置 postcss.config.js（备选方法）

如果您更喜欢单独的 PostCSS 配置文件，可以创建 postcss.config.js：

module.exports = {plugins: {"postcss-px-to-viewport-8-plugin": {viewportWidth: 1920,viewportHeight: 1080,unitPrecision: 3,propList: ["*"],viewportUnit: "vw",fontViewportUnit: "vw",selectorBlackList: [".ignore", ".hairlines"],minPixelValue: 1,mediaQuery: false,replace: true,exclude: [/node_modules/, /\.min\.css$/],include: undefined,landscape: false,landscapeUnit: "vw",landscapeWidth: 568,},},
};

🧪 第三步：使用示例和验证方法

3.1 创建测试组件

创建 src/components/PxToVwDemo.vue：

<template><div class="responsive-test-page"><!-- 头部区域 --><header class="hero-section"><div class="hero-content"><h1 class="hero-title">{{ msg }}</h1><p class="hero-subtitle">PostCSS px-to-viewport 插件测试页面</p><div class="hero-stats"><div class="stat-item"><span class="stat-number">1920</span><span class="stat-label">桌面分辨率</span></div><div class="stat-item"><span class="stat-number">100%</span><span class="stat-label">响应式适配</span></div><div class="stat-item"><span class="stat-number">PX→VW</span><span class="stat-label">自动转换</span></div></div></div></header><!-- 特色卡片 --><section class="featured-card"><div class="card-container"><div class="feature-card"><div class="card-icon">🎨</div><h2 class="card-title">响应式设计测试</h2><p class="card-description">这个页面使用纯px单位编写，通过postcss-px-to-viewport-8-plugin插件自动转换为vw单位，实现在不同分辨率下的完美适配效果。</p><div class="card-tags"><span class="tag">Vue2</span><span class="tag">PostCSS</span><span class="tag">响应式</span></div></div></div></section><!-- 功能卡片网格 --><section class="features-grid"><div class="grid-container"><div class="feature-item"><div class="feature-icon">📱</div><h3 class="feature-title">移动优先</h3><p class="feature-desc">基于移动设备优先的响应式设计理念</p></div><div class="feature-item"><div class="feature-icon">💻</div><h3 class="feature-title">桌面适配</h3><p class="feature-desc">完美适配各种桌面显示器分辨率</p></div><div class="feature-item"><div class="feature-icon">⚡</div><h3 class="feature-title">自动转换</h3><p class="feature-desc">px单位自动转换为vw视口单位</p></div><div class="feature-item"><div class="feature-icon">🎯</div><h3 class="feature-title">精确控制</h3><p class="feature-desc">精确控制元素在不同屏幕的显示效果</p></div></div></section><!-- 按钮组 --><section class="button-section"><div class="button-container"><button class="btn btn-primary">主要按钮</button><button class="btn btn-secondary">次要按钮</button><button class="btn btn-outline">边框按钮</button><button class="btn btn-gradient">渐变按钮</button></div></section><!-- 测试信息 --><section class="test-info"><div class="info-container"><div class="info-card"><h3 class="info-title">测试说明</h3><ul class="info-list"><li>所有样式使用px单位编写</li><li>插件自动转换为vw单位</li><li>在1920x1080和笔记本分辨率下测试</li><li>观察元素比例是否保持一致</li></ul></div></div></section></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 全局重置和基础样式 */
* {box-sizing: border-box;
}.responsive-test-page {min-height: 100vh;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);font-family: 'Arial', sans-serif;padding: 0;margin: 0;
}/* 头部区域样式 */
.hero-section {background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);padding: 80px 40px;text-align: center;color: white;position: relative;overflow: hidden;
}.hero-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>')repeat;background-size: 50px 50px;animation: float 20s infinite linear;
}@keyframes float {0% {transform: translateX(0) translateY(0);}100% {transform: translateX(-50px) translateY(-50px);}
}.hero-content {position: relative;z-index: 1;max-width: 1200px;margin: 0 auto;
}.hero-title {font-size: 48px;font-weight: 700;margin: 0 0 16px 0;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);animation: slideInDown 1s ease-out;
}@keyframes slideInDown {from {opacity: 0;transform: translateY(-30px);}to {opacity: 1;transform: translateY(0);}
}.hero-subtitle {font-size: 20px;margin: 0 0 40px 0;opacity: 0.9;animation: slideInUp 1s ease-out 0.3s both;
}@keyframes slideInUp {from {opacity: 0;transform: translateY(30px);}to {opacity: 0.9;transform: translateY(0);}
}.hero-stats {display: flex;justify-content: center;gap: 60px;flex-wrap: wrap;animation: fadeIn 1s ease-out 0.6s both;
}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}.stat-item {text-align: center;
}.stat-number {display: block;font-size: 32px;font-weight: 700;margin-bottom: 8px;color: #fff;
}.stat-label {font-size: 14px;opacity: 0.8;text-transform: uppercase;letter-spacing: 1px;
}/* 特色卡片样式 */
.featured-card {padding: 60px 40px;background: rgba(255, 255, 255, 0.1);
}.card-container {max-width: 1200px;margin: 0 auto;
}.feature-card {background: white;border-radius: 20px;padding: 40px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);text-align: center;transform: translateY(0);transition: all 0.3s ease;
}.feature-card:hover {transform: translateY(-10px);box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}.card-icon {font-size: 64px;margin-bottom: 24px;display: block;
}.card-title {font-size: 28px;color: #333;margin: 0 0 20px 0;font-weight: 600;
}.card-description {font-size: 16px;line-height: 1.6;color: #666;margin: 0 0 30px 0;
}.card-tags {display: flex;justify-content: center;gap: 12px;flex-wrap: wrap;
}.tag {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;padding: 8px 16px;border-radius: 20px;font-size: 14px;font-weight: 500;
}/* 功能网格样式 */
.features-grid {padding: 80px 40px;background: rgba(255, 255, 255, 0.05);
}.grid-container {max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;
}.feature-item {background: white;border-radius: 16px;padding: 32px 24px;text-align: center;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;position: relative;overflow: hidden;
}.feature-item::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);transition: left 0.5s;
}.feature-item:hover::before {left: 100%;
}.feature-item:hover {transform: translateY(-8px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}.feature-icon {font-size: 48px;margin-bottom: 20px;display: block;
}.feature-title {font-size: 20px;color: #333;margin: 0 0 12px 0;font-weight: 600;
}.feature-desc {font-size: 14px;color: #666;line-height: 1.5;margin: 0;
}/* 按钮组样式 */
.button-section {padding: 60px 40px;text-align: center;background: rgba(255, 255, 255, 0.1);
}.button-container {max-width: 800px;margin: 0 auto;display: flex;justify-content: center;gap: 20px;flex-wrap: wrap;
}.btn {padding: 16px 32px;border: none;border-radius: 50px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;text-transform: uppercase;letter-spacing: 1px;position: relative;overflow: hidden;
}.btn::before {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: rgba(255, 255, 255, 0.3);border-radius: 50%;transform: translate(-50%, -50%);transition: width 0.3s, height 0.3s;
}.btn:hover::before {width: 300px;height: 300px;
}.btn-primary {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}.btn-primary:hover {transform: translateY(-2px);box-shadow: 0 12px 30px rgba(102, 126, 234, 0.6);
}.btn-secondary {background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);color: white;box-shadow: 0 8px 20px rgba(240, 147, 251, 0.4);
}.btn-secondary:hover {transform: translateY(-2px);box-shadow: 0 12px 30px rgba(240, 147, 251, 0.6);
}.btn-outline {background: transparent;color: white;border: 2px solid white;
}.btn-outline:hover {background: white;color: #333;transform: translateY(-2px);
}.btn-gradient {background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);color: #333;box-shadow: 0 8px 20px rgba(252, 182, 159, 0.4);
}.btn-gradient:hover {transform: translateY(-2px);box-shadow: 0 12px 30px rgba(252, 182, 159, 0.6);
}/* 测试信息样式 */
.test-info {padding: 60px 40px;background: rgba(255, 255, 255, 0.05);
}.info-container {max-width: 800px;margin: 0 auto;
}.info-card {background: white;border-radius: 16px;padding: 40px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}.info-title {font-size: 24px;color: #333;margin: 0 0 24px 0;font-weight: 600;text-align: center;
}.info-list {list-style: none;padding: 0;margin: 0;
}.info-list li {padding: 12px 0;border-bottom: 1px solid #eee;font-size: 16px;color: #666;position: relative;padding-left: 30px;
}.info-list li:last-child {border-bottom: none;
}.info-list li::before {content: '✓';position: absolute;left: 0;color: #4facfe;font-weight: bold;font-size: 18px;
}/* 响应式设计 */
@media (max-width: 768px) {.hero-title {font-size: 36px;}.hero-subtitle {font-size: 18px;}.hero-stats {gap: 30px;}.stat-number {font-size: 24px;}.grid-container {grid-template-columns: 1fr;gap: 20px;}.button-container {flex-direction: column;align-items: center;}.btn {width: 200px;}
}
</style>

3.3 验证方法

  1. 启动开发服务器：

    npm run serve

  2. 打开浏览器开发者工具：

    • 按 F12 打开开发者工具
    • 切换到 Elements/元素面板
    • 查看编译后的 CSS

  3. 验证转换结果：

    • 原始 CSS：font-size: 24px
    • 转换后：font-size: 6.4vw

  4. 测试响应式效果：

    • 调整浏览器窗口大小
    • 观察页面元素是否按比例缩放
    • 使用设备模拟器测试不同屏幕尺寸

🔧 Vue 2 与 Vue 3 的配置差异

Vue 2 (Vue CLI) 配置特点

  1. 配置文件：使用 vue.config.js 而不是 vite.config.js
  2. PostCSS 配置路径：css.loaderOptions.postcss.postcssOptions.plugins
  3. 模块导入：使用 require() 而不是 import
  4. 构建工具：基于 Webpack 而不是 Vite

Vue 3 (Vite) 配置特点

  1. 配置文件：使用 vite.config.js
  2. PostCSS 配置路径：css.postcss.plugins
  3. 模块导入：使用 import ES 模块语法
  4. 构建工具：基于 Vite，构建速度更快

配置对比

Vue 2 配置：

// vue.config.js
const { defineConfig } = require("@vue/cli-service");module.exports = defineConfig({css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require("postcss-px-to-viewport-8-plugin")({viewportWidth: 375,// ...其他配置}),],},},},},
});

Vue 3 配置：

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import postcssViewport from "postcss-px-to-viewport-8-plugin";export default defineConfig({plugins: [vue()],css: {postcss: {plugins: [postcssViewport({viewportWidth: 375,// ...其他配置}),],},},
});

📖 配置参数详细说明

核心参数

参数名类型默认值说明
viewportWidthNumber320设计稿的视口宽度
viewportHeightNumber568设计稿的视口高度
unitPrecisionNumber5转换后的单位精度
propListArray[‘*’]需要转换的 CSS 属性列表
viewportUnitString‘vw’转换后的视口单位
fontViewportUnitString‘vw’字体相关属性转换后的单位

过滤参数

参数名类型默认值说明
selectorBlackListArray[]不需要转换的选择器列表
minPixelValueNumber1最小转换的像素值
excludeRegExp/Arrayundefined忽略某些文件
includeRegExp/Arrayundefined只转换匹配的文件

🔧 常见问题和解决方案

问题 1：插件不生效，px 没有被转换

可能原因：

  • vue.config.js 配置错误
  • 文件被 exclude 规则排除
  • 选择器在黑名单中

解决方案：

  1. 检查 vue.config.js 配置路径是否正确
  2. 确认 CSS 文件路径没有被 exclude
  3. 重启开发服务器
# 重启开发服务器
npm run serve

问题 2：与 Vue CLI 内置 PostCSS 插件冲突

解决方案：

// vue.config.js
module.exports = defineConfig({css: {loaderOptions: {postcss: {postcssOptions: {plugins: [// 确保px-to-viewport插件在其他插件之前require("postcss-px-to-viewport-8-plugin")({viewportWidth: 375,// ...配置}),// 其他PostCSS插件],},},},},
});

问题 3：第三方组件库样式被错误转换

解决方案：

// 排除常见的Vue 2组件库
exclude: [/node_modules/,/element-ui/,/ant-design-vue/,/vant/,/iview/,/view-design/
],
// 或使用选择器黑名单
selectorBlackList: ['.el-',      // Element UI'.ant-',     // Ant Design Vue'.van-',     // Vant'.ivu-'      // iView/View Design
]

问题 4：Vue 2 生命周期钩子中的响应式处理

Vue 2 特有的注意事项：

// Vue 2组件中正确处理视口变化
export default {data() {return {viewportWidth: window.innerWidth,};},mounted() {// Vue 2中使用mounted而不是onMountedwindow.addEventListener("resize", this.handleResize);},beforeDestroy() {// Vue 2中使用beforeDestroy而不是onUnmountedwindow.removeEventListener("resize", this.handleResize);},methods: {handleResize() {this.viewportWidth = window.innerWidth;},},
};

🎯 Vue 2 项目最佳实践

1. 与 Vue 2 生态系统集成

// 与Element UI集成
selectorBlackList: ['.el-',           // Element UI组件'.el-message',    // 消息组件'.el-dialog'      // 对话框组件
],// 与Vuetify集成
selectorBlackList: ['.v-',            // Vuetify组件'.vuetify'        // Vuetify容器
]

2. Vue 2 项目结构建议

src/
├── components/
│   ├── common/          # 通用组件
│   └── responsive/      # 响应式组件
├── styles/
│   ├── variables.css    # CSS变量
│   ├── mixins.css       # CSS混合
│   └── responsive.css   # 响应式样式
└── utils/└── viewport.js      # 视口工具函数

3. Vue 2 响应式工具函数

// src/utils/viewport.js
export const viewport = {// 获取当前视口宽度getWidth() {return window.innerWidth;},// 计算px转vwpxToVw(px, designWidth = 375) {return ((px / designWidth) * 100).toFixed(3) + "vw";},// 判断是否为移动端isMobile() {return window.innerWidth <= 768;},// 添加视口变化监听器addResizeListener(callback) {window.addEventListener("resize", callback);},// 移除视口变化监听器removeResizeListener(callback) {window.removeEventListener("resize", callback);},
};

4. Vue 2 混入(Mixin)支持

// src/mixins/responsive.js
export const responsiveMixin = {data() {return {viewportWidth: window.innerWidth,isMobile: window.innerWidth <= 768,};},mounted() {this.handleResize = this.handleResize.bind(this);window.addEventListener("resize", this.handleResize);},beforeDestroy() {window.removeEventListener("resize", this.handleResize);},methods: {handleResize() {this.viewportWidth = window.innerWidth;this.isMobile = window.innerWidth <= 768;},pxToVw(px, designWidth = 375) {return ((px / designWidth) * 100).toFixed(3) + "vw";},},
};// 在组件中使用
export default {mixins: [responsiveMixin],// ...组件其他选项
};

📚 相关资源

  • Vue 2 官方文档
  • Vue CLI 官方文档
  • postcss-px-to-viewport-8-plugin GitHub
  • PostCSS 官方文档
  • Webpack CSS 配置

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

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

相关文章

Android MVVM模式介绍

Android MVVM模式介绍

一、介绍 1.Model(模型) Model代表应用程序的数据和业务逻辑。它负责处理数据的获取、存储和更新&#xff0c;例如从数据库中检索数据或通过网络请求获取数据。Model通常是与UI无关的部分&#xff0c;因此可以独立测试和复用。 2. View&#xff08;视图&#xff09; View是用…
阅读更多...
WHAT - React Native 的 Expo Router

WHAT - React Native 的 Expo Router

文章目录 核心定义核心理念核心功能解析&#xff08;Features&#xff09;1. Native2. Shareable3. Offline-first4. Optimized5. Iteration6. Universal7. Discoverable 总结示例&#xff1a;页面结构如何变成导航&#xff1f; 原文&#xff1a;https://docs.expo.dev/router/…
阅读更多...
XML读取和设置例子

XML读取和设置例子

在Qt C中&#xff0c;可以使用Qt的 QDomDocument类来读取、更新和保存XML文件。这个类提供了对XML文档的强大操作能力&#xff0c;支持通过DOM&#xff08;文档对象模型&#xff09;对XML进行读取、修改、添加和删除节点等操作。 下面是一个详细的例子&#xff0c;演示如何在Qt…
阅读更多...
ubuntu 远程桌面 xrdp + frp

ubuntu 远程桌面 xrdp + frp

经测试VNC启动桌面&#xff0c;并非常规的桌面。 不如RDP好用。因此不用VNC server 一类。 直接安装xrdp 实现UBUNTU 到UBUNTU 桌面的远程共享。 sudo apt install xrdpsudo systemctl start xrdp查看状态&#xff1a; sudo systemctl status xrdp ● xrdp.service - xrdp d…
阅读更多...
el-table表头添加说明

el-table表头添加说明

1、el-table-column添加render-header 2、编写render函数 renderTipsHeader(h, { column }, item) {return h(span,[h(span, column.label),h(el-tooltip,{props:{effect:dark,content:item.headertip,placement:top},},[h(i, {class:el-icon-question,style:color:#C0C4CC;mar…
阅读更多...
【AI论文】MultiFinBen：一个用于金融大语言模型评估的多语言、多模态且具备难度感知能力的基准测试集

【AI论文】MultiFinBen：一个用于金融大语言模型评估的多语言、多模态且具备难度感知能力的基准测试集

摘要&#xff1a;近期&#xff0c;大型语言模型&#xff08;LLMs&#xff09;的进展加速了金融自然语言处理&#xff08;NLP&#xff09;及其应用的发展&#xff0c;然而现有的基准测试仍局限于单语言和单模态场景&#xff0c;往往过度依赖简单任务&#xff0c;无法反映现实世界…
阅读更多...
使用 .NET Core+GcExcel，生成 Excel 文件

使用 .NET Core+GcExcel，生成 Excel 文件

引言 在当今数字化办公和数据处理的大环境下&#xff0c;在线生成 Excel 文件成为了许多企业和开发者的需求。.NET Core 作为一个跨平台的开源框架&#xff0c;具有高效、灵活等特点&#xff0c;而 GcExcel 是一款功能强大的 Excel 处理组件。将二者结合&#xff0c;可以方便地…
阅读更多...
【代码解析】opencv 安卓 SDK sample - 1 - HDR image

【代码解析】opencv 安卓 SDK sample - 1 - HDR image

很久没有写安卓了&#xff0c;复习复习。用的是官方案例&#xff0c;详见opencv-Android-sdk 包 // 定义包名&#xff0c;表示该类的组织路径 package org.opencv.samples.tutorial1;// 导入所需的OpenCV和Android类库 import org.opencv.android.CameraActivity; // OpenCV…
阅读更多...
Web中间件性能调优指南：线程池、长连接与负载均衡的最佳实践

Web中间件性能调优指南：线程池、长连接与负载均衡的最佳实践

目录 引言一、Web容器线程池配置不当1.1 线程池参数的核心作用与影响1.2 线程池大小计算模型1.3 动态调优实践 二、Keep-Alive机制配置缺陷2.1 Keep-Alive的工作原理2.2 典型配置问题与影响2.3 优化配置建议 三、负载均衡策略缺失3.1 负载均衡的核心价值3.2 主流负载均衡算法对…
阅读更多...
15个AI模拟面试平台 和 简历修改 / 真人面试平台

15个AI模拟面试平台 和 简历修改 / 真人面试平台

对15个AI模拟面试平台的详细分析&#xff0c;每个平台都将按照统一的框架进行评估。 补充重要的&#xff1a; 【1】AMA interview 听说最好&#xff0c;最贵 1. Final Round AI 网址: https://www.finalroundai.com/ 功能深度剖析: Final Round AI 提供了一套全面的求职工具…
阅读更多...
开始使用 Elastic AI Assistant for Observability 和阿里 Qwen3

开始使用 Elastic AI Assistant for Observability 和阿里 Qwen3

这篇文章是继之前的文章 “在本地电脑中部署阿里 Qwen3 大模型及连接到 Elasticsearch” 的续篇。如果你还没有部署好自己的 Qwen3&#xff0c;那么请阅读之前的那篇文章来安装好环境&#xff0c;然后再继续今天练习。在今天的文章中&#xff0c;我们将展示如何结合 Qwn3 和 El…
阅读更多...
稳定币技术全解：从货币锚定机制到区块链金融基础设施

稳定币技术全解：从货币锚定机制到区块链金融基础设施

引言&#xff1a;稳定币的技术定位 根据国际清算银行&#xff08;BIS&#xff09;2025年定义&#xff1a;稳定币是以法定资产或算法机制维持价值稳定的区块链代币&#xff0c;其本质是传统金融与加密技术的接口层。 核心价值&#xff1a;解决加密货币波动性问题 → 成为DeFi生态…
阅读更多...
syncthing忘记密码怎么办（Mac版）？

syncthing忘记密码怎么办（Mac版）？

一、问题描述 syncthing安装在Mac端&#xff0c;更改原同步文件夹的路径&#xff0c;需要重新设计同步文件&#xff0c;设置了密码且忘记密码。未看见忘记密码的选项。 网上查询解决方案&#xff0c;发现只能通过修改配置文件才能继续正常访问。但是并没有在建议路径中找到配置…
阅读更多...
半导体FAB中的服务器硬件故障监控与预防全方案：从预警到零宕机实战

半导体FAB中的服务器硬件故障监控与预防全方案：从预警到零宕机实战

&#x1f4ca; 服务器硬件故障监控与预防全方案&#xff1a;从预警到零宕机实战 关键词&#xff1a;SMART监控 RAID预警 IPMI传感器 性能基线 Prometheus Zabbix 高可用架构 一、硬件故障前的7大预警信号&#xff08;附关联工具&#xff09; 故障类型关键指标监控工具预警阈值…
阅读更多...
一分钟了解Transformer

一分钟了解Transformer

一分钟了解Transformer A Minute to Know About Transformer By JacksonML 1. Transformer是什么&#xff1f; Transformer模型是一种神经网络&#xff0c;它通过学习上下文及其含义&#xff0c;跟踪序列数据中&#xff08;如本句中的单词&#xff09;中的关系。Transforme…
阅读更多...
【Ubuntu学习】嵌入式编译工具链熟悉与游戏移植

【Ubuntu学习】嵌入式编译工具链熟悉与游戏移植

目录 一、Ubuntu 系统编译 MININIM 源码 1. 环境准备与依赖配置 2. 编译 Allegro5.2.5 引擎 ​编辑 3. 编译 MININIM 源码 4. 故障解决 5. 打包与迁移 二、嵌入式平台编译实践 1. 树莓派 3B 编译 MININIM 2. Android 平台交叉编译 三、树莓派 3B 流水灯实验&#xf…
阅读更多...
川翔云电脑全新上线：三维行业高效云端算力新选择

川翔云电脑全新上线：三维行业高效云端算力新选择

一、核心定位与优势 云端虚拟工作站服务 依托云端高性能 CPU/GPU 集群&#xff0c;提供远程桌面服务&#xff0c;支持普通设备运行专业软件。 按需付费模式&#xff1a;无需采购高端硬件&#xff0c;大幅降低成本投入。生态协同优势&#xff1a;与渲染 101 同属母公司&#…
阅读更多...
百面Bert

百面Bert

百面Bert Q1. Bert与Transformer有什么关系 Bert是基于Transformer架构中的Encoder进行搭建的。 具体来说&#xff0c;Bert的核心组件是几个Encoder layer的堆叠。Encoder layer中&#xff0c;也是两个子层&#xff0c;分别是注意力层和intermediate层&#xff08;Bert中的叫…
阅读更多...
Docker Compose与私有仓库部署

Docker Compose与私有仓库部署

目录 一. Docker 重启策略 二. Docker Compose工具的应用 1. 什么是 Docker compose 2. Docker compose 的安装 3. 编辑文件格式及编写注意事项 4. docker-compose的基本用法 三. Harbor私有仓库 1. 什么是Harbor 2. Harbor 的优势 3. Harbor 的构成 四. 部署Harbor…
阅读更多...
数字隔离器，如何扛起现代智能家电的电气安全“大旗”

数字隔离器，如何扛起现代智能家电的电气安全“大旗”

随着现代社会生活节奏的不断加速&#xff0c;人们对于属于自己的休闲时间愈发珍视&#xff0c;而智能家居作为提升人类居家幸福感与舒适度的现代化产物&#xff0c;不仅能有效满足人们对高品质生活的追求&#xff0c;还能推动产业升级与经济增长&#xff0c;引导智能家电设备从…
阅读更多...
最新文章

Copyright @ 2022~2023