如何在大型vue.js应用程序中构建组件？

Question

我将Vue.js用于小型单页应用程序或小型组件。但是现在我正在尝试使用它构建应用程序的整个前端，并且我在项目的体系结构方面遇到了一些麻烦。

我应该为每个页面创建一个组件吗？ （如在vue路由器doc中），如HomePage，ArticlePage，LoginPage，ContactPage等？

但是如何组织包含这么多组件的组件文件夹呢？

我想知道大型vue.js应用程序是否有一些典型的架构？

这是我目前的架构：

Answer 1

这个结构很好，我猜你在src/里面。结构总是非常主观，所以没有完美的方式。你是那个会处理它的人，所以你应该让它感觉更舒适。

我还使用一个名为directives的文件夹，另一个用于插件的文件夹，另一个用于放置“pages”内容的视图。

示例：

├ assets
├ components
│  ├ alerts.vue
│  └ menu.vue
├ directives
│  └ datepicker.vue
├ plugins
│  ├ auth.js
│  └ alerts.js
├ views
│  ├ home.vue
│  └ users
│    ├ edit.vue
│    └ list.vue
├─ App.vue
└─ main.js

另外，请尝试不要混淆assets文件夹，因为src/内的文件夹将被处理。对于不需要处理的常见资产，或者您不想打包将它们放在static/文件夹中。

Answer 2

您应该制作更多文件夹和子文件夹来对架构进行分类。

我使用这种方法分享我的现状，它更可重复使用，并且更喜欢你在一个以上的人开发团队中。

绝对适合大型应用。 它包括3个部分。

Part 1，Part 2，Part 3