Vue3+Vuecli局部引入element-plus

由于在项目中，想要使用element-ui，但是在使用过程中发现vue3不会直接使用element-ui，而是直接使用element-plus；

安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

按需导入

需要使用额外的插件来导入要使用的组件。

自动导入

首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

由于项目中采用的是vue-cli脚手架，所以要将下方的代码写入到vue.config.js中

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

使用

<template>
  <el-button>I am ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

结果：