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

一、安装node.js环境

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

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

npm install webpack -g  //全局安装脚手架2.0

初始化项目的两种方式

vue create 项目名字  //创建3.0项目

vue init webpack 项目名字  //创建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) {  2     const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]  3 
    if (loader) {  5  loaders.push({  6         loader: loader + '-loader',  7  options: Object.assign({}, loaderOptions, {  8  sourceMap: options.sourceMap  9  }) 10  }) 11     }