Vue如何引入ElementUI进行使用

下载ElementUI

• 推荐使用npm的方式安装，它能更好的和webpack打包工具配合使用

npm i element-ui -S

按需引入ElementUI

• 有时候只需要引入ElementUI中的几个组件，全局引入会增加项目的体积，所以按需引入更合适

例如：Message消息提示组件

• 在mian.js中引入并注册组件

import {Message} from 'element-ui'

• 在main.js注册，这里是挂载在Vue原型上的

Vue.prototype.$message = Message;

• 使用

<template>
  <div id="app">
        <el-button type="primary" @click='clickBtn'>主要按钮</el-button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  methods:{
    clickBtn:function(){
      this.$message({
          message:'这是一条提示信息'
        });
    }
  }
}
</script>

• 效果
  

全局引入

• 当我们在项目使用ElementUI组件比较多时，就可以全局引入，方便省事儿
• 在main.js中添加以下代码全局引入

//引入elementui
import ElementUI from 'element-ui'
//样式需要单独引入
import 'element-ui/lib/theme-chalk/index.css'
//挂载
Vue.use(ElementUI)

• 使用
  在app.vue中

<template>
  <div id="app">
        <el-button type="primary" @click='clickBtn'>主要按钮</el-button>
  </div>
</template>

• 相比按需引入，全局引入确实方便很多