Vue3如何使用Element-Ui？Element-Plus#按需导入

Vue3是不能直接使用Element-ui了，需要换成Element-plus

这里就是+———↓——↓——+Element-plus的官方文档了

老规矩废话、少说直接安装依赖


$ npm install element-plus --save


$ yarn add element-plus

安装完成之后，看到这个版本型号就算是真正安装成功啦

如何按需引入：

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

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

安装完成后找到vue.config.js

如果是新的Vue3项目那么可以直接把下面的代码直接拿走

// +————————————————
// +vue.config.js
// +————————————————
const { defineConfig } = require('@vue/cli-service')
// Element Plus按需导入
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———————————
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})

这样的就可以直接从组件库里面拿来使用了

但是现在字体图标组件库还是不能够使用的

如果你想像用例一样直接使用图标组件，你需要全局注册组件，才能够直接在项目里使用

需要安装图标组件依赖

$ npm install @element-plus/icons-vue

老规矩：如果是新的Vue3项目那么可以直接把下面的代码直接拿走

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
//  +————————————element注册所有图标————————————————————————————
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

//  +————————————element注册所有图标————————————————————————————
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(store)
app.use(router)
app.mount('#app')

Vue3如何使用Element-Ui？Element-Plus#按需导入

猜你喜欢