当前位置: 首页 > news >正文

vue2企业级项目(五)

vue2企业级项目(五)

页面适配、主题切换

1、适配

  1. 项目下载插件

    npm install --save-dev style-resources-loader vue-cli-plugin-style-resources-loader
    
  2. 修改vue.config.js部分内容

    const path = require("path");module.exports = {pluginOptions: {"style-resources-loader": {preProcessor: "less",patterns: [// 全局变量路径path.resolve(__dirname, "./src/styles/index.less"),],},},...
    };
  3. 创建style/custom.less

    .rem(@px) {@result: unit((@px / 10), rem);
    }
  4. 此时就可以在其他组件使用全局变量和全局混入函数

    <style lang="less" scoped>
    .wrap {width: .rem(100) [];color: red;background-color: @mycolor;
    }
    </style>
    
  5. main.js引入最基础的flexible.js

    (function flexible(window, document) {var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;// 设置根字体大小function setRootFontSize() {var screenWidth = docEl.clientWidth || window.innerWidth || document.documentElement.clientWidth;var fontSize = screenWidth / 10; // 假设以屏幕宽度的 1/10 作为根字体大小docEl.style.fontSize = fontSize + 'px';}// 设置 viewport 的缩放比例function setViewportScale() {var scale = 1 / dpr;var metaEl = document.querySelector('meta[name="viewport"]');if (!metaEl) {metaEl = document.createElement('meta');metaEl.setAttribute('name', 'viewport');document.head.appendChild(metaEl);}metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');}setRootFontSize();setViewportScale();// 监听窗口大小变化,重新设置根字体大小和缩放比例window.addEventListener('resize', function() {setRootFontSize();setViewportScale();});
    })(window, document);
    

2、主题切换

静态更换

直接根据element-ui官方文档提供的主题生成器,生成自己的主题颜色样式包。然后下载,并在项目中引入。并删除之前原有的组件样式。

动态更换

https://www.cnblogs.com/jiaoshou/p/16178580.html

  1. 下载插件

    npm install --save-dev webpack-theme-color-replacer@1.3.3
    
  2. 修改vue.config.js

    const ThemeColorReplacer = require("webpack-theme-color-replacer");
    ...module.exports = [configureWebpack: {plugins: [new ThemeColorReplacer({fileName: "css/theme-colors-[contenthash:8].css",matchColors: ["#409EFF"],injectCss: true,}),],},
    ]
    
  3. 切换颜色

    import client from "webpack-theme-color-replacer/client";function themeChange(color) {client.changer.changeColor({ newColors: ["" + color] });
    }
    

相关文章:

vue2企业级项目(五)

vue2企业级项目&#xff08;五&#xff09; 页面适配、主题切换 1、适配 项目下载插件 npm install --save-dev style-resources-loader vue-cli-plugin-style-resources-loader修改vue.config.js部分内容 const path require("path");module.exports {pluginOpt…...

【HTML5】拖放详解及实现案例

文章目录 效果预览代码实现 效果预览 代码实现 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>一颗不甘坠落的流星</title><style>#div1,#div2 {float: left;width: 100px;height: 27px;margin: 10px;paddin…...

Codeforces Round 888 (Div. 3)(视频讲解全部题目)

[TOC](Codeforces Round 888 (Div. 3)&#xff08;视频讲解全部题目&#xff09;) Codeforces Round 888 (Div. 3)&#xff08;A–G&#xff09;全部题目详解 A Escalator Conversations #include<bits/stdc.h> #define endl \n #define INF 0x3f3f3f3f using namesp…...

MySQL之深入InnoDB存储引擎——物理文件

文章目录 一、参数文件二、日志文件三、表结构定义文件四、InnoDB 存储引擎文件1、表空间文件2、重做日志文件 一、参数文件 当 MySQL 实例启动时&#xff0c;数据库会先去读一个配置参数文件&#xff0c;用来寻找数据库的各种文件所在位置以及指定某些初始化参数。在默认情况…...

Jquery操作html常用函数

1. text() 获取元素的文本内容&#xff1a;$("#element").text(); 设置元素的文本内容&#xff1a;$("#element").text("New Text"); 2. html() 获取元素的 HTML 内容&#xff1a;$("#element").html(); 设置元素的 HTML 内容&am…...

【Lua学习笔记】Lua进阶——Table,迭代器

文章目录 官方唯一指定数据结构--tabletable的一万种用法字典和数组 迭代器ipairs()pairs() 回到Table 在【Lua学习笔记】Lua入门中我们讲到了Lua的一些入门知识点&#xff0c;本文将补充Lua的一些进阶知识 官方唯一指定数据结构–table 在上篇文章的最后&#xff0c;我们指出…...

重庆市北斗新型智慧城市政府项目

技术栈&#xff1a;使用vue2JavaScriptElementUIvuexaxiosmapboxcesium 项目描述&#xff1a;重庆市北斗新型智慧城市政府项目是基于千寻孪界开发的一款智慧城市项目&#xff0c;包含车辆实时位置定位&#xff0c;智能设备的报警&#xff0c;基础设施的部设等等功能 工作内容&a…...

FANUC机器人SRVO-217故障报警原因分析及参考解决办法

FANUC机器人SRVO-217故障报警原因分析及参考解决办法 如下图所示,示教器提示:SRVO-217紧急停止电路板未找到, 查阅手册可以看到以下的报警说明: 故障原因: 通电时未能识别紧急停止电路板或者增设的安全I/O装置。连接有多个安全I/O装置的系统中,在报警信息的最后,会显示发…...

统信UOS安装mysql数据库(mariadb)-统信UOS安装JDK-统信UOS安装nginx(附安装包)

统信UOS离线全套安装教程&#xff08;手把手教程&#xff09; 银河麒麟的各种离线全套安装教程&#xff1a; https://blog.csdn.net/ACCPluzhiqi/article/details/131988147 1.统信UOS桌面系统安装mysql&#xff08;mariadb&#xff09; 2.统信UOS桌面系统安装JDK 3.统信UOS桌…...

上门小程序开发|上门服务小程序|上门家政小程序开发

随着移动互联网的普及和发展&#xff0c;上门服务成为了许多人生活中的一部分。上门小程序是一种基于小程序平台的应用程序&#xff0c;它提供了上门服务的在线平台&#xff0c;为用户提供了便捷的上门服务体验。下面将介绍一些适合开发上门小程序的商家。   家政服务商家&am…...

1000道网络安全必备面试题合集,秋招金九银十必看!!!

以下为网络安全各个方向涉及的面试题&#xff0c;星数越多代表问题出现的几率越大&#xff0c;祝各位都能找到满意的工作。 注&#xff1a;本套面试题&#xff0c;已整理成pdf文档&#xff0c;但内容还在持续更新中&#xff0c;因为无论如何都不可能覆盖所有的面试问题&#x…...

从0-1实现简易Raft分布式共识算法

一、Raft前置简介 Raft目前是最著名的分布式共识性算法&#xff0c;被广泛的应用在各种分布式框架、组件中&#xff0c;如Redis、RocketMq、Kafka、Nacos&#xff08;CP&#xff09;等 根据Raft论文&#xff0c;可将Raft拆分为如下4个功能模块&#xff1a; 领导者选举日志同…...

Spring 创建和使用

Spring 是⼀个包含了众多⼯具⽅法的 IoC 容器。既然是容器那么它就具备两个最基本的功能&#xff1a; 将对象存储到容器&#xff08;Spring&#xff09;中&#xff1b; 从容器中将对象取出来。 在 Java 语⾔中对象也叫做 Bean 1.创建 Spring 项目 接下来使⽤ Maven ⽅式来创…...

Javadoc comment自动生成

光标放在第二行 按下Alt Shift j 下面是Java doc的生成 Next Next-> Finish...

vue3 +ts 报错 index.vue 不是模块

那是因为index.vue中创建了一个空的script标签&#xff0c;而且语法使用的是ts语法。vue-cli会用ts语法解析和校验 如果是无状态组件&#xff0c;删掉 如果是有状态组件&#xff0c;导出该组件的实例 去掉null的script后&#xff1a;...

win10 hadoop报错 unable to load native-hadoop library

win10 安装hadoop执行hdfs -namenode format 和运行hadoop的start-all报错 unable to load native-hadoop library 验证&#xff1a; hadoop checknative -a 这个命令返回都是false是错的 返回下图是正确的 winutils: true D:\soft\hadoop-3.0.0\bin\winutils.exe Native li…...

前端(九)——探索微信小程序、Vue、React和Uniapp生命周期

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;探索微信小程序、Vue、React和Uniapp生命周期 文章目录 微信小程序、Vue、React和Uniapp的基本定义和应用领域微信小程序生命周期生命周期概述页面生命周期应用生命周期组件和API的生命周期钩子 Vu…...

MyBatis查询数据库(2)

目录 前言&#x1f36d; 一、增删查改操作 1、查 Ⅰ、mapper接口&#xff1a; Ⅱ、UserMapper.xml 查询所有用户的具体实现 SQL&#xff1a; Ⅲ、进行单元测试 2、增、删、改操作 Ⅰ、增 添加用户 添加用户并且返回自增 id Ⅱ、改 根据id修改用户名 开启 MyBatis …...

Jenkins构建完成后发送消息至钉钉

钉钉群的最终效果&#xff1a; 1、jenkins安装DingTalk插件&#xff0c;安装完成后重启 2、配置钉钉插件 参考官网文档&#xff1a;快速开始 | 钉钉机器人插件 系统管理 拉到最下面&#xff0c;可以看到钉钉配置 按照如下配置钉钉机器人 配置完成可以点击测试按钮&#xff0…...

从浏览器输入url到页面加载(六)前端必须了解的路由器和光纤小知识

前言 上一章我们说到了数据包在网线中的故事&#xff0c;说到了双绞线&#xff0c;还说到了麻花。这一章继续沿着这条线路往下走&#xff0c;说一些和cdn以及路由器相关&#xff0c;运营商以及光纤相关的小知识&#xff0c;前端同学应该了解一下的 目录 前言 1. CDN和路由器…...

Windows安卓应用安装终极指南:告别模拟器,三步完成APK直接运行

Windows安卓应用安装终极指南&#xff1a;告别模拟器&#xff0c;三步完成APK直接运行 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 还在为Windows电脑无法直接运行安…...

CyberChef:数据处理的万能工具箱

CyberChef&#xff1a;数据处理的万能工具箱 【免费下载链接】CyberChef The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis 项目地址: https://gitcode.com/GitHub_Trending/cy/CyberChef 数据处理的困境与破局之道 你…...

别再只盯着Logits了!聊聊知识蒸馏里‘注意力图’那点事儿(从AT论文到理解误区)

注意力蒸馏&#xff1a;超越Logits的知识迁移新范式 在深度学习模型压缩领域&#xff0c;知识蒸馏早已不是新鲜话题。大多数实践者会条件反射地想到教师网络输出的logits或中间层特征——这些确实是最直观的知识载体。但当我们把目光投向人类的学习过程时&#xff0c;会发现一个…...

模型压缩新选择:用LLaMA-Factory实现QLoRA+GPTQ双重量化(附CUDA配置)

模型压缩新选择&#xff1a;用LLaMA-Factory实现QLoRAGPTQ双重量化实战指南 当大语言模型的参数量突破百亿级别&#xff0c;如何在消费级显卡上实现高效推理成为开发者面临的核心挑战。传统单一量化方法往往需要在精度和效率之间艰难取舍&#xff0c;而混合量化技术正在打开新的…...

Anaconda3 2025 安装教程【附安装包】快速安装下载

安装包https://qqstone.top/blog/anaconda3-2025 安装步骤 1. 解压压缩包 下载完成后&#xff0c;鼠标右击【Anaconda3 2025】压缩包&#xff0c;选择【解压至此处】。 2. 以管理员身份运行安装程序 打开解压后的文件夹&#xff0c;鼠标右击【Setup】选择【以管理员身份运行…...

Pixel Couplet Gen多场景落地:政务公众号/电商首页/校园迎新展板

Pixel Couplet Gen多场景落地&#xff1a;政务公众号/电商首页/校园迎新展板 1. 项目概览 Pixel Couplet Gen是一款基于ModelScope大模型驱动的创新型春联生成工具。与传统春联设计不同&#xff0c;它融合了8-bit像素游戏风格与传统文化元素&#xff0c;创造出独特的数字春节…...

Local AI MusicGen创意展示:由‘neon lights vibe’触发的都市夜景音乐

Local AI MusicGen创意展示&#xff1a;由‘neon lights vibe’触发的都市夜景音乐 1. 引言&#xff1a;当AI遇见音乐创作 你有没有想过&#xff0c;用一段简单的文字描述就能生成一段专属的背景音乐&#xff1f;Local AI MusicGen让这个想法变成了现实。这是一个基于Meta Mu…...

【架构心法】撕碎“实验室完美”的傲慢!直视滚刀与高压现场的物理混沌,论工业级控制系统的“防御性悲观主义”

摘要&#xff1a;在纯净的实验室里&#xff0c;“1”永远是“1”&#xff0c;“0”永远是“0”。但在重型机械的施工现场&#xff0c;物理法则充满了不可预测的恶意。无数工程师带着“代码没 Bug 就不会死机”的天真走向现场&#xff0c;最终却在震动、高温与电磁噪声的围剿下全…...

[Python3高阶编程] - 横跨同步异步的利器: asgiref.sync

一、asgiref.sync 是什么&#xff1f;asgiref.sync 是 ASGI&#xff08;Asynchronous Server Gateway Interface&#xff09;参考实现库 asgiref 中的核心子模块&#xff0c;主要用于安全地桥接同步代码与异步代码。&#x1f4cc; 一句话总结&#xff1a; 它让你在异步环境中调…...

极客玩法:OpenClaw+Qwen3-14B控制智能家居实战

极客玩法&#xff1a;OpenClawQwen3-14B控制智能家居实战 1. 为什么选择OpenClaw控制智能家居&#xff1f; 去年装修新房时&#xff0c;我给自己定了个小目标&#xff1a;所有智能设备必须能通过自然语言控制。市面上的语音助手总让我觉得"差点意思"——要么响应慢…...