② Vue3引入Element Plus

一、安装和引入element-plus

官网：https://element-plus.gitee.io/zh-CN/

#安装element-plus模块
npm install element-plus --save

全局引入element-plus

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

// main.ts
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')

/*app.use(ElementPlus, { size: 'small', zIndex: 3000 })*/
/*在引入 Element Plus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。 
size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。*/

然后就能使用Element的组件了

按需引入element-plus（推荐）

首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

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