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

相关推荐
java水泥工11 小时前
课程答疑系统|基于SpringBoot和Vue的课程答疑系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·大学生毕业设计·课程答疑系统
theOtherSky14 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
阿洛学长1 天前
高质量 AI 提示词之(从 0-1 开发 Vue 项目)
vue·ai编程·1024程序员节
IT教程资源D1 天前
[N_149]基于微信小程序网上商城系统
mysql·vue·前后端分离·springboot网上商城·网上商城小程序
ytgytg281 天前
芋道源码:VUE3部署:避坑--验证码不现显示,管理后台无法访问后端接口等,完善中。。。
java·vue
没逛够2 天前
Vue 自适应高度表格
javascript·vue.js·elementui
学会煎墙2 天前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
神膘护体小月半2 天前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue
console.log('npc')2 天前
使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框,切换类型,有物业,网格,电子围栏,行政区划管理
javascript·vue.js·elementui
一只小阿乐2 天前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model