vue-cli3 适配移动端rem

最新推荐文章于 2024-05-22 08:41:40 发布
置顶 最新推荐文章于 2024-05-22 08:41:40 发布
阅读量6.1k 收藏 25
点赞数 2
分类专栏： 前端 vue 文章标签： vue-cli vue.config.js postcss-px2rem postcss-px2rem-exclude 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maggie_live/article/details/90297825
版权
  1. 使用vue-cli

npm install -g @vue/cli // 使用vue-cli3版本

  1. 自定义功能配置
  • TypeScript
  • TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • Unit Testing
  • E2E Testing
  1. 创建项目

vue create demo

  1. 选择Manually select features // 自定义功能配置
    在这里插入图片描述
  2. 选择自定义功能配置
    Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试
    在这里插入图片描述
  3. 选择css预处理器，具体看选择技术栈
    在这里插入图片描述
  4. 选择ESLint的代码规范
    在这里插入图片描述
  5. 进行代码检测，选择在保存时进行检测
    在这里插入图片描述
  6. 选择单元测试解决方案，此处选择jest
    在这里插入图片描述
  7. 选择Babel、PostCSS、ESLint等配置文件存放位置
    推荐单独保存在各自的配置文件
最低0.47元/天 解锁文章
maggie_live
关注
  • 2
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解基于vue-cli配置移动端自适应
08-28
详解基于vue-cli配置移动端自适应 本文主要介绍了基于vue-cli配置移动端自适应的方法，主要涉及到三个方面：lib-flexible库的安装和使用、px到rem的转换、vue-cli配置的修改。 首先，在项目中安装lib-flexible库，...
vue3移动端适配的解决方案
weianl的博客
12-03 1万+
最近在给公司内部做一个BBS论坛，需要在电脑和手机上都可以操作，所以需要做移动端的适配，下面是我在开发后觉得不错的一些解决方案，分享给大家。
Vue在移动端基于rem适配实现思路及过程
qq_49896911的博客
06-21 805
vue，vant，移动端适配
vue3项目rem自适应大小如何实现
最新发布
油墨香^-^的博客
05-22 162
像手机淘宝网，就是在根标签设置font-size，然后使用rem去设置尺寸大小，它们可能有更精细化的优化处理，这里就只讲普通的实现方法。所以，很多人寻求各种解决方案，我们现在的很多移动端框架都是支持了的，包括小程序，很多都采用了rpx的方式，这里不去深究它们的实现方案。导致我们的布局在某些小屏或者大屏上与UI的表现并不一致。随着现在互联网设备的日益更新，各大尺寸的屏幕参差不穷。
vue3移动端适配
2302_79777012的博客
01-10 500
我们在vite.config.ts里面配置一下代码写在plugins同级。我们先配置main.ts。
vue-cli3.0移动端项目搭建
weixin_44797199的博客
10-21 2182
1. 引入lib-flexible . 安装lib-flexible： npm i lib-flexible --save 在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible' 2. 使用postcss-px2rem自动将css中的px转换成rem 安装postcss-px2rem ： npm install postcss-px2rem -...
手把手教你vue-cli3搭建项目实现移动端自适应----- flexible和 postcss-px2rem
面对疾风吧
08-17 8654
1、安装 flexible和 postcss-px2rem 按照我说的一步一步去做，保证可以完成哦！有图有代码，简单明了可复制！ 如果能帮助到你，还望能给个赞+关注，鼓励一下！谢谢！ npm i lib-flexible postcss-px2rem --save flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-sc.........
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
今天，我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 import Vue from 'vue' ...
基于vue-cli配置lib-flexible + rem实现移动端自适应
08-28
基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应 Vue-CLI是 Vue.js 的标准开发工具，提供了许多功能强大且灵活的配置选项。 Lib-Flexible是一个非常流行的移动端自适应解决方案，通过使用Rem单位来实现响应式...
详解Vue-cli webpack移动端自动化构建rem问题
08-27
在移动端开发中，适配不同屏幕尺寸是个常见挑战。`Vue-cli` 和 `webpack` 提供了一种自动化构建解决方案，可以将设计中的像素单位（px）转换为相对单位（rem），使得页面在不同分辨率设备上能保持良好的显示效果。...
vite安装postcss-pxtorem+amfe-flexible进行移动端自适应
qq_29715077的博客
12-11 1884
一、安装依赖走起 npm install postcss-pxtorem --save-dev npm install amfe-flexible --save-dev 安装成功 ，我的相关版本是 "amfe-flexible": "^2.2.1", "postcss-pxtorem": "^6.0.0", 二、配置 在mian.js中 引入amfe-flexible import 'amfe-flexible' 在vite.config.js中配置postcss-pxtorem ..
vue cli3适配所有端方案的实现
11-20
应用场景 页面需要在pc端和移动端同时兼容，以前我的方案都是使用媒体查询来判断当前设备大小，然后写两套或者三套css代码来兼容他们，能达到目的，并且效果不错，但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本，稍作修改，基本可以满足我的需求。 postcss-px2rem yarn add postcss-px2rem postcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件 // css相关配置 css: { // 启用 CSS modules modules: false,
Vue移动端使用rem适配（rem移动端适配，vue移动端适配）
weixin_65793170的博客
12-08 1654
​1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm install postcss --save-dev npm install postcss-pxtorem@5.1.1 --save-dev //还需要安装 amfe-flexible，安装引入后单位转化才可以使用 npm i amfe-flexible --save 要安装这三个插件px才能自动转化为rem ，这些工具帮助我们自动
vue项目 移动端适配——rem
weixin_51382988的博客
02-09 4172
vue项目，使用rem解决移动端适配问题，插件。
【学习笔记07】vue3移动端的适配
yizhiyang
12-23 2433
vue3移动端的适配
Vue-cli 将px转化为rem，适配移动端（vue-cli2.x 和 vue-cli3中的使用）
热门推荐
ShiYadong的专栏
01-31 1万+
一. Vue-cli2.x中的用法 1.下载lib-flexible 我使用的是vue-cli+webpack，所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 通过meta标签，设置设...
vue-cli@3搭建移动端适配
19年8月小结
08-06 1557
在cli@3里使用安装插件可以适配各个移动端的适配，安装px2rem-loader和lib-flexible 在main.js里引入import ‘lib-flexible/flexible.js’; 在nodemodels里面的vue里面的cli-service里面的lib下的config文件夹下的css.js里 rule里面补充代码里的配置 rule .use('css...
vue cli3 创建vw移动端适配项目
黄治文的博客
05-28 3217
一直用rem做移动端的适配，其原理就是根据html的font-size为100单位rem的大小，flexible的解决方案大致是根据设计稿的大小动态改变不同屏幕下html的font-size的值，得到一个设计稿和rem的转化比例。具体实现可以看一下大漠老师的《使用Flexible实现手淘H5页面的终端适配》这篇文章 之后在vw的兼容性得到解决，大漠老师又出了新的移动端适配方案并和vue cli2...
vue-cli3移动端px转rem适配方案
weixin_33932129的博客
03-07 2223
在vue3-CLI搭建环境中对于移动端适配中可以采用postcss-pxtorem和lib-flexible这两个插件配合使用 1.在node安装插件 cnpm install lib-flexible postcss-pxtorem --save 2.在main.js 文件中引入 import 'lib-flexible/flexible.js',在package.json文件中引入 "po...
vue-cli脚手架搭建的vue项目中的app.vue无法填充整个屏幕
12-24
可能的原因是由于app.vue中的组件、样式或者布局设置导致无法填充整个屏幕。请检查以下几个方面来解决这个问题。 第一，检查app.vue中的组件布局。确保布局中的各个组件没有设置固定的高度或宽度，而是使用相对单位如百分比来设置组件的大小，以适配不同屏幕尺寸。 第二，检查app.vue中的样式设置。可能是样式表中设置了固定的高度或宽度，导致无法填充整个屏幕。需要将样式设置改为使用相对单位来适配不同的屏幕尺寸。 第三，检查是否使用了移动端适配方案。如果使用了rem或者flexible等移动端适配方案，需要确保设置正确，以确保app.vue能够正确填充整个屏幕。 第四，检查vue-cli生成的默认配置。有时候可能是vue-cli生成的默认配置导致了app.vue无法填充整个屏幕，需要根据具体情况进行调整或者修改配置文件。 总之，需要综合以上几个方面来排查问题，并根据具体情况进行调整，以确保app.vue能够正确填充整个屏幕。希望以上建议对您有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值