Vue3 + TypeScript + Vite + Echarts + DataV

最新推荐文章于 2025-06-18 18:01:06 发布

原创

最新推荐文章于 2025-06-18 18:01:06 发布 · 9.9k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #echarts #javascript #datav #vue #人工智能 #大数据

Vue3 + TypeScript + Vite + Echarts + DataV

datav

官网：

datav

datav-vue3

1、创建工程

npm create vite@latest

cd datav-app
npm install
npm run dev

2、安装项目依赖模块

npm install @types/node --save-dev

npm install vue-router@4

npm install animate.css --save
npm install gsap --save

npm install fetch --save
npm install axios --save

npm install pinia

npm install less less-loader -D
npm install sass sass-loader --save-dev
npm install scss scss-loader --save-dev

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

npm install echarts echarts-wordcloud --save
npm install @kjgl77/datav-vue3

3、配置项目

vite.config.ts

import {
   
   defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {
   
   resolve} from "node:path";

const base = 'http://140.143.190.15:8080'
// https://vitejs.dev/config/
export default defineConfig({
   
   
  plugins: [vue()],
  server: {
   
   
    host: '0.0.0.0',
    port: 5173,
    open: true,
    proxy: {
   
   
      '/api': {
   
   
        target: base,  //目标代理接口地址
        secure: false,
        changeOrigin: true,  //开启代理，在本地创建一个虚拟服务器
        PathRewrite: {
   
   
          '^/api': '/api'
        }
      }
    }
  },
})

3.1 配置路径别名

vite.config.ts

import {
    
    resolve} from "node:path";

resolve: {
    
    
    alias: {
    
    
      '@': resolve(__dirname, 'src')
    },
    // 引入文件的时候，可以忽略掉以下文件后缀
    // extensions: ['.js', '.mjs', '.vue', '.json', '.less', '.css']
  },

import {
   
   defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {
   
   resolve} from "node:path";

const base = 'http://140.143.190.15:8080'
// https://vitejs.dev/config/
export default defineConfig({
   
   
  plugins: [vue()],
  server: {
   
   
    host: '0.0.0.0',
    port: 5173,
    open: true,
    proxy: {
   
   
      '/api': {
   
   
        target: base,  //目标代理接口地址
        secure: false,
        changeOrigin: true,  //开启代理，在本地创建一个虚拟服务器
        PathRewrite: {
   
   
          '^/api': '/api'
        }
      }
    }
  },
  resolve: {
   
   
    alias: {
   
   
      '@': resolve(__dirname, 'src')
    }
  },
})

ts.config.node.json

/* 路径别名 */
"types": ["node"],
"baseUrl": ".",
"paths": {
    
    
  "@/*": ["src/*"]
}

{
   
   
  "compilerOptions": {
   
   
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,


    /* 路径别名 */
    "types": ["node"],
    "baseUrl": ".",
    "paths": {
   
   
      "@/*": ["src/*"]
    }
  },
  "include": ["vite.config.ts"]
}

3.2 引入路由

3.2.1 创建路由出口视图并在 `app.vue` 组件中引入路由出口视图

DataV.vue

<script setup lang="ts">

</script>

<template>
  <router-view/>
</template>

<style scoped>

</style>

app.vue

<script setup lang="ts">
import HelloEcharts from "@/components/DataV.vue";
</script>

<template>
  <data-v/>
</template>

<style scoped>
</style>

3.2.2 创建路由文件

router.ts

// 1. 定义路由组件.
// 也可以从其他文件导入
import {
   
   createMemoryHistory, createRouter, RouteRecordRaw} from 'vue-router'
// 2. 定义一些路由
const routes: Array<RouteRecordRaw> = [
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
   
   
  // 4. 内部提供了 history 模式的实现。
  // memory 模式。createMemoryHistory
  // hash 模式。createWebHashHistory
  // html5 模式。createWebHistory
  history: createMemoryHistory(),
  routes,
})

export default