使用 Vue CLI创建项目
vue create -p default arjs-vue-viewer-app安装 ActivereportsJS npm 包可通过安装@grapecity/activereports-vue npm 包来安装activereports vue相关的文件。 @grapecity/activereports 包提供了核心功能。
在项目的根目录下执行以下命令：
npm install @grapecity/activereports-vue使用 yarn 命令：
yarn add @grapecity/activereports-vue如果是 Vue 2.0 安装 @vue/composition-api 包：
npm install @vue/composition-api或执行 yarn 命令
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 Viewer", "Style": { "FontSize": "18pt" }, "Width": "8.5in", "Height": "0.5in" } ] }}添加 Vue 报表 Viewer 控件打开 srcApp.vue 文件，并修改代码如下：
import { Viewer } from "@grapecity/activereports-vue";export default { name: "App", components: { JSViewer: Viewer, },};#viewer-host { width: 100%; height: 100vh;}运行与调试使用 npm run serve 或 yarn serve 命令查看执行结果，使用 npm start 或 yarn start 命令运行项目，如果编译失败了并提示JavaScript堆内存不足，这种情况下打开package.json 文件，并替换serve脚本中的代码如下，然后重新执行命令npm run serve 或 yarn serve：
node --max_old_space_size=8192 ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve相关