Element-Plus组件库使用

element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库，专门用于电脑端网页的。因为里面集成了很多组件，所以使用他可以非常快速的帮我们实现网站的开发。

安装：

课程中用到的版本是1.2.0，为了跟课程环境保持一致，安装的时候指定版本：

npm install element-plus@1.2.0-beta.3 --save

引入：

引入的时候也是分成两种，一种是全部引入，一种是按需引入。

一、完整引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

二、局部引入：

首先需要安装unplugin-vue-components。

npm install unplugin-vue-components

1. 配置：

在vue.config.js中添加以下配置：

module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-components/webpack')({ /* options */ }),
    ],
  },
}

2. 使用：

然后在项目中可以进行使用了。先进行导入，然后进行组件注册，最后再使用：

<template>
  <el-button>I am ElButton</el-button>
</template>

<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>