订购 vue.js 文件的最佳实践

Question

我想知道在 vue.js 项目中对文件夹和其他组件进行排序的最佳方式是什么，以便可以轻松维护和扩展

Answer 1

我建议您使用标准的 cli 结构 - 但请记住，您仍然可以在任何地方添加子文件夹，并且不要在模块下放置 200 个文件或类似的东西。

如果您要制作一个模块 - 添加一个文件夹。

如果您要添加组件 - 添加文件夹 等等。

这对商店也很重要，商店有时会变得很大。

如果你想拆分你的商店，因为你知道它会太大，分别添加动作、突变等的子文件夹，然后添加像“actions/actions_user.vue”、“..actions_items”这样的文件。 vue' 等等 - 或者如果你觉得更舒服，可以省略 'actions_'（它们现在无论如何都在操作文件夹中，但如果你不使用文件，可能会更难搜索它们 -树）。

关于如何将actions（以及store的其他内容）拆分成多个文件，请查看my answer here

还有在商店中添加模块甚至添加多个商店的选项，这有助于可扩展性，但是 - 在我看来 - 可能会变得挑剔和难以阅读，而不是最终有用。

Answer 2

就像 cmets 已经说过的，关于如何构建你的 vue 项目有很多方法和意见。

就像 tony19 已经说过使用 vue-cli 生成项目是一个好的开始。

如果您想查看项目的真实示例，可以试试这个：https://github.com/gothinkster/vue-realworld-example-app

gothinkster 实际上在许多不同的前端和后端都有一个相同项目的示例。看看他们的回购。

如果你打算使用 vuetify 作为你的 ui 库，我也可以推荐看看他们的免费模板 https://vuetifyjs.com/en/themes/premium/

当然还有很多其他的。您可能想在 google 上搜索“vue real world example”或类似内容。

为了可扩展性，我会说将内容拆分为较小的文件和组件是一种很好的做法。

例如，在创建 vuex 模块时，您可以为完整的 vuex 存储创建一个文件，或者为每个模块创建一个文件，甚至可以将每个模块拆分为一个 actions.js、mutations.js getters.js state.js 和一个索引。 js结合了这4个。

请记住，以上所有内容都是我的观点，其他人可能会有不同的想法。