Vue3加载Element-plus

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Element Plus 基于 Vue 3，面向设计师和开发者的组件库

安装Element-Plus

npm install element-plus --save

完整引用

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便

import { createApp } from 'vue'
import ElementPlus from '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

 然后修改vue.config.js配置文件

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')


module.exports = defineConfig({
 transpileDependencies: true,
 configureWebpack: {
  plugins: [
   AutoImport({
    resolvers: [ElementPlusResolver()]
    }),
   Components({
    resolvers: [ElementPlusResolver()]
    })
   ]
  }
})

最后，可以直接在组件中使用

<template>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
</template>