【前端】组件库使用总结

最新推荐文章于 2025-07-31 15:38:52 发布
原创 最新推荐文章于 2025-07-31 15:38:52 发布 · 879 阅读 · 26 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

无废话，全干货，今天更新完毕，建议关注收藏点赞
文档➕自己的补充和整理

目录

  • 组件的参数都往属性里加即可 跟className一个位置

Ant Design react

pnpm install是安装配置文件中的依赖，而pnpm add是增加新依赖到配置文件

npm install antd
yarn add antd
pnpm add antd

#vite项目
npm create vite antd-demo
yarn create vite antd-demo
pnpm create vite antd-demo

cd antd-demo #demo项目
npm install
npm run dev

#跟开头一样安装antd 这里略
  • 快速上手
    国际化只需要引入对应语言包，修改locale对应变量；默认英文
import React from 'react';
import { Button, Space, DatePicker, version } from 'antd';//动态引入 tree-shaking

const App = () => (
  <div style={{ padding: '0 24px' }}>
    <h1>antd version: {version}</h1>
    <Space>
      <DatePicker />
      <Button type="primary">Primary Button</Button>
    </Space>
  </div>
);
export default App;

//EXAMPLE
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

import zhCN from 'antd/locale/zh_CN';
import { ConfigProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文

import dayjs from 'dayjs';
//轻量级（仅约 2KB）且高性能的 JavaScript 日期处理库，用来替代 Moment.js。
import 'dayjs/locale/zh-cn';

import './index.css';

dayjs.locale('zh-cn');

const App = () => {
  const [date, setDate] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const handleChange = (value) => {
    messageApi.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);
    setDate(value);
  };
  return (
    <ConfigProvider locale={zhCN}>
      <div style={{ width: 400, margin: '100px auto' }}>
        <DatePicker onChange={handleChange} />
        <div style={{ marginTop: 16 }}>
          当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'}
        </div>
      </div>
      {contextHolder}
    </ConfigProvider>
  );
};
createRoot(document.getElementById('root')).render(<App />);

Next.js

# nextjs项目
npx create-next-app antd-demo
yarn create next-app antd-demo
pnpm create next-app antd-demo
# 启动同上
# 同上安装antd
  • App Router
  • Pages Router

定制

  • 直接利用 Design Token
    主题编辑器
    在 Design Token 中我们提供了一套更加贴合设计的三层结构，将 Design Token 拆解为 Seed Token、Map Token 和 Alias Token 三部分。这三组 Token 并不是简单的分组，而是一个三层的派生关系，由 Seed Token 派生 Map Token，再由 Map Token 派生 Alias Token。在大部分情况下，使用 Seed Token 就可以满足定制主题的需要。
  • 为什么 theme 从 undefined 变为对象或者变为 undefined 时组件重新 mount 了？
    在 ConfigProvider 中我们通过 DesignTokenContext 传递 context，theme 为 undefined 时不会套一层 Provider，所以从无到有或者从有到无时 React 的 VirtualDOM 结构变化，导致组件重新 mount。解决方法：将 undefined 替换为空对象 {} 即可。
import { Button, ConfigProvider, Space } from 'antd';
import React from 'react';

const App: React.FC = () => (//function component
  <ConfigProvider
    theme={{
      token: {
        // Seed Token，影响范围大
        colorPrimary: '#00b96b',
        borderRadius: 2,

        // 派生变量，影响范围小
        colorBgContainer: '#f6ffed',
      },
    }}
  >
    <Space>
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
    </Space>
  </ConfigProvider>
);

export default App;

//还有三套预设算法
 theme={{
      // 1. 单独使用暗色算法
      algorithm: theme.darkAlgorithm,
      // 2. 组合使用暗色算法与紧凑算法
      // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
    }}

//禁用动画
theme={{ token: { motion: false } }}

//动态切换主题 用变量表示主题
import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';
import React from 'react';
const App: React.FC = () => {
  const [primary, setPrimary] = React.useState('#1677ff');

  return (
    <>
      <ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />
      <Divider />
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: primary,
          },
        }}
      >
        <Space>
          <Input placeholder="Please Input" />
          <Button type="primary">Submit</Button>
        </Space>
      </ConfigProvider>
    </>
  );
}

export default App;

//获取当前主题 design token
import React from 'react';
import { Button, theme } from 'antd';

const { useToken } = theme;

