Vue中ElementPlus的按需导入

目录

[1 新建一个Vue项目](#1 新建一个Vue项目)

[2 安装ElementPlus](#2 安装ElementPlus)

[3 安装按需导入的组件](#3 安装按需导入的组件)

[4 配置文件中添加相关内容](#4 配置文件中添加相关内容)


1 新建一个Vue项目

可看本人的这篇文章《创建一个Vue项目(含npm install卡住不动的解决)

2 安装ElementPlus

在项目文件夹目录下,输入该指令:

复制代码
npm install element-plus --save

3 安装按需导入的组件

在项目文件夹目录下,输入该指令:

复制代码
npm install -D unplugin-vue-components unplugin-auto-import

4 配置文件中添加相关内容

在项目的vite.config.js文件内添加如下内容:

javascript 复制代码
//其它内容
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()],
    }),
  ],
  //其它内容
})

最后,更多详情可查看官网

安装 | Element Plus

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
sunbyte6 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
ruanhongbiao8 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
普宁彭于晏9 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
你喜欢喝可乐吗?14 小时前
RuoYi-Cloud 验证码处理流程
java·spring cloud·微服务·vue
Rainbow_Pearl14 小时前
Vue2_element 表头查询功能
javascript·vue.js·elementui
魂兮归乡16 小时前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
灰海18 小时前
封装WebSocket
前端·网络·websocket·网络协议·vue