使用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     }