vue2企业级项目(五)
vue2企业级项目(五)
页面适配、主题切换
1、适配
-
项目下载插件
npm install --save-dev style-resources-loader vue-cli-plugin-style-resources-loader -
修改
vue.config.js部分内容const path = require("path");module.exports = {pluginOptions: {"style-resources-loader": {preProcessor: "less",patterns: [// 全局变量路径path.resolve(__dirname, "./src/styles/index.less"),],},},... }; -
创建
style/custom.less.rem(@px) {@result: unit((@px / 10), rem); } -
此时就可以在其他组件使用全局变量和全局混入函数
<style lang="less" scoped> .wrap {width: .rem(100) [];color: red;background-color: @mycolor; } </style> -
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
-
下载插件
npm install --save-dev webpack-theme-color-replacer@1.3.3 -
修改
vue.config.jsconst ThemeColorReplacer = require("webpack-theme-color-replacer"); ...module.exports = [configureWebpack: {plugins: [new ThemeColorReplacer({fileName: "css/theme-colors-[contenthash:8].css",matchColors: ["#409EFF"],injectCss: true,}),],}, ] -
切换颜色
import client from "webpack-theme-color-replacer/client";function themeChange(color) {client.changer.changeColor({ newColors: ["" + color] }); }
相关文章:
vue2企业级项目(五)
vue2企业级项目(五) 页面适配、主题切换 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)(视频讲解全部题目)) Codeforces Round 888 (Div. 3)(A–G)全部题目详解 A Escalator Conversations #include<bits/stdc.h> #define endl \n #define INF 0x3f3f3f3f using namesp…...
MySQL之深入InnoDB存储引擎——物理文件
文章目录 一、参数文件二、日志文件三、表结构定义文件四、InnoDB 存储引擎文件1、表空间文件2、重做日志文件 一、参数文件 当 MySQL 实例启动时,数据库会先去读一个配置参数文件,用来寻找数据库的各种文件所在位置以及指定某些初始化参数。在默认情况…...
Jquery操作html常用函数
1. text() 获取元素的文本内容:$("#element").text(); 设置元素的文本内容:$("#element").text("New Text"); 2. html() 获取元素的 HTML 内容:$("#element").html(); 设置元素的 HTML 内容&am…...
【Lua学习笔记】Lua进阶——Table,迭代器
文章目录 官方唯一指定数据结构--tabletable的一万种用法字典和数组 迭代器ipairs()pairs() 回到Table 在【Lua学习笔记】Lua入门中我们讲到了Lua的一些入门知识点,本文将补充Lua的一些进阶知识 官方唯一指定数据结构–table 在上篇文章的最后,我们指出…...
重庆市北斗新型智慧城市政府项目
技术栈:使用vue2JavaScriptElementUIvuexaxiosmapboxcesium 项目描述:重庆市北斗新型智慧城市政府项目是基于千寻孪界开发的一款智慧城市项目,包含车辆实时位置定位,智能设备的报警,基础设施的部设等等功能 工作内容&a…...
FANUC机器人SRVO-217故障报警原因分析及参考解决办法
FANUC机器人SRVO-217故障报警原因分析及参考解决办法 如下图所示,示教器提示:SRVO-217紧急停止电路板未找到, 查阅手册可以看到以下的报警说明: 故障原因: 通电时未能识别紧急停止电路板或者增设的安全I/O装置。连接有多个安全I/O装置的系统中,在报警信息的最后,会显示发…...
统信UOS安装mysql数据库(mariadb)-统信UOS安装JDK-统信UOS安装nginx(附安装包)
统信UOS离线全套安装教程(手把手教程) 银河麒麟的各种离线全套安装教程: https://blog.csdn.net/ACCPluzhiqi/article/details/131988147 1.统信UOS桌面系统安装mysql(mariadb) 2.统信UOS桌面系统安装JDK 3.统信UOS桌…...
上门小程序开发|上门服务小程序|上门家政小程序开发
随着移动互联网的普及和发展,上门服务成为了许多人生活中的一部分。上门小程序是一种基于小程序平台的应用程序,它提供了上门服务的在线平台,为用户提供了便捷的上门服务体验。下面将介绍一些适合开发上门小程序的商家。 家政服务商家&am…...
1000道网络安全必备面试题合集,秋招金九银十必看!!!
以下为网络安全各个方向涉及的面试题,星数越多代表问题出现的几率越大,祝各位都能找到满意的工作。 注:本套面试题,已整理成pdf文档,但内容还在持续更新中,因为无论如何都不可能覆盖所有的面试问题&#x…...
从0-1实现简易Raft分布式共识算法
一、Raft前置简介 Raft目前是最著名的分布式共识性算法,被广泛的应用在各种分布式框架、组件中,如Redis、RocketMq、Kafka、Nacos(CP)等 根据Raft论文,可将Raft拆分为如下4个功能模块: 领导者选举日志同…...
Spring 创建和使用
Spring 是⼀个包含了众多⼯具⽅法的 IoC 容器。既然是容器那么它就具备两个最基本的功能: 将对象存储到容器(Spring)中; 从容器中将对象取出来。 在 Java 语⾔中对象也叫做 Bean 1.创建 Spring 项目 接下来使⽤ Maven ⽅式来创…...
Javadoc comment自动生成
光标放在第二行 按下Alt Shift j 下面是Java doc的生成 Next Next-> Finish...
vue3 +ts 报错 index.vue 不是模块
那是因为index.vue中创建了一个空的script标签,而且语法使用的是ts语法。vue-cli会用ts语法解析和校验 如果是无状态组件,删掉 如果是有状态组件,导出该组件的实例 去掉null的script后:...
win10 hadoop报错 unable to load native-hadoop library
win10 安装hadoop执行hdfs -namenode format 和运行hadoop的start-all报错 unable to load native-hadoop library 验证: hadoop checknative -a 这个命令返回都是false是错的 返回下图是正确的 winutils: true D:\soft\hadoop-3.0.0\bin\winutils.exe Native li…...
前端(九)——探索微信小程序、Vue、React和Uniapp生命周期
🙂博主:小猫娃来啦 🙂文章核心:探索微信小程序、Vue、React和Uniapp生命周期 文章目录 微信小程序、Vue、React和Uniapp的基本定义和应用领域微信小程序生命周期生命周期概述页面生命周期应用生命周期组件和API的生命周期钩子 Vu…...
MyBatis查询数据库(2)
目录 前言🍭 一、增删查改操作 1、查 Ⅰ、mapper接口: Ⅱ、UserMapper.xml 查询所有用户的具体实现 SQL: Ⅲ、进行单元测试 2、增、删、改操作 Ⅰ、增 添加用户 添加用户并且返回自增 id Ⅱ、改 根据id修改用户名 开启 MyBatis …...
Jenkins构建完成后发送消息至钉钉
钉钉群的最终效果: 1、jenkins安装DingTalk插件,安装完成后重启 2、配置钉钉插件 参考官网文档:快速开始 | 钉钉机器人插件 系统管理 拉到最下面,可以看到钉钉配置 按照如下配置钉钉机器人 配置完成可以点击测试按钮࿰…...
从浏览器输入url到页面加载(六)前端必须了解的路由器和光纤小知识
前言 上一章我们说到了数据包在网线中的故事,说到了双绞线,还说到了麻花。这一章继续沿着这条线路往下走,说一些和cdn以及路由器相关,运营商以及光纤相关的小知识,前端同学应该了解一下的 目录 前言 1. CDN和路由器…...
别再傻傻编译整个内核了!香橙派3B (rk3566) 快速修改和测试设备树节点的正确姿势
香橙派3B设备树节点高效调试指南:从编译优化到实战技巧 每次修改设备树节点都要重新编译整个内核?等待十几分钟甚至更久只为了验证一个小改动?对于香橙派3B(rk3566)开发者来说,这种低效的工作流程已经成为过去。本文将揭示一套经…...
解锁5大核心技术:MelonLoader模组加载器完全指南
解锁5大核心技术:MelonLoader模组加载器完全指南 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 引言:U…...
精密五金结构件配套
一、我们能为机器人行业提供什么?专注机器人非核心精密五金结构件配套,面向:工业机器人|协作机器人|人形机器人|AGV/AMR|末端执行器|减速器 / 伺服 / 模组|自动化集成工作…...
FlowState Lab 日志分析与性能调优实战
FlowState Lab 日志分析与性能调优实战 1. 为什么需要关注模型服务性能 当你把FlowState Lab模型部署上线后,可能会遇到这样的情况:请求量一大,响应就开始变慢,甚至出现超时。这时候就需要关注服务的性能表现。性能调优不是玄学…...
Qwen3-14B镜像教程:API服务鉴权与访问控制(JWT/OAuth2)
Qwen3-14B镜像教程:API服务鉴权与访问控制(JWT/OAuth2) 1. 镜像概述与准备工作 Qwen3-14B私有部署镜像为开发者提供了开箱即用的大模型服务环境。本教程将重点介绍如何为API服务添加鉴权与访问控制功能,确保服务安全稳定运行。 …...
AntimicroX:解放游戏体验的手柄映射工具,让每款游戏都支持手柄
AntimicroX:解放游戏体验的手柄映射工具,让每款游戏都支持手柄 【免费下载链接】antimicrox Graphical program used to map keyboard buttons and mouse controls to a gamepad. Useful for playing games with no gamepad support. 项目地址: https:…...
palworld-host-save-fix:跨环境存档迁移的技术突破与实践指南
palworld-host-save-fix:跨环境存档迁移的技术突破与实践指南 【免费下载链接】palworld-host-save-fix 项目地址: https://gitcode.com/gh_mirrors/pa/palworld-host-save-fix 一、问题溯源:幻兽帕鲁存档迁移的核心挑战 核心价值:深…...
惊心动魄!从“卡脖子”到“心脏搭桥”,6台路由器带你亲历IPv6平滑迁移
摘要:从IPv4地址耗尽,到DNS根域服务器“卡脖子”风险,再到中国部署IPv6根服务器,网络协议的演进不仅关乎技术,更关乎国家战略。本文带你穿越互联网发展史,并通过eNSP搭建6台路由器的复杂拓扑,手把手演示如何在不重启设备、不影响业务的前提下,将网络从IPv4平滑迁移至IP…...
告别传统知识蒸馏:用‘逆向蒸馏’在MVTec数据集上实现98.5%的异常检测精度
逆向蒸馏:工业质检场景下的异常检测新范式 在工业质检领域,异常检测一直是计算机视觉技术落地的核心挑战之一。传统方法往往受限于样本不平衡、缺陷类型多样等问题,而基于深度学习的方案又面临标注成本高、泛化能力不足的困境。CVPR 2022提出…...
告别Edge收藏夹翻页烦恼!用这个免费插件实现多列平铺,效率翻倍
Edge浏览器收藏夹效率革命:多列平铺插件实战指南 每次打开Edge浏览器,面对那串长得仿佛没有尽头的单列收藏夹,你是不是也感到一阵无力?滚动、翻页、再滚动——找个书签比找停车位还费劲。作为一名每天要和上百个书签打交道的效率控…...
