首页 > 其他分享 >在 Vue Cli 3 + 中使用 px2rem-loader

在 Vue Cli 3 + 中使用 px2rem-loader

时间:2023-06-29 16:33:54浏览次数:27  
标签:Vue amfe px2rem module loader flexible config

安装 amfe-flexible

npm install amfe-flexible -S

安装 px2rem-loader

npm install px2rem-loader -D

在mian.js中引入

import 'amfe-flexible'

在vue.config.js中配置

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('scss')
            .test(/\.scss$/)
            .oneOf('vue')
            .use('px2rem-loader')
            .loader('px2rem-loader')
            .before('postcss-loader') // this makes it work.
            .options({ remUnit: 75, remPrecision: 8 })
            .end()
    }
}

重启项目

标签:Vue,amfe,px2rem,module,loader,flexible,config
From: https://blog.51cto.com/u_16174123/6583542

相关文章

  • 带有 Spring Boot 后端的 Vue.js 前端
    概述在开始本教程中,先推荐1个SpringBoot+Vue前后端分离Java项目,本项目是一个大型互联网金融项目,采用SpringBoot,Dubbo微服务的架构,包括多个独立的微服务,micr-common个公共服务,micr-web服务,micr-database数据库服务,micr-pay支付服务,micr-task定时任务。前端技术栈:Vue,Java......
  • 前端面试真题-vue(一)
    1.说说对vue的理解 (1)vue.js是一种用于创建用户界面的渐进式的javascript框架 (2)也是用于创建单页面应用的web应用框架。 (3)vue的核心库只关心视图层,使得数据和视图的双向绑定变得快捷 (4)由于vue的核心库只关心视图层,所以不仅可以与其他库和现有项目整合,也可以添加更多的vue......
  • vue高德地图实现播放暂停功能,支持快进快退,播放倍数设置
    高德地图实现具体功能如图具体实现思路如下:<divclass="playAnimation"><tablewidth="100%"style=""border="0"><trclass="info_play"><td>{{currentMi......
  • 光脚丫思考Vue3与实战:第05章 计算属性和侦听器 第03节 计算属性的其他玩法
    下面是本文的屏幕录像的在线视频:温馨提示:1、视频下载:线上视频被压缩处理,可以下载高清版本:链接:https://pan.baidu.com/s/1h600_BRR9O2Lr87zVQNgEw 提取码:dgpu 2、示例代码:https://pan.baidu.com/s/1rCqbY_j35FcRWRZbuOfHqg 提取码:79kh 下图是文章大纲:一、概述本篇文章介绍了V......
  • Vue.js项目在IE11白屏报错
    一、概述项目使用vue/cli4脚手架搭建的前端项目,vue版本为2.6.10。但开发环境的IE11打开显示白屏,F12打开显示:查明报错原因是:I.E.不支持ES6语法。二、解决方案(一)解决方案11、安装如下的依赖包:npminstall--save-devbabel-polyfill或npminstall--save@babel-polyfill2、mai......
  • 教你如何用Vue3搭配Spring Framework
    摘要:在本文中,我们将介绍如何使用Vue3和SpringFramework进行开发,并创建一个简单的TodoList应用程序。本文分享自华为云社区《Vue3搭配SpringFramework开发【Vue3应用程序实战】》,作者:黎燃。一、介绍Vue3和SpringFramework都是现代Web应用程序开发中最流行的框架之一。Vue3是一个......
  • 使用vue cli 5.0 在vscode中运行vue命令报错
       1、运行 vue--version  报错  2、在cmd命令行执行 vue--version 正常  3、在终端中输入  get-ExecutionPolicy,查看当前权限  4、执行 set-executionpolicyremotesigned  命令设置为可用模式,但是报错  5、使用管理员打开powe......
  • 图书商城项目练习①管理后台Vue2/ElementUI
    本系列文章是为学习Vue的项目练习笔记,尽量详细记录一下一个完整项目的开发过程。面向初学者,本人也是初学者,搬砖技术还不成熟。项目在技术上前端为主,包含一些后端代码,从基础的数据库(Sqlite)、到后端服务Node.js(Express),再到Web端的Vue,包含服务端、管理后台、商城网站、小程序/App,分......
  • vue列表页返回数组错误Invalid prop: type check failed for prop "data". Expected A
    一个vue列表页接收后端数组时是这样写的:this.list=response.data返回如下错误:Invalidprop:typecheckfailedforprop"data".ExpectedArray,gotObject意思是希望返回一个数组但实际得到一个对象Object,网上大多是初始化userList=[]或userList=null解决的,但......
  • 前端Vue自定义简单通用省市区选择器picker地区选择器picker 收获地址界面模版
    前端Vue自定义简单通用省市区选择器picker地区选择器picker收获地址界面模版,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13266效果图如下:代码实现如下:cc-selectDity使用方法<!--省市区选择show:是否显示 @sureSelectArea:确认事件......