px自動轉化爲rem

1、安裝node.js環境

2、node.js安裝完成後使用npm安裝vue腳手架vue-cli和安裝webpack，我這裏用cnpm

cnpm i @vue/cli -g

npm install webpack -g

// 回車後有如下內容須要填寫

Project name (vue-web) // 項目名稱

Project description (this is my first vue project) // 項目描述（能夠自行描述一段話）

Author (liwei) // 項目做者

Vue build (standalone) Install vue-router? (Yes) // 安裝vue路由

Use ESLint to lint your code? (No) // 單元測試

Pick an ESLint preset (none) Set up unit tests (No) // 單元測試

Setup e2e tests with Nightwatch? (No) 

初始化項目的兩種方式

vue create 項目名字

vue init webpack 項目名字

3、安裝模塊化管理工具lib-flexible 和 px2rem-loader

npm i lib-flexible --save

cnpm i px2rem-loader --save

4、使用

一、在main.js中引入lib-flexible

import 'lib-flexible/flexible'

二、在build文件中找到utils.js文件，在cssLoaders對象中加入此段代碼，以下

const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 //remUnit = 設計圖寬度 / 10 } }

同時在generateLoaders方法中添加px2remLoader，以下

 1 function generateLoaders (loader, loaderOptions) {  2     const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]  3 
 4     if (loader) {  5  loaders.push({  6         loader: loader + '-loader',  7  options: Object.assign({}, loaderOptions, {  8  sourceMap: options.sourceMap  9  }) 10  }) 11     }