const App: React.FC = () => {
  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorPrimaryBg,
        padding: token.padding,
        borderRadius: token.borderRadius,
        color: token.colorPrimaryText,
        fontSize: token.fontSize,
      }}
    >
      使用 Design Token
    </div>
  );
};

export default App;

rem兼容

px2remTransformer 转换器可以快速而准确地将样式表中的像素单位转换为相对于根元素（HTML 标签）的 rem 单位

import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';

const px2rem = px2remTransformer({
  rootValue: 32, // 32px = 1rem; @default 16
});

export default () => (
  <StyleProvider transformers={[px2rem]}>
    <MyApp />
  </StyleProvider>
);
//导致样式文件里的大小单位全部转换为rem

兼容三方样式库

在某些情况下，你可能需要 antd 与其他样式库共存，比如 Tailwind CSS、Emotion、styled-components 等。不同于传统 CSS 方案，这些三方库往往不太容易通过提升 CSS 选择器优先级的方式覆盖 antd 的样式。你可以通过为 antd 配置 @layer 降低其 CSS 选择器权重，同时通过合理安排 @layer 顺序来解决样式覆盖问题：

  1. antd 配置 @layer：如前所述，使用 StyleProvider 时必须包裹 ConfigProvider 以更新图标相关样式：
import { StyleProvider } from '@ant-design/cssinjs';

export default () => (
  <StyleProvider layer>
    <ConfigProvider>
      <MyApp />
    </ConfigProvider>
  </StyleProvider>
);
  1. TailwindCSS 排布 @layer 要看tailwindcss的版本 v3/v4
  1. v3 ：在 global.css 中，调整 @layer 来控制样式的覆盖顺序。让 tailwind-base 置于 antd 之前
@layer tailwind-base, antd;

@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;
  1. v4：在 global.css 中，调整 @layer 来控制样式的覆盖顺序，让 antd 置于恰当位置
/*
把样式分成多个“层”，比如：
theme：自定义主题变量
base：基础样式（如 reset）
antd：组件库样式（如 Ant Design）
components：你自己写的组件样式
utilities：Tailwind 的工具类（如 p-4, text-center）
*/
@layer theme, base, antd, components, utilities;
@import 'tailwindcss';
  1. reset.css：如果你使用了 antd 的 reset.css 样式，你需要为其也指定 @layer 以防止将 antd 降权的样式覆盖：
@layer reset, antd;
@import url(reset.css) layer(reset);
  1. SSR
    在 SSR 场景下，样式往往会通过<style />内联渲染到 HTML 中。此时请务必确保你的样式顺序中指定 @layer 优先级顺序的样式在 @layer 被使用之前被加载。
<head>
  <!-- css 文件中包含 @layer xxx, antd; -->
  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
  <!-- or 直接书写 @layer xxx, antd; 在 html 中 -->
  <style>
    @layer xxx, antd;
  </style>

  <!-- SSR 注入样式 -->
  <style>
    @layer antd {
      /** ... */
    }
  </style>
</head>

SSR

  • 两种方案
  1. 内联样式：在渲染时无需额外请求样式文件，好处是减少额外网络请求，缺点则是会使得 HTML 体积增大，影响首屏渲染速度
    使用 @ant-design/cssinjs 将所需样式抽离：
import React from 'react';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import type Entity from '@ant-design/cssinjs/es/Cache';
import { renderToString } from 'react-dom/server';

const App = () => {
  // SSR Render
  const cache = React.useMemo<Entity>(() => createCache(), []);
  const html = renderToString(
    <StyleProvider cache={cache}>
      <MyApp />
    </StyleProvider>,
  );

  // Grab style from cache
  const styleText = extractStyle(cache);

  // Mix with style
  return `
    <!DOCTYPE html>
    <html>
      <head>
        ${styleText}
      </head>
      <body>
        <div id="root">${html}</div>
      </body>
    </html>
  `;
};

