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

Posted 2023-02-22

【中文标题】如何在大型 vue.js 应用程序中构建组件？

【英文标题】：How to structure components in a large vue.js app?

【发布时间】：2017-02-22 05:00:12

【问题描述】：

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

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

但是我怎样才能用这么多组件来组织我的组件文件夹呢？

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

这是我目前的架构：

【参考方案1】：

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

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

例子：

├ 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

也尽量不要混淆资产文件夹，因为里面src/ 是一个将被处理的文件夹。对于不需要处理或不想打包的普通资产，请将它们放在static/ 文件夹中。

【参考方案2】：

你应该创建更多的文件夹和子文件夹来对架构进行分类。

我分享了我目前正在使用的这种方法，它更可重用，并且更喜欢你在一个多人开发团队中。

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

Part 1、Part 2、Part 3