快速上手

跟随以下的步骤，快速上手组件库的使用。

安装

需要同时安装 react >= 16.8 和 react-dom >= 16.8。

// npm
npm i @gingkoo/pandora

// yarn 
yarn add @gingkoo/pandora

基础使用

以 Button 组件为例。

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "@gingkoo/pandora";
import "@gingkoo/pandora/lib/umd/index.min.css";

ReactDOM.render(
  <Button type="primary">Hello Pandora</Button>,
  document.querySelector("#root")
);

按需加载

@gingkoo/pandora 的组件默认支持 tree shaking, 使用 import { Button } from '@gingkoo/pandora'; 方式引入即可按需加载。

使用 babel-plugin-import

• 安装

npm i babel-plugin-import -D

• 添加配置 组件和样式的按需加载

在 babel 配置中加入：

plugins: [
  [
    'babel-plugin-import',
    {
      libraryName: '@gingkoo/pandora',
      libraryDirectory: 'lib/es/components',
      camel2DashComponentName: false,
      style: true, // 样式按需加载
    },
  ],
];

vite 在 vite.config.js 配置中加入：

import usePluginImport from 'vite-plugin-importer';

plugins: [
  usePluginImport({
    libraryName: '@gingkoo/pandora',
    libraryDirectory: 'lib/es/components',
    style: true, // 样式按需加载
  })
]