vue安装element-ui和px2rem的细节

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