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

Visual Studio Code: Initial VueJS setup cannot find module "@/.."

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

问题1:如何教VSCode如何找到模块?

类似情况如下:

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

IDE 中有两个错误(当应用程序正确编译和运行时):

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

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

但这些并不是真正的错误,那是正常的语法,VSCode 无法处理它。 Vetur 扩展(VSCode 的 Vue 工具)已经安装。

问题 2:如何在 VSCode 中处理 Vue + TypeScript?我必须考虑什么(全部)?

导入*.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, introduced in TypeScript 2.7. (vuejs/vetur Issue #723)

的旧 TypeScript 版本

Vetur 0.11.8 Preview 通过更新到较新版本的 TypeScript 解决了这个问题,但这还没有发布,所以你必须 install the VSIX manually. The simplest method IMO is to use the command drop-down from VS Code's Extensions view to install the downloaded vetur-0.11.8.vsix. The fix is available in Vetur 0.12.1,它是可安装的来自 VS Code 的 Extensions 视图。