如何使用ASP.NET和Vue.js构建单页面应用并处理复杂组件

新手开发者，希望了解如何整合 WebForms 和 Vue.js 构建单页面应用

目前有一个任务是重构一个旧的报表项目。该项目的工作原理如下：

1. 将前端配置的数据库查询语句参数等信息持久化到数据库中。
2. 调用时通过 ID 从数据库中读取报表配置项，执行数据库查询，并将结果返回到前端。前端通过 jQuery 进行字符串拼接，生成整个页面并渲染。例如：
   case '分页控件': 渲染分页控件
   case '图表': 渲染 ECharts
   case '网格': 渲染表格

了解到 Vue.js 具有组件复用的特性，希望将其整合到项目中。

目前使用的技术包括：
jQuery（用于 DOM 操作和数据拼接），
ASHX（接口控制层），
ASPX（页面容器）

在其他项目中，我曾通过 直接引入 Vue.js 来处理一些简单的页面，熟悉基本的 Vue 语法。

希望了解以下几点：
1. 如果使用组件化方式开发，是否可以在 Visual Studio 2017 中高效工作（如语法提示等），还是需要切换到 VSCode？
2. 是否需要学习 Vue CLI、Vuex、Vue Router 等相关生态？作为后端开发者，报表页面虽然属于内部使用，但不属于前端的主要职责。
3. 综合来看，希望更新当前的技术栈，但不清楚具体的成本。查阅了一些资料，发现很多人推荐在 VSCode 中使用 TypeScript 和 Vue.js。TypeScript 在 VS2017 中也有较好的支持，因此考虑使用 TS + Vue。但在 VS2017 中编译 TypeScript 时遇到问题，提示找不到 tsc 文件，可能是配置有误。已按照官方教程创建了 package.json 和 tsconfig.json 文件。

package.json:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.0",
    "del": "2.2.0"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5"
  },
  "files": [
    "./app.ts"
  ],
  "compileOnSave": true
}

有经验的开发者能提供一些建议吗？非常感谢！