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啦~