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     }