export default App;
  1. 整体导出：提前烘焙 antd 组件样式为 css 文件，在页面中时引入。好处是打开任意页面时如传统 css 方案一样都会复用同一套 css 文件以命中缓存，缺点是如果页面中存在多主题，则需要额外进行烘焙
    安装npm install ts-node tslib cross-env --save-dev
    新增 tsconfig.node.json 文件
{
  "compilerOptions": {
    "strictNullChecks": true,
    "module": "NodeNext",
    "jsx": "react",
    "esModuleInterop": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

新增 scripts/genAntdCss.tsx 文件

// scripts/genAntdCss.tsx
import fs from 'fs';
import { extractStyle } from '@ant-design/static-style-extract';

const outputPath = './public/antd.min.css';

const css = extractStyle();

fs.writeFileSync(outputPath, css);

//混合主题或自定义主题 
import fs from 'fs';
import React from 'react';
import { extractStyle } from '@ant-design/static-style-extract';
import { ConfigProvider } from 'antd';

const outputPath = './public/antd.min.css';

const testGreenColor = '#008000';
const testRedColor = '#ff0000';

const css = extractStyle((node) => (
  <>
    <ConfigProvider
      theme={{
        token: {
          colorBgBase: testGreenColor,
        },
      }}
    >
      {node}
    </ConfigProvider>
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: testGreenColor,
        },
      }}
    >
      <ConfigProvider
        theme={{
          token: {
            colorBgBase: testRedColor,
          },
        }}
      >
        {node}
      </ConfigProvider>
    </ConfigProvider>
  </>
));

fs.writeFileSync(outputPath, css);

在启动开发命令或编译前执行这个脚本，运行上述脚本将会在当前项目的指定（如： public 目录）目录下直接生成一个全量的 antd.min.css 文件。

// package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx",
    "prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx"
  }
}

在pages/_app.tsx文件中引入这个文件

import { StyleProvider } from '@ant-design/cssinjs';
import type { AppProps } from 'next/app';

import '../public/antd.min.css'; // 添加这行
import '../styles/globals.css';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <StyleProvider hashPriority="high">
      <Component {...pageProps} />
    </StyleProvider>
  );
}

//自定义主题 烘培
import { extractStyle } from '@ant-design/static-style-extract';
import { ConfigProvider } from 'antd';

const cssText = extractStyle((node) => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: 'red',
      },
    }}
  >
    {node}
  </ConfigProvider>
));

//混合主题 烘培
import { extractStyle } from '@ant-design/static-style-extract';
import { ConfigProvider } from 'antd';

const cssText = extractStyle((node) => (
  <>
    <ConfigProvider
      theme={{
        token: {
          colorBgBase: 'green ',
        },
      }}
    >
      {node}
    </ConfigProvider>
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: 'blue',
        },
      }}
    >
      <ConfigProvider
        theme={{
          token: {
            colorBgBase: 'red ',
          },
        }}
      >
        {node}
      </ConfigProvider>
    </ConfigProvider>
  </>
));

//按需提取 之前导出的样式文件
// scripts/genAntdCss.tsx
import { createHash } from 'crypto';
import fs from 'fs';
import path from 'path';
import { extractStyle } from '@ant-design/cssinjs';
import type Entity from '@ant-design/cssinjs/lib/Cache';

export interface DoExtraStyleOptions {
  cache: Entity;
  dir?: string;
  baseFileName?: string;
}

export const doExtraStyle = (opts: DoExtraStyleOptions) => {
  const { cache, dir = 'antd-output', baseFileName = 'antd.min' } = opts;

  const baseDir = path.resolve(__dirname, '../../static/css');

  const outputCssPath = path.join(baseDir, dir);

  if (!fs.existsSync(outputCssPath)) {
    fs.mkdirSync(outputCssPath, { recursive: true });
  }

  const css = extractStyle(cache, true);

  if (!css) {
    return '';
  }

  const md5 = createHash('md5');
  const hash = md5.update(css).digest('hex');
  const fileName = `${baseFileName}.${hash.substring(0, 8)}.css`;
  const fullpath = path.join(outputCssPath, fileName);

  const res = `_next/static/css/${dir}/${fileName}`;

  if (fs.existsSync(fullpath)) {
    return res;
  }

  fs.writeFileSync(fullpath, css);

  return res;
};

//在 _document.tsx 中使用上述工具进行按需导出：
// _document.tsx
import { createCache, StyleProvider } from '@ant-design/cssinjs';
import type { DocumentContext } from 'next/document';
import Document, { Head, Html, Main, NextScript } from 'next/document';

