手动搭建一个Vue3项目，使用到其中的技术（Vue3、Vite、TypeScript、Ant-Design-Vue4、Pinia等），并集成ECharts图表

最新推荐文章于 2025-04-01 10:27:50 发布

南北极之间

最新推荐文章于 2025-04-01 10:27:50 发布

阅读量911

点赞数 22

分类专栏：前端开发文章标签： typescript echarts vue.js vue3 ts vite anti-design-vue

本文链接：https://blog.youkuaiyun.com/qq_22182989/article/details/145056689

版权

前端开发专栏收录该内容

601 篇文章

订阅专栏

效果图

手动搭建一个Vue3项目，使用到其中的技术（Vue3、Vite、TypeScript、Ant-Design-Vue4、Pinia等），并集成ECharts图表。以下是详细的步骤：

1. 安装开发环境

1.1 安装 Node.js 和包管理工具

下载并安装 Node.js 20+，建议版本为 20.15.0 或以上。
- Node.js 下载链接
安装 pnpm 包管理工具：
```
npm install -g pnpm
```
确保安装成功，运行以下命令检查版本：
```
node -v
pnpm -v
```

2. 创建 Vue3 项目

2.1 使用 Vite 初始化项目

使用 Vite 创建一个 Vue3 项目：
```
pnpm create vite@latest my-vue3-project --template vue-ts
```
- my-vue3-project 是项目名称，--template vue-ts 指定使用 TypeScript 模板。
进入项目目录：
```
cd my-vue3-project
```
安装依赖：
```
pnpm install
```

3. 集成必要技术栈

我们需要逐一集成以下功能：

3.1 安装依赖库

安装 Ant-Design-Vue 和 Vue Router：
```
pnpm add ant-design-vue vue-router@4
```
安装状态管理工具 Pinia：
```
pnpm add pinia
```
安装 ECharts 图表库：
```
pnpm add echarts
```
安装其他实用工具库（如 Axios、VueUse）：
```
pnpm add axios @vueuse/core
```

3.2 配置项目

3.2.1 配置 Ant-Design-Vue

在项目中引入 Ant-Design-Vue 组件库，编辑 main.ts：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);
app.use(router);
app.use(createPinia());
app.use(Antd);
app.mount('#app');

3.2.2 配置 Vue Router

在项目根目录下创建 src/router/index.ts 文件：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/chart',
    name: 'Chart',
    component: () => import('../views/Chart.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

在 src 文件夹中创建 views 文件夹，并添加页面文件 Home.vue 和 Chart.vue。

3.2.3 集成 ECharts

在 src/views/Chart.vue 中使用 ECharts：

<template>
  <div>
    <h1>ECharts 示例</h1>
    <div ref="chartRef" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'Chart',
  setup() {
    const chartRef = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartRef.value) {
        const myChart = echarts.init(chartRef.value);
        const option = {
          title: { text: 'ECharts 示例' },
          tooltip: {},
          xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10],
            },
          ],
        };
        myChart.setOption(option);
      }
    });

    return { chartRef };
  },
});
</script>

<style scoped>
div {
  text-align: center;
}
</style>

在 src/router/index.ts 中配置路由，访问 /chart 即可查看 ECharts 页面。

3.2.4 配置 Pinia 状态管理

创建 src/stores/main.ts：

import { defineStore } from 'pinia';

export const useMainStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

在组件中使用：

<script lang="ts">
import { defineComponent } from 'vue';
import { useMainStore } from '@/stores/main';

export default defineComponent({
  setup() {
    const store = useMainStore();

    return { store };
  },
});
</script>

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <button @click="store.increment">Increment</button>
  </div>
</template>

4. 配置 Vite 环境变量

编辑项目根目录下的 .env.development 文件：

VITE_PROXY=[["/api","http://localhost:8080/api"]]
VITE_GLOB_DOMAIN_URL=http://localhost:8080

配置 Vite 的代理，在 vite.config.ts 中添加：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
});