# template-plugin-example

**Repository Path**: iBizModeling/template-plugin-example

## Basic Information

- **Project Name**: template-plugin-example
- **Description**: full-dynamic-vue 模板插件示例
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2022-10-19
- **Last Updated**: 2025-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VueR9 模板插件示例

`此示例为 VueR9 全动模板插件编写示例。包含 .vue、.tsx 写法，并已配置好打包模式。可直接发布至 npm 或者 system 模式引用。`

## 本地启动

```typescript
// 安装依赖，在项目根目录执行
pnpm i
// 本地开发
pnpm dev
```

## 生产打包

```typescript
pnpm build
```

## 本地开发外部引用

`切记只可本地开发引用，线上插件模式还是使用 system 模式`

> 插件项目

```shell
# 将本地项目设置为可外部依赖
pnpm link --global
```

> 模板主项目

```shell
# 将本地项目设置为可外部依赖
pnpm link --global "[组件包名称]"
```

> 在项目中按照标准 vue 插件引入即可。

```typescript
import { VueConstructor } from 'vue';

export default {
  install(v: VueConstructor) {
    ibiz.plugin.setDevPlugin('[组件包名称]', () => import('[组件包名称]'));
  },
};

```

## 引用静态资源文件

1. 创建global.ts文件

`文件路径: [项目根目录]/src/global.ts`

```typescript
import { PluginStaticResource } from '@ibiz-template/runtime';

const resource = new PluginStaticResource(import.meta.url);

export { resource };
```

2. index.ts入口文件第一行引入global.ts

`文件路径: [项目根目录]/src/index.ts`

```typescript
import './global';
```

3. 组件内导入global.ts的resource方法, 通过resource.dir方法引用静态资源文件

`静态资源目录路径：[项目根目录]/public`

```tsx
// 例：[项目根目录]/public/assets/img/xxx.svg
// 组件内引用方式

<img src={resource.dir('/assets/img/xxx.svg')} />
```