vue项目配置rem移动端适配

一、项目介绍

脚手架CLI：@vue/cli
Vue版本：2.6.11
移动UI组件库：Vant#2.10.14
CSS预处理器：sass

二、配置lib-flexible插件

下载插件

npm i -D lib-flexible

导入：在src/main.js中使用

import 'lib-flexible'

三、项目配置

安装postcss-px2rem和postcss-loader插件依赖

npm i -D postcss-px2rem postcss-loader

提示：如果项目使用了第三方的UI组件库（文本以VantUI为例），而又不想让组件库的px转为rem，则需要安装postcss-px2rem-exclude。

npm i -D postcss-px2rem-exclude

在vue.config.js中配置，如果没有此文件，在根目录新建即可。

// vue.config.js
module.exports = {// ...css: {sourceMap: true,loaderOptions: {css: {},postcss: {plugins: [/* rem适配忽略文件目录 */require('postcss-px2rem-exclude')({remUnit: 75,  // 参数 1exclude: /node_modules|vant/i,  // 参数 2}),],},},},// ...
}

vue项目配置rem移动端适配相关推荐

Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
新版Vue项目配置项目名称-publicPath-前端_v1.0.2
文件名称版本号作者 qq 版本新版Vue项目配置项目名称-publicPath-前端 v1.0.2 学生宫布 8416837 webpack 4.28.4 文章目录 js配置 js配置定义全局 ...
在vue中使用flexible---移动端适配
在vue中使用flexible-移动端适配配置 flexible 安装 lib-flexible 在命令行中运行如下安装: npm i lib-flexible --save 引入 lib-flex ...
使用Jenkins持续集成Vue项目配置Sonar任务
title: 使用Jenkins持续集成Vue项目配置Sonar任务 tags: jenkins Vue.js Sonar categories: ci date: 2017-12-05 22:09: ...
vue项目设置服务器地址,vue项目配置后端服务器地址
vue项目配置后端服务器地址内容精选换一换查询负载均衡器状态树.可通过该接口查询负载均衡器关联的监听器.后端云服务器组.后端云服务器.健康检查.转发策略.转发规则的主要信息,了解负载均衡器下资源 ...
Vue项目配置本地访问地址和IP访问地址
Vue项目配置本地访问地址和IP访问地址 1.在config/index.js配置: dev: {host: '0.0.0.0', } 2.在build/webpack.dev.config.js更改 ...
SwitchHosts使用和vue项目配置
SwitchHosts使用和vue项目配置 1.解压SwitchHosts到本地电脑上,右键以管理员身份运行exe文件: 2.配置自己需要的域名 3.vue项目中修改配置文件 webpack.dev. ...
vue项目转rem；H5配置rem；px转rem
H5可以配合vant组件库书写项目,和使用rem后vant组件样式变小了解决办法.(引入方式) 以下是配置rem步骤: 1.安装 flexible和 postcss-px2rem(命令行安装) lib ...
vue项目配置eslint(附visio studio code配置)
eslint基础环境搭建全局安装eslint:npm install eslint -g 项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题. ? How woul ...

vue项目配置rem移动端适配

一、项目介绍

二、配置lib-flexible插件

三、项目配置

vue项目配置rem移动端适配相关推荐

最新文章

热门文章