import { doExtraStyle } from '../scripts/genAntdCss';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const cache = createCache();
    let fileName = '';
    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => (
          <StyleProvider cache={cache}>
            <App {...props} />
          </StyleProvider>
        ),
      });

    const initialProps = await Document.getInitialProps(ctx);
    // 1.1 extract style which had been used
    fileName = doExtraStyle({
      cache,
    });
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {/* 1.2 inject css */}
          {fileName && <link rel="stylesheet" href={`/${fileName}`} />}
        </>
      ),
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

从 Less 变量到 Design Token（ Component Token ）

Design Token 所带来的一个大变革：样式不再是分离的全局变量，而是变成了组件的一部分。

//结构
{
  "color": {
    "primary": {
      "value": "#1890ff"
    },
    "error": {
      "value": "#ff4d4f"
    }
  },
  "font": {
    "size": {
      "base": {
        "value": "14px"
      }
    }
  }
}

//举例子
<ConfigProvider
  theme={{
    components: {
      Button: {
        colorPrimary: '#00b96b',
      },
    },
  }}
>

兼容react 19

React 19 调整了 react-dom 的导出方式，导致 antd 无法直接使用 ReactDOM.render 方法，引入问题：
波纹特效无法正常工作
Modal、Notification、Message 等组件的静态方法无效

  • 安装兼容包pnpm add @ant-design/v5-patch-for-react-19 --save
    应用入口引入import '@ant-design/v5-patch-for-react-19';
  • 对于 umd、微应用等特殊场景，才使用 unstableSetRender 方法。unstableSetRender 为底层注册方法，允许开发者修改 ReactDOM 的渲染方法。在你的应用入口处写入：
import { unstableSetRender } from 'antd';
import { createRoot } from 'react-dom/client';

unstableSetRender((node, container) => {
  container._reactRoot ||= createRoot(container);
  const root = container._reactRoot;
  root.render(node);
  return async () => {
    await new Promise((resolve) => setTimeout(resolve, 0));
    root.unmount();
/*
将 root.unmount() 推迟到 下一个事件循环（event loop）周期执行。原因可能是：
让浏览器有机会完成当前渲染任务，避免在 render 后立即 unmount 导致 UI 没显示就被销毁
配合某些状态更新或动画逻辑，给它一点点时间处理
React 在某些 Suspense 或异步渲染流程中，也有类似微延迟处理，提升稳定性
*/
  };
});

Element Plus

项目模版
element ->element plus有迁移工具

  • 安装
npm install element-plus
yarn add element-plus
pnpm add element-plus

#或者HTML标签直接引入对应的cdn

pnpm i
pnpm docs:dev #网页预览全部现有组件
pnpm dev #启动本地开发环境
  • 引入
//完整引入
import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

//按需导入
npm install -D unplugin-vue-components unplugin-auto-import
//修改vite/webpack配置文件
//vite
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
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()],
    }),
  ],
}

//nuxt
npm install -D @element-plus/nuxt
//写入配置文件nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
})

//手动导入 tree-shaking
npm i unplugin-element-plus -D
//app.vue
<template>
  <el-button>I am ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
  components: { ElButton },
}
</script>
//vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})
  • 全局配置
    可以传入一个包含 size 和 zIndex 属性的全局配置对象。 size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。
//完整引入
//main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

//按需引入 app.vue
<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>
  • 组件式过渡动画需要按需导入 如折叠展开
    类名动画只需要引入主题css
// collapse
import { ElCollapseTransition } from 'element-plus'

// fade/zoom 系列必须引入下方主题css
//然后这样使用：<transition name="el-fade-in">
import 'element-plus/theme-chalk/base.css'

import App from './App.vue'
const app = createApp(App)
app.component(ElCollapseTransition.name, ElCollapseTransition)
  • 国际化 默认英语
//全局配置
//方法一：main.ts
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})
//方法二：Vue 组件 ConfigProvider 用于全局配置国际化
<template>
  <el-config-provider :locale="zhCn">
    <app />
  </el-config-provider>
</template>
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>

//时间日期本地化
import 'dayjs/locale/zh-cn'

更换主题色

  • SCSS变量
    theme-chalk 使用SCSS编写而成。 你可以在 packages/theme-chalk/src/common/var.scss 文件中查找SCSS变量。
    使用$colors作为 map 来保存不同类型的颜色。
    $notification 是所有 notification 组件的变量的映射。
