element plus换肤

转载

mob64ca140651e5 2024-09-03 12:46:11

文章标签 element plus换肤 vue.js 前端 javascript 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 自动引入组件（每次就不用再 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.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.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()],
    }),
  ],
}