pd-design/README.md

产品组件库

# pd-design

## 使用包管理器

**我们建议您使用包管理器（如 NPM、Yarn 或 pnpm）安装 pd-design**

```
# 选择一个你喜欢的包管理器
# NPM
$ npm install pd-design --save

# Yarn
$ yarn add pd-design

# pnpm
$ pnpm install pd-design

```

## 完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便,但你需要提前下载好相关组件的依赖。

```ts
// main.ts
import { createApp } from "vue";
import PdDesign from "pd-design";
import "pd-design/dist/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(PdDesign);
app.mount("#app");
```

## 按需引入 ⭐️

1、您需要使用额外的插件来导入要使用的组件。

首先你需要安装`unplugin-vue-components`

```shell
pnpm add  unplugin-vue-components -D
```

2、复制该解析器

```ts
const PdDesignResolver = () => {
    return {
        type: "component" as const,
        resolve: (name) => {
            if (name.startsWith("Pd")) {
                const pathName = name.slice(2).toLowerCase();
                return {
                    importName: name,
                    from: "pd-design",
                    path: `pd-design/lib/components/${pathName}/index.js`,
                    sideEffects: `pd-design/lib/components/${pathName}/${name.slice(2)}.css`,
                };
            }
        },
    };
};
```

3、在`unplugin-vue-components`引用该解析器

```ts
// vite.config.ts
import Components from "unplugin-vue-components/vite";
import { PdDesignResolver } from "xxxx-你存储PdDesignResolver的文件";

export default defineConfig({
    // ...
    plugins: [
        Components({
            //...
            resolvers: [PdDesignResolver()],
        }),
    ],
});
```

## 手动导入

`pd-design` 提供了基于 ES Module 的开箱即用的`Tree Shaking` 功能。

但你需要加载该插件vite-plugin-import，解决本地开发时的动态加载、代码如下：

```ts
export default function importPlugin() {
    const regStr = /(?<!\/\/.*|\/\*[\s\S]*?\*\/\s*)import\s*{\s*([^{}]+)\s*}\s*from\s*['"]pd-design['"]/g;
    return {
        name: "vite-plugin-import",
        enforce: "pre",
        transform: (code: string, id: string) => {
            if (id.endsWith(".vue")) {
                const str = code.replaceAll(regStr, (match, imports) => {
                    const list = imports.split(",");
                    const pathList: string[] = [];
                    list.forEach((item: string) => {
                        item = item.trim();
                        const name = item.slice(2).charAt(0).toLowerCase() + item.slice(3);
                        const str = `import ${item.trim()} from 'pd-design/es/components/${name.trim()}';
                        import 'pd-design/es/components/${name.trim()}/${item.trim().slice(2)}.css'`;
                        pathList.push(str);
                    });
                    return pathList.join(";");
                });
                return str;
            }
            return code;
        },
    };
}
```

::: warning
exclude中必须排除pd-design、因为 pd-design 存在第三方包，vite预加载会报错、当然如果已安装了pd-design所有组件需要的包、则不需要做该处理
:::

```ts{7}
// vite.config.ts
import Components from "unplugin-vue-components/vite";
import ViteImportPlugin from "./src/utils/vite-plugin-import";

export default defineConfig({
    optimizeDeps:{
        exclude: ["pd-design"],
    },
  // ...
  plugins: [
     ViteImportPlugin(),
  ],
})

```

## 关于Webpack构建的项目

支持`完整引入`和`按需导入`，但`手动导入`需要自行配置`babel-plugin-import` 详情见[文档](https://www.npmjs.com/package/babel-plugin-import)