1. 程式人生 > >vue.js將px轉化為rem

vue.js將px轉化為rem

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.jspx化為rem

1.下載lib-flexible 我使用的是vue-cli+webpack,所以是通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-fl

Vue-cli px化為rem,適配移動端(vue-cli2.x 和 vue-cli3中的使用)

一. Vue-cli2.x中的用法 1.下載lib-flexible 我使用的是vue-cli+webpack,所以是通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexib

Vue:px化為rem,適配移動端vant-UI等框架(px2rem-loader)

轉載:https://www.cnblogs.com/WQLong/p/7798822.html 1.下載lib-flexible 使用的是vue-cli+webpack,通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.

Vue:px化為rem,適配移動端

1.下載lib-flexible我使用的是vue-cli+webpack,所以是通過npm來安裝的npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexibleimport 'lib-flexible/flex

Vue+webpack移動端: px化為rem,適配各種機型

該配置基於node環境,vue-cli+webpack 1.下載lib-flexible npm i lib-flexible --save 2.引入lib-flexible 在main.j

px2rem-loader(Vue:px化為rem,適配移動端)

轉載:https://www.cnblogs.com/WQLong/p/7798822.html 1.下載lib-flexible 使用的是vue-cli+webpack,通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在

60.Vue:px化為rem,適配移動端

1.下載lib-flexible 我使用的是vue-cli+webpack,所以是通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/fle

vue打包的時候自動pxrem的操作方法

px2rem-loader 需要與 flexible 配合使用,不然px2rem僅僅只是轉成rem卻不會設定rem的資訊 安裝 flexible npm i lib-flexible -S 然後在main.js中引入 import ‘lib-flexible/flexible

移動端自動px化成rem

$browser-default-font-size: 37.5px !default; //變數的值可以根據自己需求定義 @function pxTorem($px) { //$px為需要轉換

vue+webpack把px化成rem的實戰例子

第一,首先需要本地安裝node環境和配置。 第二,npm全域性安裝vue-cli。 第三,通過vue的腳手架初始化本地專案 vue init webapck  project-name 這裡會自動安裝基礎依賴,先npn run dev一下,是否執行正常! 第四,安裝

sass中轉化為px化為rem的使用

利用sass加實時監聽編譯CSS。 可自動將px轉換為rem SASS函式:(使用時直接呼叫函式)例如:@function torem($px){//$px為需要轉換的字號 @return $p

vue-cli + lib-flexible + px2rem實現px自動化為rem

原文地址:http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 安裝 lib-flexible

REM自適應JSpx自動化為rem

前文介紹了rem,在這裡介紹兩種實際使用rem的例子; flexible.js可伸縮佈局使用 兩種方式的優劣: 1、第一種方式使用上更為簡單,第二種需要把樣式檔案從scss 轉為css檔案比較麻煩; 2、第一種只能px轉為rem,第二種在這一功能上,

REM佈局,自適應移動端JS分享(px自動化為rem)

!new function(){var a=this;a.width=750,a.fontSize=100,a.widthProportion=function(){var b=(document.body&&document.body.clientWidth

如何在vscode裡pxrem,而且還得爽!

自從新版移動端IM介面改用rem適配,效果實在太棒了。所以,接下來的主要工作會將一些核心頁面,也從px向rem轉移。 然,一直用慣了VSCODE,再加上設計稿等諸多原因,如果真想一下子從rem上編碼著實還是很困難。因此,一般而言,都是先訂一個基準大小,最後根據這個大小進行轉

arrayToJson陣列化為json格式的js程式碼

//去除空格 function trim(str) {   return str.replace(/\s|\xA0/g,""); } /** *js陣列轉json * */ function arrayToJson(o) {  var r = [];  if (o=

MySQL化為mysqli

har exit etc 語句 mit mman ray 大神 eal <?php/** * Created by PhpStorm. * User: 大神 * Date: 2017/7/24 * Time: 11:29 */header(‘content-type

Cannot read property 'component' of undefined 即vue-router 0.x化為2.x

path 解決 red out json enc pos 配置 routes 原文鏈接:http://blog.csdn.net/m0_37754657/article/details/71269988 由於vue版本為1.0,沒有一些vue-router指令;因而需要vu

memo化為JPG輸出,使用Memo1.PaintTo(Bitmap.Canvas)

ali send sig .text ctr ace rap reat bit unit unit1; interface uses Windows, Messages, SysUtils, Graphics, Controls, Forms, StdCtrls,

在window下搭建Vue.Js開發環境()

圖片 需要 int alt first .html ron 接下來 post nodejs官網http://nodejs.cn/下載安裝包,無特殊要求可本地傻瓜式安裝,這裏選擇2017-5-2發布的 v6.10.3 cmd命令行: node -v //顯示