vue/cli 4.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适

最新推荐文章于 2025-04-02 18:44:43 发布
最新推荐文章于 2025-04-02 18:44:43 发布
阅读量1.9k 收藏 7
点赞数
文章标签： web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43058760/article/details/103961668
版权
本文介绍了如何使用Vue CLI 4.0配置移动端自适应，包括在main.js中引入lib-flexible，添加meta标签，以及利用postcss-px2rem实现px到rem的转换，以适应不同屏幕尺寸的移动设备。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

基于vue-cli配置移动端自适应

npm install --save amfe-flexible       // 安装命令

安装完 package.json会添加这个依赖
###引入 lib-flexible
####在项目入口文件 main.js 里 引入 lib-flexible

import 'amfe-flexible'

运行后每个尺寸都对应font-size
###添加 meta 标签
###在项目根目录的 index.html 中添加如下 meta

 <meta name="viewport" content<
最低0.47元/天 解锁文章
qq_43058760
关注
vue 使用amfe-flexible + postcss-pxtorem，适配移动端并px自动转rem
qq_29236119的博客
03-31 648
一、vue-cli初始化项目后实现适配： 1、首先安装postcss-pxtorem，输入命令： cnpm install postcss-pxtorem --D 2、安装amfe-flexible，输入命令： cnpm install amfe-flexible --D 3、安装完成之后在全局注册一下，main.js中引入： import 'amfe-flexible'; 4、修改配置文件，这里需要注意的是vue-cli低版本和高版本的区别 ①、低版本： 首先在跟目录新建一个.postcssrc.j
Vue-cli3.0布局实战篇---移动端适配
洋滔的博客
08-24 632
Vue-cli3.0布局实战篇---移动端适配 前言： 本文所采用技术栈：vue3+vue-router4+vuex4+vant3，今天我们来一起看下，在使用脚手架3.0开发项目的时候，怎么去解决移动端适配问题，这样做的好处是一次适配，后续的开发过程都可以解决因为元素样式大小带来的布局问题。 没有做适配的时候，px就是像素，不会根据设备的大小去变化，就像下图这样： 安装amfe-flexible 打开项目所在文件夹，输入命令：npm i -S amfe-flexible ...
vue-cli4 通过 amfe-flexible+postcss-pxtorem 实现rem自适应布局
u013505589的博客
10-04 675
网上找了很多cli4 rem适配的方案，有lib-flexible+postcss-pxtorem和lib-flexible+postcss-px2rem的方案实现，但是好像lib-flexible已经弃用，改用amfe-flexible了，而且我也搞不清pstcss-px2rem和postcss-pxtorem的区别(我太菜了，求大佬们在评论区解答)。既然有一种方法可以用，就写下来当个笔记也是一个学习的过程。 1. 安装amfe-flexible npm install --save amfe-f.
amfe-flexible&postcss-pxtorem在react项目中的使用
最新发布
qq_43570260的博客
04-02 1716
PostCSS 是一个用 JavaScript 编写的工具，用于将 CSS 转换为另一种 CSS，常结合插件一起使用，像 autoprefixer （自动添加浏览器前缀）、 cssnano （压缩 CSS 代码）等。通过创建一个 craco.config.js 文件，在其中定义需要覆盖的配置项，就可以在不破坏 CRA 封装性的前提下修改 PostCSS 配置。- 缺点 ：这是一个不可逆的操作，一旦执行 eject ，就无法再享受 CRA 自动更新默认配置的便利，后续项目维护和升级的复杂度会增加。
Vue-cli4.X项目中使用postcss-px2rem
weixin_45356397的博客
06-18 646
Vue-cli3.X、Vue-cli4.X项目中使用px2rem
vuecli 4 配置postcss
m0_56223743的博客
06-02 1300
这里写自定义目录标题vuecli 4 配置postcss vuecli 4 配置postcss npm i amfe-flexible -S npm i postcss-pxtorem@5.1.1 -D 创建vue.config.js module.exports = { css: { loaderOptions: { postcss: { plugins: [ require(“autoprefixer”)({ // 配置使用 autoprefixer overrideBrowserslist: [“l
vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适
weixin_30512089的博客
12-29 569
安装vue-cli3 　　 npminstall -g @vue/cli 创建项目 vue-cli-test 　　 　　 脚手架-项目-成功-运行项目 　　 　　 基于vue-cli配置移动端自适应 转自：http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%B...
vue-cli3结合vant与postcss-px2rem的移动端开发实战
"本文档详述了如何使用vue-cli3、 vant UI组件库以及postcss-px2rem来构建和适配移动端页面的过程。" 在移动端应用开发中，选择合适的框架和技术栈至关重要。本示例选择了`vue-cli3`作为项目脚手架，它提供了快速...
vue移动端用什么数据可视化插件_vue-cli+v-charts实现移动端可视化图表
weixin_31775717的博客
12-29 1997
v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具，在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。v-charts的中文社区文档(h...
vuecli4+vant移动端响应式项目踩坑记录
Beauty_zhang666的博客
05-17 5892
文章目录关键词参考链接一. 使用vue/cli4二. 使用vant三. 加入响应式布局1. rem适配插件2. PostCSS配置四. 图标库：封装svg图标组件1. 建立如下目录结构：2. components/SvgIcon.vue3. icon/index.js4. 配置vue.config.js5. svg图标使用五.axios+api封装目录结构(示例)http.js封装api/index.jsapi/user.jsapi注册到全局(main.js文件)api接口调用示例App.vue（断网代码示
在vue-cli4中移动端的自适应：amfe-flexible和px2rem-loader
wilL-my的博客
04-29 352
1、首先在项目中安装以下依赖 npm install px2rem-loader --save npm install amfe-flexible --save npm install postcss-px2rem --save 2、在main.js中添加： import 'amfe-flexible' 3、在vue.config.js中进行配置 module.exports = { css: { loaderOptions: { post
vue-cli4.x使用rem
weixin_46939955的博客
11-17 245
1.安装两个插件 npm i amfe-flexible npm i postcss-px2rem 2.main.js引入 import rem from 'amfe-flexible' Vue.use(rem) 3.package.json 中添加如下代码 "postcss":{ "plugins":{ "autoprefixer":{}, "postcss-px2rem":{ "remUnit":75 } } } over.
vue-cli脚手架中使用flexible淘宝适配方案
coder丶东的博客
07-24 1807
一、npm 包安装 lib-flexible 淘宝适配方案 px2rem px自动转rem npm install lib-flexible --save npm install px2rem-loader ####**二、在main.js中引入lib-flexible** import 'lib-flexible/flexible.js' ####**三、配置...
vue-cli4关于px-＞rem插件配置
weixin_45915243的博客
01-14 358
一，安装模块 npm install amfe-flexible postcss-px2rem -S //cnpm install amfe-flexible postcss-px2rem -S 二，配置文件 1.在main.js下配置一下代码 import "amfe-flexible"; 2.在项目根目录创建vue.config.js文件，并完成以下配置： module.exports = { css: { loaderOptions: {
vue3-vite使用amfe-flexible
路虽远，行则必至！
07-24 966
在根目录，和package.json同级，创建一个名为postcss.config.js的文件。在index.html头部加入手机端自适应meta。
Vue-cli 将px转化为rem
王龙鑫的博客
11-22 532
vue-cli2版本配置 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标签，设置设备宽度以及缩放比例 &l...
vue项目中 使用 amfe-flexible（或lib-flexible） && postcss-pxtorem 自动将px转rem
arkwok的专栏
11-27 5664
vue项目中 使用 amfe-flexible（或lib-flexible） && postcss-pxtorem 自动将px转rem 1 amfe-flexible安装：npm i -S amfe-flexible 用于自动设置根节点字体大小 安装lib-flexible：npm install lib-flexible -S lib-flexible已停止维护，可使用amfe...
让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法
xm2by的博客
08-15 7028
让vue-cli搭建的脚手架可以处理vue文件中postcss语法
vue实现移动端适配方案 （amfe-flexible和postcss-pxtorem结合）建议收藏
热门推荐
been_ss的博客
10-13 2万+
1.amfe-flexible amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。 2.postcss-pxtorem postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。 3.移动端适配方案 vue实现移动端适配步骤如下： 先安装amfe-flexible和postcss-pxtorem npm install amfe-flexible --save npm install postcss-pxtorem --sa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值