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

时间:2017-09-29 22:01:55

标签: typescript ecmascript-6 vue.js vuejs2 vue-component

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

<script lang="ts">

我已经将Module build failed: Error: Could not find file: 'src/components/Dashboard/Views/Overview.vue'. 编译器选项设置为true。我还尝试将条目文件从--allowJs更改为main.js,将main.ts用于ts-loader,但无济于事。如何让vue单个文件组件在混合ES / TS项目中工作?

谢谢!

1 个答案:

答案 0 :(得分:2)

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

我在这里有一个工作样本:vue-paper-dashboard-typescript

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