组件库自定义组件|青训营笔记

问题

什么是组件？

• 组件（Component）是指一种可重用的独立部件，通常具有一个明确定义的接口和可以在不同上下文中使用的明确定义的行为
• 常见的组件包括库、模块、对象、类、函数、服务、插件等

什么是组件库？

• 组件库（Component Library），也称为 UI 库（UI Library）或 UI 组件库，是一种可重用的组件集合
• 通常包含了一系列已经设计好的用户界面组件，如按钮、文本框、下拉菜单、表格等等
• 组件库的目的是为开发人员提供可重用的、易于定制和扩展的界面组件，以减少开发时间和提高开发效率

---

react 组件库

arco-design

简单介绍

1. 首先是很醒目的logo
2. 支持vue和react
3. 和以往用的一样的开发指南，以及使用方法

特别的

1. 这是一个button组件的页面，右下角可以看到

1. 你可以查看代码
2. 复制代码
3. 支持在codepen中打开
4. 支持在codesandbox中打开

1. 搜索框的内容也可以让你很轻易的看到你想要的

---

引入组件库

babel-plugin-import

按需引入

同样可以使用CDN直接引入

---

更改less变量

主题色，基础配色

在 webpack 或是 less 文件里面直接修改引入

arco-pro

• Arco Design Pro 是基于 Arco Design 组件库的一款企业级 UI 解决方案，提供了更加完整和丰富的组件和功能，可以快速构建高质量的企业级 Web 应用程序

1. 安装 Arco Design Pro

可以通过 npm 或 yarn 安装 Arco Design Pro：

npm install arco-design-pro

yarn add arco-design-pro

2. 引入组件

在需要使用组件的地方引入组件，例如：

import { Button } from 'arco-design-pro';

3. 使用组件

通过组件的 props 和插槽来传递数据和自定义样式，例如：

<template>
  <Button type="primary" icon={<Icon type="check" />}>确定</Button>
</template>

如何按需导入？

1. 配置 babel.config.js

在项目根目录下创建 babel.config.js 文件，并配置如下：

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'arco-design-pro',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  ],
};

2. 使用按需导入的组件

在需要使用组件的文件中，按需导入需要使用的组件即可，例如：

import { Button } from 'arco-design-pro';

3. 需要注意的是，如果设置了 style: true，则在引入组件的同时也会自动引入对应的样式文件。如果不需要自动引入样式文件，可以将 style 设置为 false，然后手动引入样式文件，例如：

import 'arco-design-pro/dist/style.css';

主题包直接引入