Web 网站的Vuejs组织

第一次使用Vuejs，对组织有疑问。构建一个网站页面的功能各不相同，一个页面可能有多个功能领域[模块、表单、分页、通过ajax进行内容过滤]。是否最好为每个页面按组件堆叠功能设置一个新的Vue（），或者功能的每个部分都应该有自己的新Vue（）。其中一些部分可能需要相互交流。我担心的是app.js主文件太多。

不，您可以对所有页面使用一个

new Vue（）

实例。每页有多个vue实例是没有意义的

在重新加载页面时，将重新创建实例。我猜你没有温泉。所以你宁愿有一些模板，在那里你有你的应用程序容器和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路由器，您不能（至少我不知道任何方法）使用网页包代码拆分来创建更小的包，这取决于它们的路由和在该路由上使用的组件。

我不认为每个页面都需要

new vue（）

，您可以检查模型实现是否正在构建“单页应用程序”，或者您是否将Vue添加到由单独后端技术（如Django、Ruby等）控制/路由的单独静态页面？不是单个页面应用程序，而是使用Craft CMS构建的网站。是的，这不是SPA，但将使用Vuejs实现某些UI功能，如后期过滤和分页。每一页都可能有所不同。在这种情况下，将其用于整个页面是不切实际的。