Question

我在网上搜索了一个Vue.js + TypeScript设置的最小工作示例。像往常使用现代JavaScript堆栈一样，尽管只是在几个月前编写或依赖于非常具体的设置，但大多数这些教程要么已过时。似乎没有一个通用的，可验证的例子可以构建。

以下是我考虑过的一些资源：

我使用的基本模板是通过运行vue-cli init webpack并使用所有默认选项提供的模板。因为这会产生大量代码，所以我不会在这里粘贴所有内容。如果需要一些具体的摘录，我很乐意更新这个问题。

官方的Vue.js文档对我来说没用，因为它没有考虑使用SFC设置TypeScript。我尝试的最新版本是列表中的最后一个。我精确地遵循了设置，但它让我在npm run dev上遇到以下错误：

[tsl] ERROR in /Users/[REDACTED]/ts-test/src/main.ts(12,3)
      TS2345: Argument of type '{ el: string; router: any; template: string; components: { App: { name: string; }; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
  Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.

任何人都可以了解为什么会发生这种情况以及如何解决这个问题？更好的是，我非常欢迎有关如何使用webpack模板设置有效的Vue.js + TypeScript配置的简明，最小，一步一步的示例。

我已经成功完成了几个使用vanilla JavaScript在Vue.js中生产的客户端项目，但是这个TypeScript工具与Vue.js结合起来只会让我感到困惑。

Answer 1

我尝试将typescript与vue一起使用。我的个人意见：它不能很好地运作。由于某些vue内部不适合typescript：

vuex与this.$store.dispatch('some_action')
Vue.use，Vue.mixin以及其他类似的变异全局Vue实例的内容

但是，在进行我的研究时，我发现了这些精彩的样板：Daniel Rosenwasser的typescript-vue-tutorial和Microsoft的TypeScript-Vue-Starter。

我也尝试用vue-webpack-template自己模仿typescript：https://github.com/sobolevn/wemake-vue-template

还有一些很好的工具可以让您更好地typescript + vue工作流程：

最后我决定使用flow。如果您有兴趣，请查看this project template。

Answer 2

<强>更新

在2018年9月，应该使用TypeScript Plugin尝试新的vue-cli。

绝对同意@ sobolevn的意见。但是，有很多信息供我判断，社区对TypeScript的支持值得等待。

Vue的生态系统更多是TypeScript：

*.vue文件TypeScript lint。看看这个问题vetur。
开源生态系统。
设计中的新vue-cli。 click me

所以，如果你有时间等待，你可以暂时观察一段时间。或者，您可以参考这些项目：TypeScript-Vue-Starter和A Webpack Template Fork With Typescript Support。

Answer 3

这看起来像是最新的vue-cli模板，拥有大量明星并支持vue 2.5。

我认为我没有看到其他答案中特别提到的

vue init ducksoupdev/vue-webpack-typescript my-project

https://github.com/ducksoupdev/vue-webpack-typescript

Answer 4

使用最新版本的VueJS，可以使用Vue，Typescript和JSX创建可靠且可维护的项目。我在Vue.TSX

为初学者创建了样板

如何将TypeScript与Vue.js和单个文件组件一起使用？

4 个答案: