1、按需引入element-ui
vue腳手架搭建完成之后，可以到element-ui官網進行npm 安裝：
npm i element-ui -S
如果是完整引入可以按照官網一步一步做即可完成；這里是按需引入，借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。
首先，安裝babel-plugin-component：
npm install babel-plugin-component -D
然后，需要將項目里的.babelrc修改為：
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
將這個復制粘貼到你的項目里即可，跟官網修改的有點區別，我去掉了“es2015”，我之前安裝了這個會一直報錯。
接下來，我們只要引入我們需要的組件，比如Button，那么需要在main.js中寫入以下內容：
import { Button，Select } from 'element-ui'
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或寫為 * Vue.use(Button) */
/*Vue.use(Select)*/
本人更喜歡寫成Vue.use(Button)，注意，部分組件需要這樣引入：
import {Message} from 'element-ui'
Vue.prototype.$message = Message;
message組件是用事件來展示效果。
以上就是安裝按需element-ui的過程和細節啦。
2、安裝px2rem
首先，安裝：
npm install px2rem-loader lib-flexible --save
然后在main.js中引入
import 'lib-flexible/flexible.js'
在build中utils.js添加以下代碼：
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit:37.5
}
}
// generate loader string to be used with extract text plugin
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
})
})
}
重啟項目后，就可以看到px變成rem啦~