$colors: () !default;
$colors: map.deep-merge(
  (
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #409eff,
    ),
    'success': (
      'base': #67c23a,
    ),
    'warning': (
      'base': #e6a23c,
    ),
    'danger': (
      'base': #f56c6c,
    ),
    'error': (
      'base': #f56c6c,
    ),
    'info': (
      'base': #909399,
    ),
  ),
  $colors
);
  • 覆盖原样式变量：自己的SCSS覆盖原SCSS
  1. 新建一个样式文件，例如 styles/element/index.scss
    应该使用 @use 'xxx.scss' as *; 代替 @import 'xxx.scss';。因为 sass 团队说他们最终会删除@import语法。
/* just override what you need 只写要覆盖的部份*/
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  )
);
/* 如果你想导入所有样式:*/
@use "element-plus/theme-chalk/src/index.scss" as *;
  1. 在你的项目入口文件中，导入这个样式文件以替换 Element Plus 内置的 CSS：
    在 element-plus scss 文件之前导入element/index.scss以避免 sass 混合变量的问题，因为我们需要通过你的自定义变量生成 light-x。
    应该将你的 scss 文件与 element 变量的 scss 文件区分开来。 如果将它们混合在一起，element-plus 每次热更新都需要编译大量的 scss 文件，这将会导致编译速度变慢。
//main.ts
import { createApp } from 'vue'
import './styles/element/index.scss'
import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)

//如果要vite按需导入自定义主题
//使用 scss.additionalData 来编译所有应用 scss 变量的组件
//vite.config.ts
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// You can also use unplugin-vue-components
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// or use unplugin-element-plus
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    // use unplugin-vue-components
    // Components({
    //   resolvers: [
    //     ElementPlusResolver({
    //       importStyle: "sass",
    //       // directives: true,
    //       // version: "2.1.5",
    //     }),
    //   ],
    // }),
    // or use unplugin-element-plus
    ElementPlus({
      useSource: true,
    }),
  ],
})

//webpack 按需引入自定义主题
//webpack.config.js
// use unplugin-element-plus
import ElementPlus from 'unplugin-element-plus/webpack'
export default defineConfig({
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    ElementPlus({
      useSource: true,
    }),
  ],
})
  • CSS变量
    兼容 SCSS 变量系统。 使用 SCSS 的函数自动生成需要用到的 css 变量。可以动态地改变组件内的个别变量，以便更好地自定义组件样式，而不需要修改 SCSS 文件重新编译一次。
:root {
  --el-color-primary: green;
}
<el-tag style="--el-tag-bg-color: red">Tag</el-tag>
.custom-class {
  --el-tag-bg-color: red;
}

// document.documentElement 是全局变量时
const el = document.documentElement
// const el = document.getElementById('xxx')

// 获取 css 变量
getComputedStyle(el).getPropertyValue(`--el-color-primary`)

// 设置 css 变量
el.style.setProperty('--el-color-primary', 'red')

dark模式

  • 启用
    项目入口修改一行代码
//main.ts
// if you just want to import css
import 'element-plus/theme-chalk/dark/css-vars.css'
  1. html标签加 class="dark"
  2. 动态切换用vueuse的useDark

VueUse 是一个专为 Vue 3 打造的超实用工具库，提供了 200+ 个组合式 API 函数，类似于react hooks，让你在开发中少写重复代码，多享受效率与优雅

  • 自定义变量 2种设置方法
    1）css 直接覆盖对应css变量
    新建一个 styles/dark/css-vars.css文件:
html.dark {
  /* 自定义深色背景颜色 */
  --el-bg-color: #626aef;
}

在 Element Plus 的样式之后导入它

//main.ts
import 'element-plus/theme-chalk/dark/css-vars.css'
import './styles/dark/css-vars.css'

2）scss 导入scss文件

/* styles/element/index.scss*/
/*just override what you need*/
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
  $bg-color: (
    'page': #0a0a0a,
    '': #626aef,
    'overlay': #1d1e1f,
  )
);

//main.ts
import './styles/element/index.scss'
// or just want to import scss?
// import 'element-plus/theme-chalk/src/dark/css-vars.scss'

SSR

关于nuxt 暂不更新

pnpm link

应用：测试开发的组件是否正常 仅用于调试开发场景，而不是生产环境
将自开发组件添加到play/src/App.vue

<template>
  <ComponentYouAreDeveloping />
</template>

<script setup lang="ts">
// make sure this component is registered in @element-plus/components
</script>

