单个插件
单个插件目录和文件的说明。
目录结构分两部分
- 静态资源:
./public/plugins/pluginA/*
- 代码资源:
./src/plugins/pluginA/*
`icegl-three-vue-tres`
├── **** // 项目其他文件,这里不做描述,详细说明见:[基础/项目目录]
├── public
├── plugins // 插件内所依赖的静态资源
├── pluginA // 插件名为:pluginA的静态资源
├── image // 图片
├── model // 模型
├── preview // 菜单预览图
└── ***** // 其他类型的资源
└── pluginB // 插件名为:pluginsB的静态资源
└── src
├── **** // 项目其他文件,这里不做描述,详细说明见:[基础/项目目录]
├── plugins // 插件目录 -- 只在预览模式下自动包含的文件和路由,项目模式下则只包含所依赖的
├── pluginA // 插件名为:pluginA的代码文件
├── common // 插件通用js / ts类
├── components // 插件通用vue组件
├── lib // 插件使用的其他库函数
├── shaders // 插件使用的着色器文件
├── stores // 插件使用的状态管理类
└── pages // 插件通用页面 -- 在预览模式自动把此目录下所有vue文件加入到默认路由中
└── index.vue // 插件调试下的index.vue文件
├── index.js // 插件的暴露的组件
└── config.js // 插件的配置文件 描述见下个小节
└── pluginB // 插件名为:pluginsB的代码文件
└── preview.vue // 预览模式下的首页vue文件
插件暴露组件 index.js
每个插件除了,有自己的应用场景,在各个pages目录下的路由展示外。还会暴露出来一些通用组件,供其他插件或者场景使用。具体如下:
// floor 案例目录中的index.js
import reflectorDiffuse from './components/reflectorDiffuse.vue'
import reflectorDUDV from './components/reflectorDUDV.vue'
import reflectorShaderMesh from './components/reflectorShaderMesh.vue'
import reflectorMipMap from './components/reflectorMipMap.vue'
import whiteFloorMesh from './components/whiteFloorMesh.vue'
import gridPlus from './components/gridPlusCom.vue'
import videoFloor from './components/videoFloor.vue'
export { reflectorDiffuse, reflectorDUDV, reflectorShaderMesh, reflectorMipMap, whiteFloorMesh, gridPlus, videoFloor }
//暴露出这么多种 地板组件。那么在别的插件或者场景中,如何使用呢?
// .src/plugins/simpleGIS/pages/streamLines.vue 文件中这样引用
<template>
<TresCanvas clearColor="#201919" window-size>
<Suspense>
<reflectorDUDV :position="[0, -0.5, 0]"/>
</Suspense>
</TresCanvas>
</template>
<script setup lang="ts">
import { reflectorDUDV } from 'PLS/floor'
// `PLS` 我们这里做了简写 实际上就是`./src/plugins/`
</script>
插件配置 config.js
每个插件都包含了自己的描述文件config.js
,具体如下:
export default {
"name": "AAA", // 插件的唯一标识 英文
"title": "插件名", // 插件的中文名称
"intro": "插件描述", // 插件的描述
"version": "0.0.1", // 插件的版本
"author": "作者", // 插件的作者
"website": "www.xxx.com", // 插件的网站
"state": "active", // 状态
"creatTime": '2024-08-09', // 创建时间
"updateTime": '2024-08-10', // 更新时间
"require": ['resourceManager'],// 此插件所以依赖得其他案例/插件的资源,启动时会进行依赖检查
"tvtstore": 'FREE', // 类型:FREE:免费、LISENCE:收费、LOCAL:本地自建(若无此项则为案例中心的)
"preview": [ // 预览的菜单
{ "src": "plugins/AAA/preview/a.png", "type": "img", "name": "a", "title": "名"
"disableFPSGraph": false, // 是否禁用fps图示
"disableSrcBtn": false, // 是否禁用源码跳转按钮
},
]
}
只要展示单个插件
在实际的项目开发中我们也经常遇到同学只想展示单个案例或者插件情况。那么下面分两种方式:
普通dev,首页引用
# 直接使用 自己构建项目
yarn dev #调试
yarn build #打包
那么只需要把对应插件的路由页的.vue文件 引入到src/pages/index.vue
即可,详情请阅读: 单个插件/案例在普通项目模式下的展示方法
单插件/案例的自动化处理
可能插件会有好几个路由页面,那么此方法可以展示单个插件/案例,以及自动化打包后删除不需要的资源文件
# 若您只想针对一个案例/插件进行调试,请使用如下命令
yarn pre.dev.one #它只展示某一个案例/插件
# 若您只想针对一个案例/插件进行打包,请使用如下命令
yarn pre.build.one #它针对某一个案例/插件打包,会根据配置下的依赖插件项保留资源,其余资源删除
- 配置文件_1处:
.env.predev.one
中的FES_APP_PLSNAME='xxx'
对应的打包插件名 - 配置文件_2处:
src\plugins\xxx\config.js
中的require: ['UIdemo','industry4']
xxx插件对应依赖的案例/插件名称