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

Question

我曾将 Vue.js 用于小型单页应用程序或小型 components.But 现在我正在尝试使用它构建应用程序的整个前端，但我在架构方面遇到了一些问题我的项目。

我应该为每个页面创建一个组件吗？（就像在 vue router 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

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

How to structure components in a large vue.js app?

javascript

architecture

vue.js

vuejs2