element-ui官网:https://element.eleme.cn/#/zh-CN/component/installation 安装
npm install element-ui -S不太清楚这里为什么是 -S 的朋友可以看看我的这篇文章 npm install -D 和 - S,--save 和 --save--dev 到底是什么意思? 引入( main.js 中引入 element-ui 和它的样式 )
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'简单的示例(点击按钮后弹出提示)
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148737-956197634.png)
<template> <div id="app"> <el-button @click="show">click me</el-button> </div> </template> <script> export default { name: 'App', methods: { show() { this.$message.success('安装成功') } } } </script> <style> </style>按需加载方法一 如果要问为什么需要按需加载,npm run build 打包一下,就会发现文件大小快 800KB了,gizp 压缩也有 200KB
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148722-669612085.png)
npm install babel-plugin-component -D安装完毕会看到多了一个 babel.config.js 文件
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148755-604764440.png)
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }然后在 main.js 中如下面箭头所指的那样修改即可。 另外,这里注意 Message,它不是一个组件,是作为一个方法引入,所以不同于 Button 组件, 需要在全局挂在到 Vue 的 prototype 上,方便在其它组件都能使用它
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148727-670918402.png)
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148736-454099678.png)
vue add element选择 Import on demand 局部引入
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148705-1508027372.png)
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148674-751614695.png)
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148692-1578122694.png)
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148673-1065941563.png)
![](/i/l/?n=22&i=blog/1033257/202209/1033257-20220930194148708-1698562103.png)