第一次使用Vuejs並有一個關於組織的問題。構建網頁的功能各不相同,一個頁面可能有許多功能區域[模式,表單,分頁,通過ajax進行內容過濾]。對於每個頁面堆疊功能的組件,每個功能部件應該有它自己的new Vue()
是否最好是new Vue()
。其中一些部分可能需要彼此交談。我關心的是一個主要的app.js文件臃腫。Vuejs一個網站的組織
1
A
回答
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代碼拆分來創建較小的捆綁包,具體取決於它們在該路由上使用的路由和組件。
+0
是的,這不是一個SPA,但將使用Vuejs的一些UI功能,如後過濾和分頁。每頁可能有所不同。在這種情況下將它用於整個頁面將是不切實際的。 – aran
相關問題
- 1. 如何組織網站?
- 2. 組織ASP MVC網站
- 3. 在Macbook上組織多個網站
- 4. 一個網站:多個客戶:如何組織
- 5. 最好的方式來組織一個網站根
- 6. ASP.NET MVC - 組織網站/網址
- 7. 數據存儲/大型網站的組織。如何組織?
- 8. 網站的文件夾組織
- 9. 組織大型網站的CSS
- 10. Ajax調用的網站/文件組織
- 11. 拆分並組織我的網站
- 12. Magento的網站/店/ storeview組織
- 13. 組織一個多用戶數據庫網站
- 14. 使用一個組織模式文件創建多頁網站
- 15. 組織成員不允許訪問該組織網站
- 16. 如何使用CodeIgniter組織網站?
- 17. 在一個域上以不同語言組織同一個網站
- 18. 哪一種在網站上組織文件的標準方式?
- 19. 組織一個hashmap
- 20. 兩個或多個組織的標籤 - 在同一個組織
- 21. 組織一個數組?
- 22. 一個廚師服務器/組織的多個工作站
- 23. 組織大型網站中複雜文章的複雜網絡
- 24. 如何利用js最小化爲一個大型組織的網站
- 25. 如何使用Angular 4(或另一個fm)組織網站的公共部分?
- 26. 組織池爲多個網站海量下載
- 27. 響應式網頁設計+ SCSS網站組織
- 28. 組織一個backbone.js集合?
- 29. 組織一個Lunene目錄
- 30. 組織一個java GUI
我不認爲每個頁面都需要'new Vue()',你可以檢查[vue-hackernews](https://github.com/vuejs/vue-hackernews-2.0)模型的實現 – Saurabh
一個「單頁面應用程序」,還是將Vue添加到單獨的靜態頁面中,這些靜態頁面是由單獨的後端技術(如Django,Ruby等)控制/路由的? – K3TH3R
不是單個頁面的應用程序,而是使用Craft CMS構建的網站。 – aran