element plus 按需导入vue

步骤一:

下载element plus

在打开vue项目的编辑器 中打开终端 ,或者在cmd窗口 进入到项目目录

用你的包管理器安装element plus,例如使用npm包管理器

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

查看是否安装成功:查看项目文件package-lock.json中有没有element plus

复制代码
dependencies": {
        "axios": "^1.7.7",
        "element-plus": "^2.8.3",
        "vue": "^3.4.29",
        "vue-router": "^4.3.3"
      }

步骤二:

下载自动导入的插件

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

步骤三:

在vite.config配置文件中导入

javascript 复制代码
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

步骤四:

在vite.config配置文件中配置按需导入插件

javascript 复制代码
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    
  ]
})
相关推荐
Marst Code6 小时前
⚙️ 2026 年推荐技术方案
前端
qq_366086226 小时前
测试接口传参数时,放在Header和Body中后台接收参数的区别
java·开发语言·前端
whatever who cares6 小时前
Vue3中vue文件和composables的分工
前端·javascript·vue.js
袋鼠云数栈UED团队6 小时前
基于 superpowers 实现复杂前端改造
前端
袋鼠云数栈前端6 小时前
基于 superpowers 实现复杂前端改造
前端·ai
sugar__salt6 小时前
LLM服务HTTP接口实战:前端HTTP请求全解与项目落地
前端·网络协议·http
十正6 小时前
Claude code源码精读之蜂群模式
javascript·人工智能·agent·claude code
薛先生_0996 小时前
vue-编程式跳转-基本跳转
前端·javascript·vue.js
微三云、小叶6 小时前
排队免单系统底层设计:四种分配算法拆解,无预支资金的合规营销架构方案
java·前端·软件开发·商业模式·本地生活·商业思维
copyer_xyf6 小时前
Python 内存分析:从栈和堆理解对象引用
前端·后端·python