vue3使用element-plus

念衢

于 2022-11-16 16:40:05 发布

阅读量3.4k

点赞数

分类专栏： vue3学习前端学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_45947664/article/details/127875899

版权

本文介绍了如何在Vue3项目中集成并使用Element Plus组件库，包括全局和按需引入方式。详细步骤包括安装依赖、配置vue.config.js、在main.js中引入及使用组件，如带图标的按钮、icon图标和开关。在实践过程中，遇到图标显示问题，后续需进一步解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载包

npm install element-plus --save

2、引入

全局引入+挂载：引入记得有css文件（下载不下来可能是项目正在运行，先关掉）

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);
app.use(ElementPlus)
app.mount('#app')

按需引入：先下载两个插件

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

修改vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
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:{
    plugins:[
      AutoImport({
        resolves:[ElementPlusResolver()]
      }),
      Components({
        resolves:[ElementPlusResolver()]
      }),
    ]
  }
})