vue element-ui 基本使用和按需加载的2种方式（推荐安装插件的方式）

element-ui官网：https://element.eleme.cn/#/zh-CN/component/installation

安装

npm install element-ui -S

不太清楚这里为什么是 -S 的朋友可以看看我的这篇文章

npm install -D 和 - S，--save 和 --save--dev 到底是什么意思？

引入（ main.js 中引入 element-ui 和它的样式）

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

简单的示例（点击按钮后弹出提示）

<template>
  <div id="app">
    <el-button @click="show">click me</el-button>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    show() {
      this.$message.success('安装成功')
    }
  }
}
</script>

<style>
</style>

按需加载方法一

如果要问为什么需要按需加载，npm run build 打包一下，就会发现文件大小快 800KB了，gizp 压缩也有 200KB

安装

npm install babel-plugin-component -D

安装完毕会看到多了一个 babel.config.js 文件

我们做如下配置，这里的 component 就是指我们刚刚安装的 babel-plugin-component 插件，

libraryName 和 styleLibraryName 是做配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后在 main.js 中如下面箭头所指的那样修改即可。

另外，这里注意 Message，它不是一个组件，是作为一个方法引入，所以不同于 Button 组件，

需要在全局挂在到 Vue 的 prototype 上，方便在其它组件都能使用它