深入使用Element-plus系列-入门按需引入安装

🦖我是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.tsimport{ defineConfig }from'vite'import AutoImport from'unplugin-auto-import/vite'import Components from'unplugin-vue-components/vite'import{ ElementPlusResolver }from'unplugin-vue-components/resolvers'exportdefaultdefineConfig({// ...plugins:[// ...AutoImport({resolvers:[ElementPlusResolver()],}),Components({resolvers:[ElementPlusResolver()],}),],})

Webpack#

// webpack.config.jsconst 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领域博主