Vuejs一個網站的組織

Question

第一次使用Vuejs並有一個關於組織的問題。構建網頁的功能各不相同，一個頁面可能有許多功能區域[模式，表單，分頁，通過ajax進行內容過濾]。對於每個頁面堆疊功能的組件，每個功能部件應該有它自己的new Vue()是否最好是new Vue()。其中一些部分可能需要彼此交談。我關心的是一個主要的app.js文件臃腫。

Answer 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 

然後，您可以導入您的組件ES6模塊

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

這是如果你使用他們組織的一個很好的方式他們在其他組件。

但是，由於您不使用vue-router，您不能（至少我不知道任何方式）使用webpacks代碼拆分來創建較小的捆綁包，具體取決於它們在該路由上使用的路由和組件。