引入外部依赖集成示例

1、package.json引入相关依赖
“@dataview/engine”: “2.0.0-beta.7”,
“@dataview/plugin-tech”: “1.0.0-beta.1”,
Engine为引擎，plugin-tech为Dataview中的科技风元件，若不引入会造成使用了科技风元件的页面无法正确渲染。引入后，重新执行npm run init，进行依赖更新。
2、vite.config.js定义别名
resolve: {
alias: {
‘@’: path.resolve(__dirname, ‘src’),
‘vue-i18n’: ‘vue-i18n/dist/vue-i18n.cjs.js’,
‘@components’: ‘@robot/components/lib/components.es.js’,
‘@engine’: ‘@dataview/engine/lib/engine.es.js’,
‘@plugin-tech’: ‘@dataview/plugin-tech/lib/plugin-tech.es.js’,
}
},
3、main.js注册组件
import { dvBaseUrl, dvProject, dvTimeout } from ‘./config’
import Engine from ‘@engine’
import Plugin from ‘@plugin-tech’
import ‘@dataview/engine/lib/index.css’
import ‘@dataview/plugin-tech/lib/index.css’
// 引入dataview/engine
app.use(Engine, {
timeout: dvTimeout ? dvTimeout : 90000,
proxyTimeout: dvTimeout ? dvTimeout : 90000,
baseUrl: dvBaseUrl,
project: dvProject
})

// 引入dataview科技风扩展组件
app.use(Plugin, {
props: true
})

这里的dvBaseUrl, dvProject, dvTimeout如何定义及在哪里定义会在下面讲到。
4、增加Page渲染Dataview页面
Page.vue中引入Dataview引擎：
import { Render } from ‘@engine’
中使用引擎：
<render ref=“render” :layout-id=“layoutId” :data=“contextData” @loaded=“handleLoaded” @dialog=“handleDialogRequest” @request=“handleRequest” @open=“onOpenNewWindow”> {{ $t(‘page.errorPage’) }}

实例创建完成后（created）运行initOrigin方法，监测跳转路由，是否携带布局编号，若无则为固定页面，若有则为Dataview动态页面，则该页面将用DV引擎来渲染。
initOrigin(origin) {
if (!origin) {
console.warn(‘布局编号不能为空’)
this.layoutId = ‘’
return
}
if (origin.includes(‘/’)) {
this.isDynamicPage = false
this.origin = origin
} else {
this.isDynamicPage = true
this.layoutId = origin
}
},
路由监测，本项目固定菜单有三个，分别为device、monitor、control，其余路由皆为动态页面，跳转Page组件使用DV引擎渲染：
import Page from ‘…/views/page/Page.vue’

const router = createRouter({
history: createWebHistory(BASE_ROUTE),
routes: [
{ path: ‘/’, redirect: ‘/home’ },
{ path: ‘/login’, component: Login, meta: { authPage: true }},
{ path: ‘/home’,
component: Home, children: [
{ path: ‘’, component: () => import(‘@/views/device/Device.vue’) },
{ path: ‘/device’, component: () => import(‘@/views/device/Device.vue’) },
{ path: ‘/monitor’, component: () => import(‘@/views/monitor/Monitor.vue’) },
{ path: ‘/control’, component: () => import(‘@/views/control/Control.vue’) },
{ path: ‘/:catchAll(.)', component: Page }
]
},
{ path: '/:catchAll(.)’, component: NotFound },
]
})
5、DV相关配置项
public/wcs.js定义DV相关配置项：
// DV通用配置
window.DV = {
// server: isDev ? ‘//10.114.46.136:8080’ : ‘’,
server: isDev ? ‘//10.114.46.134:9194’ : ‘’,
base: ‘/dataview’,
project: ‘wms’,
isDev: isDev,
timeout: 90000, // dataview相关数据源请求及代理请求超时时间
}
src/config.js中暴露项目常量配置：
export const dvBaseUrl = DV ? DV.server + DV.base : ‘’ // DataView地址
export const dvTimeout = DV && DV.timeout > 0 ? DV.timeout : 90000
export const dvProject = DV && DV.project ? DV.project : ‘*’
如此，上述main.js中便能获取到相关配置。