Как разбить компоненты на более мелкие файлы при использовании Vuejs из CDN и запуске Codekit?


Как разбить компоненты на более мелкие файлы при использовании Vuejs из CDN и запуске Codekit?

15.11.2020 11:48:57 Просмотров 5 Источник

Я должен предварить это тем, что это не серьезное приложение, а скорее фреймворк для быстрого прототипирования, так что производительность или совместимость не являются проблемой.

В настоящее время я запускаю 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?

Является ответом!
tao

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");
Помочь в развитии проекта:
Закрыть X