ウェブサイトのためのVuejsの組織

Question

Vuejsを初めて使用し、組織に関する質問があります。ウェブサイトのページを構築するには機能が異なりますが、1ページには多くの機能領域があります（モーダル、フォーム、ページング、AJA経由のコンテンツフィルタリング）。コンポーネントごとに機能をスタックするか、または機能の各セクションがそれ自身のnew Vue()を持つべきである場合、new Vue()をページスタッキング機能ごとに持つのが最善でしょうか。これらのセクションのいくつかはお互いに話す必要があるかもしれません。私の懸念は、主なapp.jsファイルが膨れていることです。

Answer 1

いいえ、すべてのページに1つのnew Vue()インスタンスを使用できます。ページごとに複数のvueインスタンスを持つことは意味がありません。

ページのリロード時に、インスタンスが再作成されます。私はあなたがSPAを持っていないと思います。だからあなたはアプリコンテナーとそこにvueコンポーネントを持っているいくつかのテンプレートを持っていますか？

たとえば、すべてのコンポーネントをインポート/エクスポートするcomponents/index.jsを作成できます。したがって、コンポーネントのエントリがあります。 （クリーナー構造）

あなたのmain.jsでは、それらをインポートするだけです。

import Vue from 'vue' 
import Components from './components/' 

const app = new Vue({ 
    components: {...Components } 
}).$mount('#app') 

そして、あなたのcomponents.jsこの

import Pagination from './components/pagination.vue' 
import Modal from '.components/modal.vue' 

const Components = { 
Pagination, 
Modal 
} 

export {...Components } 
export default Components 

のようになります。あなたは、あなたが使用している場合

import {Modal, Pagination} from './components' 

それらを整理する良い方法はどれES6モジュールとして、あなたのコンポーネントをインポートすることができますそれらは他のコンポーネントにあります。

しかし、vue-routerを使用していないので、（少なくとも私は分かりません）webpacksコード分割を使用して、そのルートで使用されるルートとコンポーネントによっては、より小さなバンドルを作成できます。