Element-Plus按需引入

1.手动导入

（1）创建element.js文件

// 引入element样式文件
import 'element-plus/dist/index.css'

// 按需引入element组件
import {
  ElButton,
  ElForm,
  ElMessage,
  ElScrollbar,
  ElInput,
  ElDropdown,
  ElSelect,
  ElTable,
  ElMenu,
  ElBreadcrumb,
  ElIcon,
  ElAvatar
} from 'element-plus'

// 按需引入elelment图标
import { Edit, Tools, Location, Setting } from '@element-plus/icons-vue'

export default function (app) {
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElScrollbar)
  app.use(ElInput)
  app.use(ElDropdown)
  app.use(ElSelect)
  app.use(ElTable)
  app.use(ElMenu)
  app.use(ElBreadcrumb)
  app.use(ElIcon)
  app.use(ElAvatar)
  app.use(ElMessage)
  app.component('Edit', Edit)
  app.component('Tools', Tools)
  app.component('Location', Location)
  app.component('Setting', Setting)
}

（2）main.js导入

（3）测试效果

<template>
  <div class="home">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </div>
</template>

<script setup></script>

如此，我们可以看到运行效果如下：

2.vue-cli-plugin-element-plus

（1）在通过 vue-cli 创建的项目中，执行

vue add element-plus

（2）选择全局导入

（3）暂不生成覆盖变量的 scss 文件

（4）选择简体中文即可

（5）出现该提示表示安装完成

3.自动导入

（1）安装所需插件

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

然后我们就可以去vue.config.js里进行配置了。

（2）vue.config.js

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}