Vue.js 在使用CDN中的VUEJ并运行Codekit时，如何将组件拆分为较小的文件？

我应该在前言中说，这不是一个严肃的应用程序，而是一个快速原型框架，所以性能或兼容性不是问题

我目前正在运行Codekit以获取我的SCS和构建文件夹。我在标题中包含了来自CDN的VueJ。我还有一个components.js文件，其中包含以下内容：

const app = Vue.createApp({});

app.component("list-heading", {
  props: {
    title: {
      type: String,
      default: null,
    },
    extra: {
      type: String,
      default: null,
    },
  },
  template: `

<div class="list-heading">
    <h4>{{title}}</h4>
    <div v-if="extra">{{extra}}</div>
</div>

`,
});

app.mount("#app");

---

我知道最后一段代码不起作用，只是为了举例说明。有人知道怎么做吗？

列表标题。js:

import Vue from 'vue';
export default Vue.extend({
  //props, template, etc...
})

import ListHeading from './list-heading.js';

const app = Vue.createApp({
  components: { ListHeading }
});

app.mount("#app");

导出默认值{
道具：{
标题：{
类型：字符串，
默认值：null，
},
额外：{
类型：字符串，
默认值：null，
},
},
模板：`
{{title}}
{{extra}}
`
}

app.js:

import Vue from 'vue';
export default Vue.extend({
  //props, template, etc...
})

import ListHeading from './list-heading.js';

const app = Vue.createApp({
  components: { ListHeading }
});

app.mount("#app");

从“./list heading.js”导入ListHeading；
const app=Vue.createApp（{}）；
附件组件（“列表标题”，列表标题）；
应用程序安装（“应用程序”）；

---

…或：

---

列表标题.js:

import Vue from 'vue';
export default Vue.extend({
  //props, template, etc...
})

import ListHeading from './list-heading.js';

const app = Vue.createApp({
  components: { ListHeading }
});

app.mount("#app");

app.js:

import Vue from 'vue';
export default Vue.extend({
  //props, template, etc...
})

import ListHeading from './list-heading.js';

const app = Vue.createApp({
  components: { ListHeading }
});

app.mount("#app");

---

哇！你太棒了！！！这完全奏效了，但我得到了一个警告，并通过在javascript include上设置type=“module”来纠正它。但不知何故，这打破了我的其他Java脚本。我在页脚中包含了组件，下面是我需要在页脚中包含的所有脚本。普通的javascript。你不必把所有的事情都放到一个

标记中。但是实例化Vue应用程序的那一个确实应该有

type=“module”

。它应该是最后一个，在您加载所有其他内容之后（即：来自cdn的Vue，任何其他依赖项）。如果您在拆分成

标记时遇到问题，请重新编写codesanbdobx.io上的代码，我会对其进行修补。我意外地解决了这个问题，在footer-scripts.js上添加了type=“application/javascript”和defer，现在它可以工作了。所以总结：你统治了我，让我度过了一个美好的夜晚！：）