如何使用 Vue 3 和 Composition API 创建报告应用程序？

Vue 是一个开源的 JavaScript 前端框架，用于为网站和应用程序构建 UI。主要特点是一个增量适应性架构，专注于声明式渲染和组件组合。不久前 Vue 发布了新版本——Vue 3。更新后的框架有一些新特性，特别是Composition API。

方法：在本文中，我们将使用 Vue 3 和 Composition API 创建一个报告应用程序。对于一个项目，我们将使用 Flexmonster Pivot Table & Charts 和高图库，因为它们与 Vue 3 集成。Flexmonster 团队在 GitHub 上创建了一个特殊的示例项目，您可以在其中检查他们的组件在 2 和 3 版本中的使用情况Vue.js 以及高图集成。该项目还包含 Composition 和 Options API 的使用示例。

首先，我们将通过输入 CLI 命令创建 Vue 项目。然后我们将在网页中添加一个 Flexmonster 实例，将其连接到图表库，然后添加图表。

现在让我们看看如何在 Vue 3 中创建应用程序的分步实现。

先决条件：要使用 Vue，您需要 Node.js 和 npm。要检查它们在您的机器上的存在，请在命令行中运行以下命令：

node -v
npm -v

如果它们不存在，请安装它们。

使用此命令安装 Vue CLI：

npm install -g @vue/cli

另一个必需的工具是 Flexmonster CLI。您可以使用 npm 安装它：

npm install -g flexmonster-cli

然后通过 npm 安装高图 ：

​​npm i --save vue3-highcharts

第 1 步：创建一个简单的 Vue 应用程序。

vue create first-project
cd first-project

在此之后，您将能够为您的项目选择一个预设。我们将选择默认的。

项目结构应如下所示：

第 3 步：通过在package.json 文件夹中运行此 CLI 命令来安装 Flexmonster Vue 模块。

flexmonster add vue-flexmonster

现在将在本地注册vue-flexmonster 。为此，我在需要数据透视表的组件的