Vue3是不能直接使用Element-ui了,需要换成Element-plus
这里就是+———↓——↓——+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')