在使用来自 CDN 和 运行 Codekit 的 Vuejs 时，如何将组件拆分成更小的文件？

Question

我应该预先说明，这不是一个严肃的应用程序，而是一个用于快速原型制作的框架，因此性能或兼容性不是问题。

我目前正在 运行 Codekit 获取我的 Scss 和 Build 文件夹。我在 header 中包含了来自 CDN 的 VueJS。我还有一个 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");

这正是我想要的。除了，为了组织起来，我想将每个组件拆分成小文件并导入它们，但无法整理出来。像这样：

const app = Vue.createApp({});

import './list-heading.js';

app.mount("#app");

我知道最后的代码不起作用，它只是为了说明目的。有人知道怎么做吗？

Answer 1

列表-heading.js:

export default {
  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.js:

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

const app = Vue.createApp({});
app.component("list-heading", ListHeading);

app.mount("#app");

---

...或者：

列表-heading.js:

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

app.js:

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

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

app.mount("#app");