在 Vue 框架中集成纯前端报表设计器 vue.js

创建 Vue应用
创建 Vue 应用的最简单的方法是使用Vue CLI
vue create -p default arjs-vue-designer-app
安装 ActiveReportsJS 相关文件
Web 报表设计器功能是放在@grapecity/activereports-vue NPM 包中，@grapecity/activereports npm 包中存放核心功能。在使用 ActiveReportsJS 时，可以执行以下命令来安装在应用根目录下：

npm install @grapecity/activereports-vue @grapecity/activereports

或者使用yarn命令

yarn add @grapecity/activereports-vue @grapecity/activereports

如果您使用的是 Vue 2.0, 需要安装@vue/composition-api 包：
npm install @vue/composition-api
或
yarn add @vue/composition-api
将 ActiveReportsJS报表添加到应用程序
ActiveReportsJS 使用 JSON格式和rdlx-json扩展用于报表模板文件。在应用程序的public文件夹下，创建名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。

{ "Name": "Report", "Body": { "ReportItems": [ { "Type": "textbox", "Name": "TextBox1", "Value": "Hello, ActiveReportsJS Designer", "Style": { "FontSize": "18pt" }, "Width": "8.5in", "Height": "0.5in" } ] } }

添加设计器宿主元素
打开 src\App.vue 文件，添加代码如下，单文件组件调用 Vue 报表设计器来加载上一步骤创建的报表模板

#designer-host { width: 100%; height: 100vh; }

【在 Vue 框架中集成纯前端报表设计器】以上代码是初始化报表设计器示例，需要注意的是宿主元素ID 一定要可用。
运行项目
使用npm run serve或 yarn serve 命令运行应用。 ActiveReportsJS 设计器控件就会出现在页面中，可以做一些基本的控件添加，修改，数据绑定等操作来测试设计器的功能。