# 获取构建结果
pnpm build
cd dist/element-plus
# set cur element-plus to global `node_modules`
pnpm link --global
# for esm we also need link element-plus for dist
pnpm link --global element-plus

# 进入你的项目, 链接到 `element-plus`
cd your-project
pnpm link --global element-plus
如何开发前端组件库
天道酬心
02-15 2100
自己如何开发前端组件库，自己开发的组件库应该达到什么效果，前端组件库用到了哪些知识点
AI前端组件库Ant DesIgn X
程序员猫爪
04-07 1008
Ant Design X AI 推出全新 RICH 设计范式，包含角色、意图、会话和混合界面四个核心要素，为 AI 界面提供卓越解决方案。
前端组件库设计思想
m0_54771323的博客
04-01 753
设计一个前端组件库需要考虑多个因素，以确保库的可用性、扩展性和易于维护。下面是一些建议和关键事项：一：规划和目标：确定组件库的目标、受众和用途。它将用于解决哪些问题？它将主要服务于哪些用户？二：组件选择：评估需要哪些组件，例如按钮、输入框、导航菜单等。考虑通用的组件以及特定于你的应用程序需求的组件。三：设计原则：组件库应该遵循一致性、可扩展性和易于维护的设计原则。四：UI设计：根据产品的需求和品牌设计语言，为组件制定统一的UI风格和设计规范。五：设计模式：确定常用的设计模式，如表单提交、编辑等。
前端常用的文档及组件库
weixin_73416102的博客
11-25 5040
对前端文档以及组件进行总结
前端组件化开发实践总结
张旭乾 - 全栈工程师/海归
10-13 7463
自从 2010 年第一份工作接触了前后端半分离的开发方式之后，在后面的这些年里，对前端的组件化开发有了更全面一点的认识，组件化在我们的前端开发中，对提高开发效率、代码的可维护性和可复用性有很大帮助，甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码，你可以按照实际情况应用到 React 或 Vue 的项目中。 前端组件化发展历史 在讨论组件化开发之前，我们先看看前端组件化开发的发展历史。网页开发刚起步时，并没有『前端』
如何做好一个前端业务组件库
vgub158的博客
11-30 3441
本文主要是讲述了如何做好一个业务组件库，主要是从我在公司的业务组件库开发中总结出来的经验
如何使用前端Web组件
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-10 1168
Web组件由三个核心API组成：Custom Elements、Shadow DOM 和 HTML Template。它们共同提供了创建可重用、封装良好的UI组件的能力。super();';super();super();super();super();super();super();
盘点国内大厂的前端组件库有那些？
软件行业技术文化交流。
04-26 1769
目前各大厂的组件库都趋于完善，常用的组件、国际化、图标、主题配置等能力都基本具备，更多的差异点在于各自组件库与自身业务的结合，例如华为云的组件库更多侧重于Angular技术栈，因为其内部众多云服务的页面使用了Angular技术栈开发，而腾讯的组件库提供了微信小程序和 QQ 小程序的版本，阿里和字节更是在技术上不断地深入探索，并且有着自己鲜明的特点。学习和使用大厂的组件库，一方面可以简化我们的开发工作，另一方面也能学习到组件的 API 设计思想，从而在未来的业务代码开放中培养一个更好的设计思维。
闲鱼前端组件库的建设
闲鱼技术的博客
01-18 1389
背景闲鱼经过这些年发展已经变成了一个业务丰富，数量众多且功能复杂的产品；而且业务高速发展，需求井喷，需要开发同学能够快速做出响应。同时这些产品线与闲鱼的设计风格有很多的共性，但各自不同的定...
ant组件库总结
曾小超的博客
11-09 3664
ant,用于PC端或者移动端的组件开发，提高开发效率。 https://www.antdv.com/docs/vue/introduce-cn/ 但在移动端开发的时候： 注意点： 1.要使用flex布局，不要使用绝对布局，会导致布局错位。 2.要使用rem或者vw、vh这种可以自适应的单位，配合一些插件一起使用，最好不要 使用px这种绝对单位。 3.转换插件，px2vw和px2rem...
搭建一个前端组件库文档
04-01
### 搭建前端组件库的关键步骤与最佳实践 #### 一、理解Monorepo的概念及其在组件库中的应用 **Monorepo**（单一仓库）是一种新兴的代码管理方式，它将多个项目的代码集中在一个仓库中进行统一管理。这种方式在...
Axure 9 Web前端+后台+移动前端 元件库
02-14
总结来说，"Axure 9 Web前端+后台+移动前端 元件库"是一个全面的资源集合，旨在提升原型设计的效率和质量。无论你是Web开发者、产品经理还是UI/UX设计师，这个元件库都能成为你手中的利器，帮助你快速构建出专业且...
前端领域的前端组件库的使用
AI架构全栈开发实战笔记
04-26 693
随着前端技术栈的复杂化和业务需求的多样化，组件化开发已成为现代前端工程的核心范式。组件库的分类体系与核心设计原则组件开发的工程化流程与关键技术实现跨框架/跨平台适配的技术方案企业级组件库的落地实践与最佳经验性能优化与生态整合的前沿思路目标是为中高级前端开发者提供从理论到实践的完整知识体系，帮助构建可复用、易维护、高性能的组件化解决方案。核心概念：解析组件库定义、分类、架构模型技术实现：涵盖组件开发、工程化、跨平台等关键技术实战案例：通过完整项目演示组件库开发全流程。
js面试题 高频(12-22题)
m0_63472757的博客
07-29 1021
1.代码服用与抽象: 高阶函数可以将重复的逻辑抽象出来,形成通用函数,提高代码的复用性,柯李华可以将复杂的函数调用转化为一系列简单的步骤,便于部分应用和服用2.函数组合: 高阶函数和柯里化是构建函数式编程风格的关键,它们使的函数的组合变得更容易,从而构建更复杂的功能3.延迟执行与配置化: 柯里化可以将函数执行延迟到所有参数都传入后进行,同时允许在传入部分参数时进行配置,生成定制化的新函数。
5G毫米波射频前端设计：从GaN功放到混合信号集成方案
ytttr873的博客
07-31 322
同时，GaN功放还具备较高的功率附加效率（PAE），相比传统的半导体材料功放，能够在提供相同功率输出的情况下消耗更少的电能，这对于降低设备的能耗和散热需求具有重要意义。随着5G通信技术的飞速发展，毫米波频段凭借其丰富的频谱资源，成为满足5G高速率、大容量数据传输需求的关键频段。然而，毫米波信号的高频特性带来了诸多设计挑战，射频前端作为无线通信系统中负责信号发射与接收的核心部分，其设计至关重要。GaN功放通过优化电路设计和工艺，能够在高功率输出的情况下保持良好的线性度，确保信号在传输过程中的准确性和可靠性。
Vue3 中 toValue 与 unref 深度解析：异同、场景与最佳实践
前端知识分享喵
07-30 780
Vue3中的toValue和unref都是响应式数据解包工具，但存在关键差异：unref仅解包ref对象，而toValue在unref基础上增加了对函数类型的支持，会自动执行函数并返回结果。toValue更适合处理动态计算和多种输入类型的场景，如组合式函数参数标准化；unref则在简单解包和性能敏感场景更具优势。开发者需注意两者对reactive对象和函数参数的不同处理方式，根据实际需求选择合适工具。
vue3卡片垂直无限滚动
qq_63605379的博客
07-28 245
主要是利用css动画向上滚动，js动态计算dom上有多少条数据实时更新滚动速度。js 要在onMounted里调用确保dom已经被渲染。
基于Vue3.0+Express的前后端分离的任务清单管理系统
WwLK123的博客
07-28 204
该项目是一个待办事项管理系统，主要功能包括任务统计展示、待办事项管理、分类管理和成员管理。前端界面展示了首页任务量统计面板（总任务数、已完成/未完成数）、任务清单、分类管理和成员管理页面。系统采用Vue3+Element Plus开发，通过axios与后端API交互，实现数据动态加载和操作反馈。核心功能包含任务添加（支持项目编号、标题、分类选择、时间设置和成员分配）、分类维护和成员管理等功能，并配有表单验证和操作提示机制。
学习 java web 简单监听器
最新发布
~
07-31 97
使用Java Servlet作为后端核心，配合监听器(Listener)实现应用生命周期管理，前端采用JSP进行动态页面渲染。核心功能包括通过Servlet处理HTTP请求，利用监听器监控ServletContext、Session和Request三种作用域对象的创建销毁及属性变更，实现资源管理和业务逻辑处理。项目中MyListener类实现了多种监听器接口，可捕获对象创建销毁事件及属性变化，为系统提供完善的监控能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七灵微

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值