Как разбить компоненты на более мелкие файлы при использовании Vuejs из CDN и запуске Codekit?
Я должен предварить это тем, что это не серьезное приложение, а скорее фреймворк для быстрого прототипирования, так что производительность или совместимость не являются проблемой.
В настоящее время я запускаю Codekit, чтобы получить свою папку Scss и сборки. И я включил VueJS из CDN в заголовок. У меня тоже есть 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");
Я знаю, что последний код не является функциональным,это просто для иллюстрации. Кто-нибудь знает, как это сделать?
Ответы - Как разбить компоненты на более мелкие файлы при использовании Vuejs из CDN и запуске Codekit? / How do I split components into smaller files while using Vuejs from CDN and running Codekit?
16.11.2020 03:44:04
list-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");
...или:
list-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");