【使用vite创建echarts项目】

创建项目

pnpm create vite chinabuilder-vue

环境变量

开发环境
.env.development

NODE_ENV=development

VITE_APP_TITLE=ZongLiaTools开发环境

VITE_SERVE=http://localhost:8080/

VITE_APP_BASE_API=/api

生产环境
.env.production

NODE_ENV=production

VITE_APP_TITLE=ZongLiaTools生产环境


VITE_SERVE=http://xxx.xxx.xxx.xxx:18080/

VITE_APP_BASE_API=/api

配置 @ 作为 src 目录的别名

Vite 配置文件中出现 找不到名称"path" 的错误,是因为 ​未正确引入 Node.js 的 path 模块,且 ​TypeScript 缺乏 Node.js 类型声明。
Vite 配置文件运行在 Node.js 环境下,所以需要 @types/node 提供类型支持:

pnpm add -D @types/node

vite.config.ts

import {
   
    defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig(({
   
    mode }) => {
   
   

  const env = loadEnv(mode, process.cwd())// 根据 mode 加载对应的 .env 文件

  return {
   
   
    plugins: [vue()],
    resolve: {
   
   
      alias: {
   
   
        '@': path.resolve(__dirname, 'src') // 让 @ 代表 src 目录
      }
    },
  }
})

tsconfig.app.json

 "compilerOptions": {
   
   
	......
    // 配置别名
    "baseUrl": ".",
    "paths": {
   
   
      "@/*": ["src/*"]
    }
  },

让 TypeScript 能够识别 .vue 文件的导入

vite-env.d.ts

/// <reference types="vite/client" />

// 声明所有 .vue 文件
declare module '*.vue' {
   
   
    import {
   
    DefineComponent } from 'vue'
    const component: DefineComponent<{
   
   }, {
   
   }, any>
    export default component
}

使用 Vue Router 来管理应用的路由

pnpm add vue-router

在 src/router文件夹下,创建 index.ts 文件

import {
   
    createWebHistory, createRouter } from "vue-router";

/* Layout */
export const Layout = () => import("@/layout/index.vue");

// 公共路由
export const constantRoutes = [

    // 首页
    {
   
   
        path: "/",
        component: Layout,
        redirect: "/index",
        children: [
            {
   
   
                path: "index",
                component: () => import("@/views/index.vue"),
                name: "Index",
                meta: {
   
    title: "首页", icon: "dashboard", affix: true }
            }
        ]
    },
];

// 动态路由,基于用户权限动态去加载
export const dynamicRoutes = [

];

const router = createRouter({
   
   
    history: createWebHistory(),
    routes: constantRoutes,
    // 刷新时,滚动条位置还原
    //scrollBehavior: () => ({ left: 0, top: 0 }),
    scrollBehavior(to, from, savedPosition) {
   
   
        if (savedPosition) {
   
   
            return savedPosition;
        } else {
   
   
            return {
   
    top: 0 };
        }
    },
});

export default router;

配置主应用(App.vue)
路径: src/App.vue

<template>
  <div id="app">
    <router-view /> <!-- 用于显示路由组件 -->
  </div>
</template>

<script setup>

</script>

在 main.ts 中挂载路由
路径: src/main.ts

import {
   
    createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由

const app = createApp(App)

app.use(router) // 使用路由

app.mount('#app')

集成sass

pnpm 
在Vue 3项目使用ViteECharts GL,可以按照以下步骤进行: 1. **创建Vue 3项目**: 首先,确保你已经安装了Node.js和npm。然后使用Vite创建一个新的Vue 3项目: ```bash npm init vite@latest my-vue-app -- --template vue cd my-vue-app npm install ``` 2. **安装EChartsECharts GL**: 安装EChartsECharts GL: ```bash npm install echarts echarts-gl ``` 3. **配置Vue组件**: 在项目创建一个新的Vue组件,例如`EChartsGL.vue`,并添加以下代码: ```vue <template> <div ref="chart" style="width: 100%; height: 600px;"></div> </template> <script setup> import * as echarts from 'echarts'; import 'echarts-gl'; import { ref, onMounted } from 'vue'; const chart = ref(null); onMounted(() => { const myChart = echarts.init(chart.value); const option = { // ECharts GL的配置项 // 例如,创建一个3D散点图 xAxis3D: { type: 'value' }, yAxis3D: { type: 'value' }, zAxis3D: { type: 'value' }, grid3D: {}, series: [{ type: 'scatter3D', data: [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] }] }; myChart.setOption(option); }); </script> <style scoped> div { width: 100%; height: 600px; } </style> ``` 4. **在主应用中使用组件**: 在`main.js`中引入并使用该组件: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import './index.css'; createApp(App).mount('#app'); ``` 在`App.vue`中使用该组件: ```vue <template> <div id="app"> <EChartsGL /> </div> </template> <script setup> import EChartsGL from './components/EChartsGL.vue'; </script> ``` 5. **运行项目**: 启动开发服务器: ```bash npm run dev ``` 现在,你可以在浏览器中看到ECharts GL的3D散点图了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值