安装
npm install element-plus --save
完整引入
打包后体积很大,适合学习,不适合生产。
此方法对于vite和cli脚手架创建的vue3均适用
// main.ts
import { createApp } from 'vue'
//引入element-plus
import ElementPlus from 'element-plus'
//引入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 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
Vite项目中
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
cli项目中(基于webapck的项目)
// vue.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 = {
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
}
手动导入
Element Plus 提供了基于 ES Module 开箱即用的 Tree Shaking 功能。
但是你需要安装 unplugin-element-plus 来导入样式。 请参考 文档 了解如何配置它。
<template>
<el-button>I am ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
</script>
// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
// ...
plugins: [ElementPlus()],
})