# @binbinji/vite-plugin-component-placeholder 中文文档

规范地址：https://npmcn.com/package/%40binbinji/vite-plugin-component-placeholder/

版本：0\.0\.15
npm 元数据更新时间：2025-12-05T11:24:23.318Z
中文译文更新时间：2026-11-08T03:06:21.690Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40binbinji/vite-plugin-component-placeholder
原文对照：https://npmcn.com/package/%40binbinji/vite-plugin-component-placeholder/?lang=original
项目主页：https://github.com/chouchouji/vite-plugin-component-placeholder
源码仓库：https://github.com/chouchouji/vite-plugin-component-placeholder

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：11.6 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2025-09-25T09:43:19.895Z
- 最新版本发布：2025-12-05T11:24:23.116Z
- 近 30 天下载量：1972（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 2 个）

## 中文简介

生成小程序组件的 Vite 插件Placeopers 配置

## 安装

```sh
npm install @binbinji/vite-plugin-component-placeholder
```

也可以使用：`pnpm add @binbinji/vite-plugin-component-placeholder`、`yarn add @binbinji/vite-plugin-component-placeholder`、`bun add @binbinji/vite-plugin-component-placeholder`

## README

# @binbinji/vite-plugin-component-placeholder

## 背景

微信小程序、支付宝小程序、抖音小程序等支持 [占位组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/placeholder.html)，但是 `uniapp` 只支持在 `pages.json` 下的页面中配置 `componentPlaceholder`， 并不支持在某个具体的组件中添加此配置，此插件旨在解决这个问题。

## 特性

-   配置简单，开箱即用
-   支持 vue、nvue、uvue 三种文件
-   支持 uni-app 和 uni-app-x 项目
-   支持 组合式 和 选项式 两种写法
-   支持 cli 项目和 hx 项目

## 安装

```shell
// npm
npm i @binbinji/vite-plugin-component-placeholder -D

// yarn
yarn add @binbinji/vite-plugin-component-placeholder -D

// pnpm
pnpm add @binbinji/vite-plugin-component-placeholder -D
```

## 使用

### 1\. 引入插件 `@binbinji/vite-plugin-component-placeholder`

```javascript
// vite.config.*
import componentPlaceholderPlugin from '@binbinji/vite-plugin-component-placeholder'
import uni from '@dcloudio/vite-plugin-uni'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni(), componentPlaceholderPlugin()],
})
```

### 2\. 在 vue/nvue/uvue 文件中添加配置

> \[!TIP\] 注意配置的 `key` 需要转换成 `kebab-case` 风格，比如你的组件名为 `TestComp`，配置应该写 `test-comp`

在 `vue` 相关文件中添加 `componentPlaceholder` 配置

#### 组合式文件

```vue
<template>
  <view>test page</view>
  <test></test>
</template>

<script setup>
import test from './test.vue'

defineOptions({
  // ifdef MP
  componentPlaceholder: {
    test: 'view',
  } 
  // endif 
})
</script>
```

#### 选项式文件

```vue
<template>
  <view>test page</view>
  <test></test>
</template>

<script>
import test from './test.vue'

export default {
  components: {
    test,
  },
  // ifdef MP
  componentPlaceholder: {
    test: 'view',
  }
  // endif 
}
</script>
```

## 配置项

插件支持以下配置选项：

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `include` | `FilterPattern` | `['**/*.{vue,nvue,uvue}']` | 指定需要处理的文件模式 |
| `exclude` | `FilterPattern` | `[]` | 指定需要排除的文件模式 |

## 许可证

[MIT](https://npmcn.com/package/%40binbinji/vite-plugin-component-placeholder/LICENSE)

## 常见问题

### @binbinji/vite-plugin-component-placeholder 是什么？

生成小程序组件的 Vite 插件Placeopers 配置

### 如何安装 @binbinji/vite-plugin-component-placeholder？

在项目目录运行 npm install @binbinji/vite-plugin-component-placeholder，或使用 pnpm add / yarn add / bun add。

### @binbinji/vite-plugin-component-placeholder 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @binbinji/vite-plugin-component-placeholder 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @binbinji/vite-plugin-component-placeholder 可以商用吗？

@binbinji/vite-plugin-component-placeholder 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @binbinji/vite-plugin-component-placeholder 的下载量有多少？

根据 npm 官方下载统计，@binbinji/vite-plugin-component-placeholder 在 2026/10/08 – 2026/11/06 这 30 天内被下载 1,972 次，日均约 66 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @binbinji/vite-plugin-component-placeholder 还在维护吗？

最新版本 0\.0\.15 发布于 2025/12/05（11 个月前）；至今共发布 13 个版本，其中过去 12 个月发布了 2 个；首次发布于 2025/09/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。