VueR9 模板插件示例

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

本地启动

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

生产打包

pnpm build

本地开发外部引用

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

插件项目

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

模板主项目

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

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

import { VueConstructor } from 'vue';

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

引用静态资源文件

1. 创建global.ts文件

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

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

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

export { resource };

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

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

import './global';

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

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

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

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