在vue项目中引入ElementUI

在vue项目中引入ElementUI

1. 安装ElementUI：cnpm i element-ui -S

完整引入

1. 在 main.js 中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2. 在组件中使用ElementUI

<template>
    <div>
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
          <p>Try Element</p>
        </el-dialog>
    </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      visible: false
    }
  }
}
</script>
<style lang="">
</style>

按需引入

1. 安装 依赖

babel-plugin-component：cnpm install babel-plugin-component -D

2. 修改.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"
      }
    ]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

3. 在 main.js 中写入以下内容

import { Button, Dialog } from 'element-ui'
import 'styles/reset.css'
Vue.use(Button)
Vue.use(Dialog)