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

本文链接：https://blog.csdn.net/m0_61486963/article/details/127174326

🦖我是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()],
    }),
  ],
}