typescript - 在混合 ES/TS 项目中使用 Vue 组件

Question

我希望能够为 JavaScript 和 TypeScript 使用 Vue 文件，所以在 <script>标记时 lang未设置或设置为 js然后使用 ES2015，当 <script lang="ts"> 时使用 typescript 。我有一个现有的 vue+ts 项目，现在我们决定要在 vue-paper-dashboard 之上构建应用程序这是用 ES6 编写的。我仍然想将我的组件保留在 TS 和 .vue 中带有 <script lang="ts"> 的文件.所以从空的仪表板项目开始，用 TS/TSLint 替换 Babel/ESLint。项目仍然可以正常加载:vue-paper-dashboard-typescript , 然而, 当在任何 .vue我设置的文件 <script lang="ts">我收到如下错误:

Module build failed: Error: Could not find file: 'src/components/Dashboard/Views/Overview.vue'.

我已经设置了--allowJs编译器选项为真。我还尝试从 main.js 更改条目文件至 main.ts , 二手 entryFileIsJs: true对于 ts-loader，无济于事。如何让 vue 单文件组件在混合 ES/TS 项目中工作？

谢谢!

Answer 1

我想我找到了解决办法。出于某种原因，它在我第二次尝试将入口点从 main.js 更改为 main.ts 并在 ts 文件中进行必要的修复以进行编译时起作用。

我这里有一个工作示例:vue-paper-dashboard-typescript

---

更新:Creative-Tim 现在提供Vue Paper Dashboard 2 Pro (不是免费的)它使用支持 TypeScript 的 CLI 3。使用以下命令向项目添加 TS 支持:vue add @vue/typescript。