DataV-Vue可视化应用构建工具v1.0

DataV Vue作为专业级数据可视化开发工具，基于主流技术栈实现高效组件化开发，为开发者提供便捷的图表集成方案。

开发环境要求如下：

Vue 3.0+

Pinia 2.0+

TypeScript 4.0+

ECharts 5.0+

安装与使用

 # 初始化项目

pnpm run bootstrap

# 启动开发服务

pnpm run dev

# 构建生产版本

pnpm run build

# 本地预览需先构建

pnpm run serve

创建可视化组件

pnpm run new datav

组件配置说明

标准目录结构示例(main-title):

main-title

├── index.ts # 组件入口

└── src

├── index.vue # 组件入口

├── main-title.ts # 组件声明类

├── config.vue # 组件属性配置

└── config.json # 用于生成 config.vue 的配置文件

配置工具使用

development模式下访问http://localhost:9090/#/dev/props-config可生成config.vue和config.json文件。

当前生成工具功能说明：

// 1. 输入组件路径

// 2. 选择加载模式，有三种模式可选：

// 模式1(.ts): 使用组件同名 .ts 文件生成。

// 模式2(.json): 使用 config.json 文件生成。

// 模式3(.ts&.json): 同时加载组件同名 .ts 文件和 config.json，然后进行策略混合。

// 3. 按需配置好组件属性后，点击 `生成配置代码` 或 `生成模板代码` 按钮。

// 4. 复制生成后的代码到相应文件中即可。如果需要复杂逻辑判断的，需要在代码生成后手动处理。

组件注册流程

项目中使用组件需完成注册：

// 涉及三个文件：

// 1. 组件注册：src/components/index.ts

// 2. 组件工厂：src/components/datav.ts

// 3. 组件列表：src/data/system-components.ts

扩展创建选项

支持多种模板创建

# 创建组件

pnpm run new component

# 创建 Store

pnpm run new store

# 创建 Icon

pnpm run new icons

国际化支持

当前仅登录页实现国际化，其他页面可按需扩展。

多语言配置

语言文件目录：@/locales/lang/*.js

调用方式

Options API：

...

{{ $t('xxx') }}

...

Componsition API：

import { useI18n } from 'vue-i18n'

...

setup() {

const { t } = useI18n({ useScope: 'global' })

t('xxx')

return { t }

}

...

通过上述完整指南，开发者可快速掌握DataV Vue可视化工具的核心功能与开发流程，实现高效的数据可视化应用构建。