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

Posted 2023-02-23

【中文标题】在混合 ES/TS 项目中使用 Vue 组件

【英文标题】：Using Vue components in a mixed ES/TS project

【发布时间】：2018-03-11 20:52:00

【问题描述】：

我希望能够为 javascript 和 TypeScript 使用 Vue 文件，因此在 <script> 标记中，当 lang 未设置或设置为 js 时使用 ES2015，而当 <script lang="ts"> 使用 TypeScript 时。我有一个现有的 vue+ts 项目，现在我们决定要在用 ES6 编写的 vue-paper-dashboard 之上构建应用程序。我仍然想将我的组件保存在 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 编译器选项设置为true。我还尝试将入口文件从main.js 更改为main.ts，将entryFileIsJs: true 用于ts-loader，但无济于事。如何让 vue 单文件组件在混合 ES/TS 项目中工作？

谢谢！

【参考方案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。