使用vue脚手架搭建项目并将px自动转化为rem

一、安装node.js环境

二、node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack，我这里用cnpm

cnpm i @vue/cli -g  //全局安装vue脚手架

npm install webpack -g  //全局安装webpack

初始化项目的两种方式

vue create 项目名字  //cli-vue 3.0项目

vue init webpack 项目名字  //cli-vue 2.0项目

 

// 回车后有以下内容需要填写

 

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)

 

三、安装模块化管理工具lib-flexible 和 px2rem-loader

npm i lib-flexible --save

cnpm i px2rem-loader --save

四、使用

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

import 'lib-flexible/flexible'

2、在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，如下

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
        })
      })
    }