element-ui如何按需引入以及引入方法的两种方式

按需引入

在使用element-ui时绝大多数情况，我们都是按需引入，我来总结一下如何按需引入

tips:

当我们在已有的项目中安装时，需要注意安装完毕后会改变app.vue页面，大家记得提前复制一份，最后再把原来的粘贴一下就行，否则会报错误。

第一步：

vue add element

第二步：

这时会出现这个提醒

他是意思是：当前存储库中有未提交的更改，建议提交 或者先藏起来。不用管它，直接 y

这时会下载element

下载完成之后会提示你是完全引入还是按需引入。完全引入的话会使我们的包变大，因为这里边很多组件在我们实际项目中都用不到。所以我们选择按需引入，如下图

第三步：

第四步：选择要加载的区域设置

这样我们就按需引用完毕了。这时我们会发现我们的src文件夹中多了一个plugins文件夹，文件夹中有一个element.js文件。这时先不要急着运行，安装完element，我们的app.vue会发生改变，先把不需要的删除了(如果我们的项目在正在运行的状态，安装好需要重新启动)

第五步：运行：npm run serve

这时我们就可以得到一个基本的element-ui组件button了。

当我们想再引入别的组件时（在element.js文件中），比如input：这里边有一个小技巧，就是判断我们引入的时候，输入的是不是有问题，当我们开始输入的时候，如果下边有补充，说明没有问题，如果没有，你就要想想了

正确引用需要使用Vue.use来进行全局注册

import Vue from 'vue'
import { Button,Input} from 'element-ui'


Vue.use(Button)
Vue.use(Input)

这时，我们就可以看到效果：

引入element-ui方法的方式

第一种：全局引入

比如在Message 消息提示中需要使用一个message方法，我们就需要引入，引入放入与组件差不多

import Vue from 'vue'
import { Button,Input,Message} from 'element-ui'

Vue.prototype.$message = Message;
Vue.use(Button)
Vue.use(Input)

我们在点击按钮时出发一个open事件，在methods写方法就可以直接使用

methods:{
    open(){
      this.$message('这是一条消息提示');
    }
  }

效果：

第二种：局部引入

import{ Message} from "element-ui"
export default {
  name: 'app',
  data() {
    return {
      input: ""
    }
  },
  methods:{
    open(){
      Message('这是一条消息提示');
    }
  }
}