当前位置：首页 > news >正文

vue3使用element-plus

news 来源：原创 2025/5/16 21:33:08

安装

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

全局引入

main.js

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'//引入ElementPlus所有组件
import 'element-plus/dist/index.css'//引入ElementPlus样式
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)//注册使用
app.mount('#app')

按需引入(推荐)

按需引入（因为vue3按需引入不需要一个个手动引入了，只要页面使用到的组件会自动帮你引入，何乐而不为呢）

安装插件：

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

在vite.config.js中使用插件

// 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()],,//插件二
    }),
  ],
})

用webpack打包的项目中在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()],
    }),
  ],
}

到这里就可以正常使用了，详细安装使用参考官网非常详细element-plus官网