Visual Studio 代码：初始 VueJS 设置找不到模块“@/..”

Question

如您所知，@ 是/src 的占位符，如果我使用它，应用程序可以正常编译和运行。但我的 VSCode 认为该模块不存在并向我显示错误消息：

问题 1：如何教 VSCode 如何查找模块？

类似的情况如下：

export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}

IDE有两个错误（应用程序编译运行正常）：

1) !: 带有红色下划线 -> 预期表达式

2) string 带有红色下划线 -> 成员 'string' 隐含地具有 'any' 类型。

但这些并不是真正的错误，这是正常的语法，VSCode 无法处理。 Vetur Extension (Vue Tooling for VSCode) 已安装。

问题 2：VSCode 中的 Vue + TypeScript 到底该如何处理？我必须考虑什么（全部）？

Answer 1

正在导入*.svg

VS Code 不知道如何自行导入svg 文件。要解决此问题，请将.d.ts 文件添加到项目的根目录，其中包含：

declare module '*.svg' {
  const content: any;
  export default content;
}

我发现将此声明添加到src/shims.d.ts 不起作用。它仅在在项目根目录创建.d.ts 文件时才有效（例如，<root>/index.d.ts）。

Expression expected错误

这来自 Vetur 0.11.7，它使用不支持 definite assignment assertions 的旧 TypeScript 版本，在 TypeScript 2.7 中引入。 (vuejs/vetur Issue #723)

Vetur 0.11.8 Preview 通过更新到较新版本的 TypeScript 解决了这个问题，但这还没有发布，所以你必须 install the VSIX manually。 IMO 最简单的方法是使用 VS Code 的 Extensions 视图中的命令下拉菜单来安装下载的 vetur-0.11.8.vsix。 修复程序可在 Vetur 0.12.1 中找到，它可从 VS Code 的 Extensions 视图安装。