腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

DataV Vue 可視化應(yīng)用搭建工具 v1.0

應(yīng)用搭建工具

投訴報(bào)錯(cuò)

源碼大?。?span>1.06MB
源碼語(yǔ)言：簡(jiǎn)體中文
源碼類(lèi)型：國(guó)產(chǎn)軟件
源碼授權(quán)：免費(fèi)軟件
源碼類(lèi)別：其它源碼
應(yīng)用平臺(tái)：TypeScript
更新時(shí)間：2022-11-30
網(wǎng)友評(píng)分：

360通過(guò) 騰訊通過(guò) 金山通過(guò)

1.06MB

詳情介紹

DataV Vue是一款數(shù)據(jù)可視化應(yīng)用搭建工具。

開(kāi)發(fā)環(huán)境：

Vue 3.0+

Pinia 2.0+

TypeScript 4.0+

ECharts 5.0+

安裝與使用

# 初始化項(xiàng)目
pnpm run bootstrap

# 跑起來(lái)！
pnpm run dev

# 構(gòu)建發(fā)布
pnpm run build

# 本地預(yù)覽，需要先執(zhí)行 build
pnpm run serve

新建可視化組件

pnpm run new datav

配置可視化組件

目錄結(jié)構(gòu) (如: main-title):

main-title
├── index.ts # 組件入口
└── src
├── index.vue # 組件入口
├── main-title.ts # 組件聲明類(lèi)
├── config.vue # 組件屬性配置
└── config.json # 用于生成 config.vue 的配置文件

使用工具

其中 config.vue 和 config.json 文件，可以在 development 模式下，通過(guò)訪問(wèn) http://localhost:9090/#/dev/props-config 配置生成。

目前還是個(gè)簡(jiǎn)易版生成工具，使用說(shuō)明：

// 1. 輸入組件路徑

// 2. 選擇加載模式，有三種模式可選：
// 模式1(.ts): 使用組件同名 .ts 文件生成。
// 模式2(.json): 使用 config.json 文件生成。
// 模式3(.ts&.json): 同時(shí)加載組件同名 .ts 文件和 config.json，然后進(jìn)行策略混合。

// 3. 按需配置好組件屬性后，點(diǎn)擊 `生成配置代碼` 或 `生成模板代碼` 按鈕。

// 4. 復(fù)制生成后的代碼到相應(yīng)文件中即可。如果需要復(fù)雜邏輯判斷的，需要在代碼生成后手動(dòng)處理。
使用組件

想要在項(xiàng)目中使用組件還需要進(jìn)行注冊(cè)：

// 涉及三個(gè)文件：
// 1. 組件注冊(cè)：src/components/index.ts
// 2. 組件工廠：src/components/datav.ts
// 3. 組件列表：src/data/system-components.ts

更多新建選項(xiàng)

通過(guò)選項(xiàng)模式

# 創(chuàng)建組件
pnpm run new component

# 創(chuàng)建 Store
pnpm run new store

# 創(chuàng)建 Icon
pnpm run new icons

國(guó)際化

目前只有登錄頁(yè) 進(jìn)行了國(guó)際化設(shè)置，有需要可自行添加。

添加多語(yǔ)言

多語(yǔ)言文件位置：@/locales/lang/*.js

使用

Options API：

<template>
...
{{ $t('xxx') }}
...
</template>

Componsition API：

import { useI18n } from 'vue-i18n'

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

t('xxx')

return { t }
}
...

DataVVue 應(yīng)用搭建工具

下載地址

下載錯(cuò)誤？【投訴報(bào)錯(cuò)】