拆分组件的文件（使用打字稿）

大佬教程收集整理的这篇文章主要介绍了拆分组件的文件（使用打字稿），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决拆分组件的文件（使用打字稿）？

我们的团队正在为前端部分启动一个基于 Vue 3 的新项目。

我们决定使用 TypeScript 并希望使用文件分离方法。 我们在文档中发现 this article 显示了一个示例来实现这一点。不幸的是，这个例子没有展示如何使用 TypeScript 实现这一点。

我们试过这种方式

/components
┗ /SIDebarBtn
  ┣ sIDebar-btn.sCSS
  ┣ sIDebar-btn.ts
  ┗ sIDebar-btn.vue
 

sIDebar-btn.vue

<template>
    <h1 class="test">This is a test</h1>
</template>
<script lang="ts" src="./sIDebar-btn.ts"></script>
<style lang="sCSS" src="./sIDebar-btn.sCSS"></style>

sIDebar-btn.sCSS

.test {
    color: blue;
}

sIDebar-btn.ts

import { defineComponent } from "vue";

export default defineComponent({
  name: "SIDebarBtn",});

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <SIDebarBtn />
  </div>
</template>

命令 npm run serve 执行正确并加载页面。但是组件不可见，并且在控制台中打印警告 Component is missing template or render function.

我们如何解决这个问题？

解决方法

<script lang="ts">
import { defineComponent } from "vue";
import SideBarBtn from "../components/SideBarBtn/sidebar-btn.vue"; // The name of the vue file has to be complete,with .vue extension

export default defineComponent({
  name: "Home",components: {
    SideBarBtn
  }
});
</script>

大佬总结

以上是大佬教程为你收集整理的拆分组件的文件（使用打字稿）全部内容，希望文章能够帮你解决拆分组件的文件（使用打字稿）所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。