vue.js将px转化为rem
2023-09-27 14:28:57 时间
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标签,设置设备宽度以及缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4.安装px2rem-loader
npm install px2rem-loader
5.配置px2rem-loader
这里是重要的一步~~
在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
同时,在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
6.重启,一切ok~
当配置完之后,只需要重启下服务,就自动转化为rem了
npm run dev
推荐链接:
作者:xinhui9056
链接:https://www.jianshu.com/p/0d239b086035
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
相关文章
- vue.js--基础 数据的双向绑定
- vue - config(index.js)
- 技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)
- 【Vue/html】如何解决csdn下载网页后打开自动跳转登陆的问题(已解决)
- Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间,Vue.js Nuxt.js 通用公众号页面解决方案(超级详细教程)
- Vue - 点击导航栏当前标签后变色功能(导航栏当前hover样式)
- vue 记一次编译没反应、无进度、没有任何报错的提示,但后台却TM一直消耗内存的BUG:
- (25)打鸡儿教你Vue.js
- (12)打鸡儿教你Vue.js
- Vue.js路由管理器 Vue Router
- 深入解析Vue.js中v-bind v-model的使用和区别
- Vue之axios基础使用
- vue文件高亮
- vue页面传参和接参
- 如何理解vue.js组件的作用域是独立的
- vue从入门到进阶:简介(一)
- vue.js不仅是一种模式,也是一种工程组织方式
- Vue常用项目优化策略
- vue.js click点击事件获取当前元素对象及获取自定义属性
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
- vue.js 获取标签属性值
- vue-cli脚手架build目录中的webpack.base.conf.js配置文件
- vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }
- Vue学习第25天——Vuex中的4个map方法的基本用法及案例练习
- vue.js 样式绑定 font-size 问题
- Vue结合Element-UI 实现双击单元格编辑
- 【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)
- 我们为什么以及是如何从 Angular.js 迁移到 Vue.js?
- vue 路由、嵌套路由、动态路由