Vue3.0+前端项目rem适配

最新推荐文章于 2024-04-27 03:17:07 发布
最新推荐文章于 2024-04-27 03:17:07 发布
阅读量413 收藏 3
点赞数
分类专栏： # Vue 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sayUonly/article/details/105408227
版权
本文介绍了在Vue3.0项目中使用rem进行适配的方法，包括需要的工具、配置步骤以及注意事项。重点讲解了在配置文件中的设置，并强调所有针对配置的修改需重启项目以生效，此方案适用于Vue3.0框架。
摘要由CSDN通过智能技术生成

准备的工具

首先需要准备两个vue插件，amfe-flexible和postcss-pxtorem。

引入方式如下：

npm i amfe-flexible -S
npm i postcss-pxtorem -D

配置工具

在main.js文件引入amfe-flexible：

import 'amfe-flexible'

在package.json进行如下配置：

{
   
	"postcss": {
   
		"plugins": {
   
			<
最低0.47元/天 解锁文章
acgCode
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 系列 -- vue 3.0 新特性
梅花寺
10-28 1339
Vue3.0的设计目标可以概括为体积更小、速度更快、加强TypeScript支持、加强API设计一致性、提高自身可维护性、开放更多底层功能。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Vue3.0新特性全面解读
06-08
本课程将会带领大家熟悉vue3.0新特性，并学会使用组合式api进行项目代码编写，以及了解这里面的一些注意点与思想方法。可能有的同学会疑惑：是不是在vue3.0版本下，2.x的代码没法运行了 其实在vue3.0下，2.x的代码依旧可以运行，你可以选择将之前的代码改造为3.0的组合式api，也可以让他们共存，他们并不是互斥的，3.0提供了一些新的api特性供大家使用，本套课程就是讲解新特性的使用方法与注意点
Vue3进阶（贰）：Vue3 新特性_vue3 context
最新发布
2401_84436058的博客
04-27 767
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。是一个方法，里面需要包含一个回调函数，当访问计算属性返回结果时，会自动获取回调函数的值。函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在。发生变化就会触发监听器的回调函数，即第二个参数，第二个参数可以执行监听时候的回调。暂时还未直接支持创建。
vue3.0有哪些新特性
u014212540的博客
04-20 4268
Vue3 新特性
Vue-cli3.X、Vue-cli4.X项目中使用px2rem
发育中的前端
03-19 3852
文章目录第一步：安装postcss-px2rem第二步：在 vue.config.js 中添加配置第三步：添加 rem.js文件第四步：引入rem.js文件第五步：重启服务 第一步：安装postcss-px2rem npm add postcss-px2rem 第二步：在 vue.config.js 中添加配置 const px2rem = require('postcss-px2rem') const postcss = px2rem({ remUnit: 32 //基准大小 baseSiz
Vue3.0的新特性（7）Teleport
weixin_43365995的博客
03-09 1327
Teleport翻译过来就是传送、远距离传送的意思；顾名思义，它可以将插槽中的元素或者组件传送到页面的其他位置： 在React中可以通过createPortal函数来创建需要传送的节点；本来尤大大想起名叫Portal，但是H5原生的Portal标签也在计划中，虽然有一些安全问题，但是为了避免重名，因此改成Teleport。 Teleport一个常见的使用场景，就是在一些嵌套比较深的组件来转移模态框的位置。虽然在逻辑上模态框是属于该组件的，但是在样式和DOM结构上，嵌套层级后较深后不利于进行维护（z-inde
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
Vue3.0+Vite+TypeScript后台管理系统.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
前端项目-零基础入门Vue3.0+TypeScript
01-06
在本文中，我们将深入探讨"前端项目-零基础入门Vue3.0+TypeScript"这一主题，这是一项针对初学者的教程，旨在帮助你掌握基于Vue3.0和TypeScript的前端开发技能。 Vue3.0是Vue.js框架的最新版本，它带来了许多性能...
VUE3.0+Antdv+Asp.net webapi学生信息管理系统
08-30
VUE3.0+Antdv+Asp.net webapi开发的学生信息管理系统，主要包括学生管理，班级管理，成绩管理，课程管理，以及个人信息，用户管理，角色管理，菜单管理等组成部分，SQL Server 2012数据库，具体详细内容可参考本人的...
如何在vue项目中使用rem布局
SH744的博客
11-08 9602
在我们开发移动端项目中，实现手机页面布局，需要使用rem布局，那么该如何使用呢？本文就详细的讲解了在vue项目中使用rem布局的整个过程，可以仔细阅读哦！（1）使用lib-flexbile（2）使用postcss-pxtorem两种方法选其一使用哦，避免冲突！!!
YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志
YDOOK
02-13 1071
YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志 © YDOOK JYLin 1. 将新 icon 文件拖入文件目录： ./public: 2. 新建或者在已有的 vue.config.js 文件根位置中输入： module.exports = { pwa: { iconPaths: { favicon32: 'ydook.ico', favicon16: 'ydook.ico',
vue3的新特性
webtext的博客
02-28 1万+
vue3的新特性一、setup二、ref三、reactive三、计算属性computed三、计算属性watch四、watchEffect函数 一、setup 1、是vue3.0的中的一个新增配置项,值为一个函数。 2、setup是所有composition API(组合式api)展示的舞台。 3、setup函数的两种返回值： 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！） 若返回一个渲染函数：则可以自定义渲染内容。（了解） (不常用) 注意点: 1、尽量不要和vue2.x版本
vue中如何使用rem
weixin_44283589的博客
08-16 1977
方法一、在Vue中实现跨浏览器的rem适配，可以借助postcss-pxtorem插件和lib-flexible库来实现。
vue3新特性概览
知其白，守其黑；和其光，同其尘。
10-08 1838
Vue自3.0 beta发布以来，随着相关技术支持度增强，越来越多的企业开始 Vue3.0新特性 一、节点打Tag 静态节点 <span>value</span> value 动态节点 <span>{{value}}</span> patchFlag <span>{{value}}</span> patchFlag vue3.0底层，会自动识别某个节点是否是动态的，如果是动态的会自动生成标识（不同的动态会有不同的标识对应，如内容文本
为什么舍弃Iframe探究新的微前端技术？
hyupeng1006的博客
07-02 2102
为什么不用 iframe，这几乎是所有微前端方案第一个会被 challenge 的问题。但是大部分微前端方案又不约而同放弃了 iframe 方案，自然是有原因的，并不是为了 "炫技" 或者刻意追求 "特立独行"。 如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。 iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。 其实
【Vue】屏幕适配（rem响应式布局）
热门推荐
Qxn530的博客
09-01 2万+
使用postcss-px2rem----修改单位、flexible.js+vscode的插件cssrem----修改字体大小、并且配合媒体查询完成不同屏幕的适配
如何设置使vue3.0+vite+ts 项目中允许使用js和vue2
06-01
在Vue3.0 + Vite + TypeScript 项目中使用 Vue2 和 JavaScript 是可以的，只需进行以下设置： 1. 在 `tsconfig.json` 中添加以下配置： ``` { "compilerOptions": { "allowJs": true, "target": "esnext", ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值