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

相关推荐
普宁彭于晏15 分钟前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
你喜欢喝可乐吗?5 小时前
RuoYi-Cloud 验证码处理流程
java·spring cloud·微服务·vue
Rainbow_Pearl5 小时前
Vue2_element 表头查询功能
javascript·vue.js·elementui
魂兮归乡8 小时前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
灰海9 小时前
封装WebSocket
前端·网络·websocket·网络协议·vue
布兰妮甜1 天前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
木依1 天前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui
我爱加班、、1 天前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
大菠萝学姐1 天前
基于Spring Boot和Vue的高校图书馆座位预约系统的设计与实现
java·vue.js·spring boot·后端·python·mysql·vue
黄焖鸡能干四碗1 天前
系统安全设计方案,软件系统安全设计方案
开发语言·数据库·安全·vue·系统安全