第一，首先需要本地安裝node環境和配置。
第二，npm全域性安裝vue-cli。
第三，透過vue的腳手架初始化本地專案
vue init webapck project-name
這裡會自動安裝基礎依賴，先npn run dev一下，是否執行正常！
第四，安裝 npm install postcss-px2rem postcss postcss-loader--save
第五，需要在webpack.base.conf.js檔案新增配置
首先
引入這三個模組
const webpack = require（‘webpack’）
const px2rem = require（‘postcss-px2rem’）
const postcss = require（‘postcss’）
其次
在module中新增如下程式碼
plugins： ［
new webpack。LoaderOptionsPlugin（{
// webpack 2。0之後， 此配置不能直接寫在自定義配置項中， 必須寫在此處
vue： {
postcss： ［require（‘postcss-px2rem’）（{ remUnit： 37。5， propWhiteList： ［］ }）］
}，
}）
］
最後
在rules中新增postcss-loader支援
{
test： /\。（css|less|scss）（\？。*）？$/，
loader： ‘style-loader！css-loader！postcss-loader’
}
完整配置程式碼如下：
‘use strict’
const path = require（‘path’）
const utils = require（‘。/utils’）
const config = require（‘。。/config’）
const vueLoaderConfig = require（‘。/vue-loader。conf’）
//這裡是新新增的
const webpack = require（‘webpack’）
const px2rem = require（‘postcss-px2rem’）
const postcss = require（‘postcss’）
function resolve （dir） {
return path。join（__dirname， ‘。。’， dir）
}
module。exports = {
context： path。resolve（__dirname， ‘。。/’），
entry： {
app： ‘。/src/main。js’
}，
output： {
path： config。build。assetsRoot，
filename： ‘［name］。js’，
publicPath： process。env。NODE_ENV === ‘production’
？ config。build。assetsPublicPath
： config。dev。assetsPublicPath
}，
resolve： {
extensions： ［‘。js’， ‘。vue’， ‘。json’］，
alias： {
‘vue$’： ‘vue/dist/vue。esm。js’，
‘@’： resolve（‘src’），
}
}，
module： {
rules： ［
{
test： /\。vue$/，
loader： ‘vue-loader’，
options： vueLoaderConfig
}，
{
test： /\。js$/，
loader： ‘babel-loader’，
include： ［resolve（‘src’）， resolve（‘test’）， resolve（‘node_modules/webpack-dev-server/client’）］
}，
{
test： /\。（png|jpe？g|gif|svg）（\？。*）？$/，
loader： ‘url-loader’，
options： {
limit： 10000，
name： utils。assetsPath（‘img/［name］。［hash：7］。［ext］’）
}
}，
{
test： /\。（mp4|webm|ogg|mp3|wav|flac|aac）（\？。*）？$/，
loader： ‘url-loader’，
options： {
limit： 10000，
name： utils。assetsPath（‘media/［name］。［hash：7］。［ext］’）
}
}，
{
test： /\。（woff2？|eot|ttf|otf）（\？。*）？$/，
loader： ‘url-loader’，
options： {
limit： 10000，
name： utils。assetsPath（‘fonts/［name］。［hash：7］。［ext］’）
}
}，
//這裡是新新增的
{
test： /\。（css|less|scss）（\？。*）？$/，
loader： ‘style-loader！css-loader！postcss-loader’
}
］
}，
//這裡是新新增的
plugins： ［
new webpack。LoaderOptionsPlugin（{
// webpack 2。0之後， 此配置不能直接寫在自定義配置項中， 必須寫在此處
vue： {
//這裡預設remUnit：是75，這裡用37。5，一般設計搞是按ios6設計的。
postcss： ［require（‘postcss-px2rem’）（{ remUnit： 37。5， propWhiteList： ［］ }）］
}，
}）
］，
node： {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it （although only uses it if it‘s native）。
setImmediate： false，
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram： ’empty‘，
fs： ’empty‘，
net： ’empty‘，
tls： ’empty‘，
child_process： ’empty‘
}
}
第六，在index.html的head中引入 lib-flexible檔案，具體程式碼百度，拿來直接用即可。
第七，測試配置是否生效
在HelloWorld。vue元件中修改樣式
h1， h2 {
font-weight： normal；
font-size： 20px；
}
修改完以後在瀏覽器檢視已生效，到此就大工告成。
別忘了點個訂閱哦！！！
