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

相关推荐
软件2059 小时前
【vue3主题切换】
vue
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
结衣结衣.15 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
军军君013 天前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
你这-坏孩子3 天前
更改elementui 图标 css content
前端·css·elementui
xaboy3 天前
Vue 开源项目低代码表单设计器 FcDesigner v3.3 版本发布!兼容Element Plus/Ant Design/Vant,支持PC/移动端
低代码·vue·表单设计器
程序猿小D3 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+vue实现的酒店预订管理系统,推荐!
数据库·mysql·spring·vue·毕业设计·mybatis·酒店预订
马卡龙MK3 天前
vue 不完美的多标签页解决方案
vue
goms3 天前
前端项目集成lint-staged
前端·vue·lint-staged