vue3使用element-plus

安装

# 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官网