配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引入 lib-flexible 在项目入口文件 main.js 里 引入 lib-flexible 1 2 // main.js import 'lib-flexible' 添加 meta 标签 在项目根目录的 index.html 中添加如下 meta 1 <meta name="viewport" content="width=d…

Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在main.js引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.confi…

vue 实现 rem 布局的 或者 vw 布局的方法 一.实现 rem 布局 移动端 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 方法一.在 index.html 或者 main.js 中添加以下代码: const setHtmlFontSize = () => { let deviceWidth = document…

lib-flexible + px2rem Loader lib-flexible 阿里伸缩布局方案 px2rem-loader:px转rem: 依赖 首先需要安装 vue-cli 脚手架,这里我安装的是 cli3. 项目初始化完成后,在项目目录中安装 lib-flexible 和 px2rem-loader. npm install lib-flexible --save-dev npm i postcss-px2rem --save 接着在项目入口文件 main.js 中引入 lib-fle…

1.按需引入element-ui vue脚手架搭建完成之后,可以到element-ui官网进行npm 安装: npm i element-ui -S 如果是完整引入可以按照官网一步一步做即可完成:这里是按需引入,借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的. 首先,安装babel-plugin-component: npm install babel-plugin-component -D 然后,需要将项目里的.babelrc修改为: {…

最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX,避免被转成rem 可以参考一下这篇文章vue中的适配:px2rem 在webpack.base.conf.js中 vuxLoader中配置以下代码 { name: 'vux-ui' }, { name: 'after…

项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装   npm install   postcss-px2rem postcss --save 第二步  在 webpack.base.conf.js中 引入 const webpack = require('webpack') const px2rem = require('postcss-px2rem') const postcss = require(…

这应该是vue项目在适配移动端时候,最简单的方法之一下面是基本步骤(使用cnpm)1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中 :import ‘lib-flexible/flexible’2.引入px2rem-loader cnpm install --save px2rem-loader 3.将px2rem-loader添加到cssLoaders 在build/util.js中添加如下代码 代码如下 const…

首先下载flexible.js和px2rem npm install px2rem-loader 对webpack进行配置.进入build文件夹对utils.js中的postcssLoader做如下修改 const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap, plugins: function () { return [ require('postcss-px2rem')…

首先,需要卸载项目中的postcss-px2rem. npm uninstall postcss-px2rem --save-dev 其次,安装postcss-px2rem-exclude npm install postcss-px2rem-exclude --save 然后在postcss.js下配置 "postcss-px2rem-exclude": { remUnit: 75, exclude: /node_modules/ } 最后记得把utils.js下的postcss-p…