Question

首次使用Vuejs并对组织有疑问。构建网站页面的功能各不相同，一个页面可能有许多功能区域[模态，表单，分页，通过ajax进行内容过滤]。是否最好为每个页面堆叠功能提供 new Vue() ，或者每个功能部分都应该拥有自己的 new Vue() 。其中一些部分可能需要彼此交谈。我担心的是有一个膨胀的主app.js文件。

Answer 1

不，您可以为所有页面使用一个new Vue()实例。每页有多个vue实例是没有意义的。

在页面重新加载时，将重新创建实例。我想你没有SPA。所以你宁愿有一些模板，你有app容器和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代码拆分来创建更小的bundle，具体取决于它们在该路由上使用的路由和组件。 / p>

Vuejs组织的网站

1 个答案: