安装element-ui
element-ui官网地址：element-ui官网-vue3
- npm安装
npm install element-plus --save
使用和相关配置
如果对打包后的文件大小不是很在乎，那么使用完整导入会更方便，这里推荐使用按需引入。
按需引入具体步骤：文章来源：https://www.toymoban.com/news/detail-653137.html
- 首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。
npm install -D unplugin-vue-components unplugin-auto-import
- 配置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()],
}),
],
}
}
- main.js文件配置
如果需要使用element-ui的Icon图标，则需要首先下载相应的包管理器
npm install @element-plus/icons-vue文章来源地址https://www.toymoban.com/news/detail-653137.html
import { createApp } from "vue";
import App from "./App.vue";
//引入样式
import 'element-plus/theme-chalk/index.css';
//Icon图标，全局注册
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount("#app")
- 在官网找合适的组件就可以使用啦。
到了这里，关于vue3中按需引入element-ui并配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
