在 SFC 中启用 Typescript：Laravel 9 + vite + vue-loader

【问题标题】：Enable Typescript in SFC: Laravel 9 + vite + vue-loader在 SFC 中启用 Typescript：Laravel 9 + vite + vue-loader
【发布时间】：2022-07-29 08:40:42
【问题描述】：

我想以此 github 存储库为基础创建一个项目： https://github.com/suresh-ramani/laravel-vue3-vite

repo 实质上使 Laravel 9 全栈服务器端渲染应用程序能够在刀片模板文件中使用 vue3。您可以在刀片文件中挂载一个 vue3 应用程序并导入以 .vue 结尾的 SFC（单文件组件）来构建应用程序。

我想启用 Typescript 在 .VUE 文件中。我已经知道如何使用 vite 来编译一个基本的 .ts 文件了。

【问题讨论】：

标签： vue.js vuejs3 vite vue-loader

【解决方案1】：

所以我想出了自己问题的答案。为了帮助其他人，我将带您完成这些步骤。这比我想象的要容易得多。

第 1 步：安装 TypeScript

系统命令：npm install typescript

或者

Laravel 航行命令：./vendor/bin/sail npm install typescript

第 2 步：将 lang 属性添加到您的 vue 文件中

将lang="ts" 添加到您的<script> 标签

<template>
    This is a test
</template>

<script lang="ts">
export default {
    name: "App",
    mounted() {
        const message: string = "Testing 1 2 3"
        console.log(message)
    }
}
</script>

<style scoped>

</style>

【讨论】：