Vuejsを初めて使用し、組織に関する質問があります。ウェブサイトのページを構築するには機能が異なりますが、1ページには多くの機能領域があります(モーダル、フォーム、ページング、AJA経由のコンテンツフィルタリング)。コンポーネントごとに機能をスタックするか、または機能の各セクションがそれ自身のnew Vue()
を持つべきである場合、new Vue()
をページスタッキング機能ごとに持つのが最善でしょうか。これらのセクションのいくつかはお互いに話す必要があるかもしれません。私の懸念は、主なapp.jsファイルが膨れていることです。ウェブサイトのためのVuejsの組織
答えて
いいえ、すべてのページに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コード分割を使用して、そのルートで使用されるルートとコンポーネントによっては、より小さなバンドルを作成できます。
はいこれはSPAではなく、ポストフィルタリングやページネーションなどのUI機能にVuejsを使用します。ページによって異なる場合があります。この文脈でページ全体に使用することは実用的ではありません。 – aran
- 1. リポジトリの組織
- 2. Mysqlの組織テーブル
- 3. ASP.NETプロジェクトの組織
- 4. Pythonソースファイルの組織
- 5. 組織モードのストライクスルーカラー
- 6. さらに組織化のためのファイル入力とソート
- 7. 組織階層を編集するためのUIデザインのアイデア
- 8. 強調マーカーのための組織・モードキーバインド(太字、斜体、下線)
- 9. データベース組織 - 多くの記事を含むウェブサイト
- 10. クリックした組織図
- 11. .NETユニットテストプロジェクト組織
- 12. Bluemixデフォルト組織
- 13. Javaクラス組織
- 14. コンピュータ組織
- 15. オープンソースの組織図作成
- 16. Mongoのコレクションドキュメント組織とクエリ
- 17. iOSプロジェクトのディレクトリ組織
- 18. フロントエンドとバックエンドのソリューション組織
- 19. Javaスレッドの組織案内
- 20. 組織のブラウザSharepoint 2010
- 21. PHP AJAXハンドラファイルの組織
- 22. MavenとEclipseのコード組織
- 23. Androidレイアウトのフォルダ組織
- 24. 組織とグループの関係
- 25. 組織図のSQLクエリ?
- 26. サービスデータベース組織のように
- 27. GitHub組織のAppVeyorアカウント
- 28. Reactの組織図用プラグイン?
- 29. VueJS - スプリットための第二
- 30. jQuery/ajaxデータコンテナ+組織
すべてのページで「新しいVue()」が必要だと思わない場合は、モデルの実装について[vue-hackernews](https://github.com/vuejs/vue-hackernews-2.0)を確認してください。 – Saurabh
ビルドしていますかDjango、Rubyなどの別個のバックエンド技術によって制御/ルーティングされる別々の静的ページにVueを追加していますか? – K3TH3R
1つのページアプリではなく、Craft CMSで構築されたWebサイトです。 – aran