Vue3中引入Element-plus

安装

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 或 Webpack 的配置文件中（其他地方不用配置）

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

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

注：如果按照vite的方式（官网给的示例）引入，会报错。

手动导入

https://element-plus.gitee.io/zh-CN/guide/quickstart.html#使用-nuxt-js