前言 先说说 shouldComponentUpdate提起React.PureComponent，我们还要从一个生命周期函数 shouldComponentUpdate 说起，从函数名字我们就能看出来，这个函数是用来控制组件是否应该被更新的。简单来说，这个生命周期函数返回一个布尔值，如果返回true，那么当props或state改变的时候进行更新；如果返回false，当props或state改变
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem 。为什么这三个中要推荐 postcss-plugin-px2rem呢？因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性，它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。所以我们可以利用这个特性
转载
2024-06-17 07:37:43
47阅读
PC及移动端页面适配方法 设备屏幕有多种不同的分辨率，页面适配方案有如下几种： 1、全适配：流体布局+响应式布局 2、移动端适配： 流体布局+少量响应式 基于rem的布局 弹性盒模型流体布局 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为
转载
2024-06-03 08:44:24
33阅读
术语“render prop”是指一种在react组件之间使用一个值为函数的prop共享代码的简单技术。具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。我们知道，组件是 React 代码复用的主要单元，但如何分享一个组件封装到其他需要相同 state 组件的状态或行为并不总是很容易。如何使用render prop？官网举了一个经典
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible
原创
2022-03-08 14:40:36
435阅读
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible/flexible.js'在index.html加上 <meta name="viewport" content="width=device-width,initial-scale=1.0"> <met...
原创
2021-08-26 11:21:26
512阅读
这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib flexible 在main.js中 ：import 'lib flexible/flexible'2.引入px2rem loader 3.将px2rem loader添加到cssLoaders
转载
2018-12-13 13:37:00
162阅读
2评论
1.若依文件结构com.ruoyi
├── common // 工具类
│ └── annotation // 自定义注解
│ └── config // 全局配置
│ └── constant // 通用
1、什么是px2rem px2rem是一个插件能将px自动转换为rem，以适配各种不同的屏幕尺寸。前端开发可以直接使用设计稿量出的尺寸或者蓝湖给出的px进行布局，这样极大的提高了开发效率。 2、前提条件 1、vue3.x新建的项目，这里只说vue3.x的适配，因为vue2.x一般都创建很久了，或者不 ...
转载
2021-10-21 23:03:00
746阅读
2评论
css 中单位很多 %、px、em、rem，以及比较新的vw、vh等，每个单位都有特定的用途，而我呢，往往不知道什么时候该用什么，调重点总结一下使用px，结合Media Query进行阶梯式的适配；使用%，按百分比自适应布局；使用rem，结合html元素的font-size来根据屏幕宽度适配；使用vw、vh，直接根据视口宽高适配。在这些大前提下，对小的细节做微调。比如使用px的时候，可
第一步 ： npm install lib-flexible postcss-pxtorem -S 第二步： 运行指令展示出 webapck.config.js 文件 npm run ejectAre you sure you want to eject? This action is perman ...
转载
2021-04-23 16:29:00
1448阅读
2评论
不同生产环境下，有不同的屏幕适配策略。如WPF用<ViewBox>标签包裹控件进行自适应，如安卓中通过分包准备各种大小尺寸的图片资源，如游戏开发中常用的九宫图等等。。。同样屏幕适配还有很多方式，常见的情况有：不管如何改变分辨率的大小和宽高比，都能保持控件宽高比，但不能保持控件的物理宽高，若超出屏幕则出现水平和垂直滚动条。如高于设计的分辨率宽高比，则控件等比缩小，屏幕左右两边留白；或是控
今天，我们使用Vue CLI3 做一个移动端适配 。前言首先确定你的项目是Vue CLI3版本以上的。一、移动端适配包1、安装移动端适配包npm i lib-flexible -S2、在main.js引入适配包import Vue from 'vue'import App from './App.vue'import 'lib-flexible' // 引入适配包Vu...
原创
2021-08-26 14:41:51
207阅读
今天，我们使用Vue CLI3 做一个移动端适配 。前言首先确定你的项目是Vue CLI3版本以上的u...
原创
2022-03-08 14:55:17
240阅读
前言大家好，我是刘明，十年创业老兵，开源技术爱好者。 2023年4月11日，Nuxt开发团队发布了Nuxt 3.4.0版本，而3.3.0版本发布日期是3月14日，也就是说，不到一个月Nuxt就发布了一个新的版本。频繁的版本更新，会导致很多童鞋询问：是否有必要升级？ 我的答案是：如果需要用到新版本的特性就升级，如果用不到就不要折腾了。 今天我们来看一下Nuxt3.4有哪些新特性。特性一：支持View
文章目录前言一、项目搭建二、插件推荐vite-plugin-pages1.安装2.配置路由规则：基本路由:索引路由:动态路由:vite-plugin-vue-layouts安装：配置：unplugin-vue-componentsUI库表格功能插件 前言目前打算做一个博客的网站主要分为前台和后台，用室友给好的Api去进行项目实践 目的：这次的项目主要是学习Vue3的新语法和一些新的插件 技术选型
目录一、Web概述1.1 Web和JavaWeb的概念1.2 JavaWeb技术栈1.2.1 B/S 架构1.2.2 静态资源1.2.3 动态资源1.2.4 数据库1.2.5 HTTP协议1.2.6 Web服务器二、HTTP超文本传输协议2.1 概述2.2 请求数据格式2.2.1 请求行、头、体2.2.2 get和post区别2.3 响应数据格式2
转载
2024-10-28 16:43:04
38阅读
背景旧的rem适配方案（无论是直接使用rem，还是配合flexiblejs等lib库进行视口缩放）已经疲态尽显，且随着安卓高清屏的不断出现，同时data-dpr仍有进一步增加的可能性，rem显得并不是那么稳固与称心如意。首先截止至发文日期，viewport的兼容性如下：可以看到，viewport的兼容性支持已经变得非常好，因此有机会抛弃一切外接库，直接使用原生的viewport。就像最早使用sub
文章目录先用官方的命令，新建一个nuxt项目改造目录在根目录新建src文件夹，将文件夹都剪切到src中，配置nuxt.config.js配置router.js配置eslint项目迁移安装插件配置别名文件迁移配置插件（我们自己封装的install插件）配置环境，以及不同的环境下打包到不同的目录修改package.josn里面的命令修改nuxt.config.jsnuxtjs中使用高德地图nuxt.
转载
2024-10-11 14:08:16
247阅读
你可以学到什么？说的有点子多了哈，归根结底，授人以鱼不如授人以渔。通过这篇文章，你会学到什么？图表如何自适应折线图区域配置条形图自定义渐变色自定义图表字体、图例样式x、y轴的轴线设置以及一些细节处理如何配置复合型双轴乃至多轴数据还有其他细节部分（是否平滑、字体位置、颜色…等等）最最重要的一点，看完本篇文章，你会形成一个图表思维：需求来了，我该配置什么一目了然。本篇文章可能过长，大家可以选择性查看。
