🦖我是Sam9029 
  
  
  
  
 ，一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

🐱‍🐉🐱‍🐉恭喜你 
  
  
  
  
  ，若此文你认为写的不错

 


 


 


 


 

，不要吝啬你的赞扬 
 
 
 
 
，求收藏 
   
   
   
   
   ，求评论
 

 

 

 

 
，求一个大大的赞！👍

🐸前言

关于 element-plus 的使用
 

 

 

 

 

，之前认为只用会用          ，看着文档来操作就可完事大吉

但是 现在 不这样想 

 
 

 
 

 
 

 
 

 
 ，即便是作为 一个现成的 










，已封装好的易用UI框架

element-plus 的使用上也并非               ，没有值得深入探讨的地方

大意就会败北

举几个列子：

既然使用了element-plus（下简写为 el-plus）

el-row以及el-col 甚至可以代替掉 div 的使用 
 
 
 
 
 
 
 
 
 
 ，我不知道（甚至还能自动设置一些默认样式















，减轻写样式的痛苦          ，这就是UI框架的原本意图 
  
 
  
 
  
 
  
 
  
 ，但我用了这么久










，就是不知道 
  
  
  
  
 ，只会在 copy 的时候使用 el-row 等el-plus内置标签） 表单组件中 有提供自定义验证的功能  
  
  
  
  
  ，我不知道

 


 


 


 


 

，傻傻自己写 <template #default=scope> 是插槽slot （作用域插槽的写法） 
 
 
 
 
，我不知道 诸如此类不在列举 
   
   
   
   
   ，我现在开始要逐一让这些
 

 

 

 

 
，让将来那些
 

 

 

 

 

，成为我知道

⭐目标：对重要组件进行完全吃透          ，次要组件熟悉了解

能玩出花 

 
 

 
 

 
 

 
 

 
 ，想这么就这么玩么的随心所欲的状态才是我追求的

🐸入门安装

谨记环境支持#

由于 Vue 3 不再支持 IE11










，Element Plus 也不再支持 IE 浏览器           。

若需求要非写不可               ，记得加钱🤑

按需自动引入的使用

**关于el-plus 使用 
 
 
 
 
 
 
 
 
 
 ，第一步















，

不说 全部引入了          ，官网讲的够意思了

安装 | Element Plus (gitee.io)

按需自动引入重温一遍

npm 包安装 el-plus npm i element-plus

npm 包安装 el-plus 自动按需引入插件

不得不说自动按需引入插件真香,此可谓楚雨荨吃花椒 
  
 
  
 
  
 
  
 
  
 ，爽麻了！

注意 是两款 插件

unplugin-vue-components 和 unplugin-auto-import这两款插件

关于其作用详情可看：尤大推荐的神器unplugin-vue-components,解放双手!以后再也不用呆呆的手动引入(组件,ui(Element-ui)库,vue hooks等) - 掘金 (juejin.cn)

unplugin-vue-components 自动引入组件（每次就不用再 vue 文件手动引入使用到的el-plus组件了）

unplugin-auto-import 支持vue, vue-router等API自动引入

npm install -D unplugin-vue-components unplugin-auto-import 配置 打包工具(webpack or vite )的 plugins

webpack 是在 vue.config.js中

vite 是在 vite.config.js中

记得先引入

import AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from unplugin-vue-components/resolvers plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ],

具体区别（官网示意例子）：

Vite#

// vite.config.ts import { defineConfig } from vite 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

()], }), ], }) Webpack#

// webpack.config.js const AutoImport = require(unplugin-auto-import/webpack) const Components = require(unplugin-vue-components/webpack) const { ElementPlusResolver } = require(unplugin-vue-components/resolvers) module.exports = { // ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }

后记

其实还有许多需要在使用前了解的地方

其他的引入方法

更细节的环境支持

等更高阶的地方

后续持续学习

🦖我是Sam9029










，一个前端

文章若有错误 
  
  
  
  
 ，敬请指正🙏

🐱‍🐉🐱‍🐉恭喜你 
  
  
  
  
  ，都看到这了

 


 


 


 


 

，求收藏 
 
 
 
 
，求评论 
   
   
   
   
   ，求一个大大的赞👍！不过分吧**

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主