如何构建Vue.js项目

具有智能和愚蠢组件的Vue.js的完美文件夹结构和组件体系结构

Vue.js不仅仅是炒作,还是一个很棒的前端框架。 入门和创建Web应用程序很容易。 Vue.js通常被描述为小型应用程序的框架,有时甚至可以作为jQuery的替代品,因为它很小! 就个人而言,我认为它也适用于大型项目。 在这种情况下,重要的是要在组件体系结构方面很好地进行结构化。

在开始我的第一个大Vue.js项目之前,我进行了一些研究,以找到理想的文件夹结构,组件体系结构和命名约定。 我浏览了Vue.js文档,一些文章以及许多GitHub开源项目。

我必须找到一些问题的答案。 您可以在这篇文章中找到:

  • 您如何在Vue.js项目中构建文件和文件夹?
  • 您如何编写智能和哑巴组件以及如何将它们放置在哪里? 这是React的概念。
  • Vue.j的编码风格和最佳做法是什么?

我还将记录我的灵感来源和其他链接,以便更好地理解。

Vue.js文件夹结构

这是src文件夹的内容。 我建议您使用Vue CLI启动项目。 我个人使用标准的webpack模板。

。 ├──app.css├──Appu├──资产││...├──组件││...├──main.js├──mixins││...├──路由器│ └──index.js├──保存│├──index.js│├──模块││└──...││突变型.js├──翻译│└──index.js├─ ─餐具││... ...──风景└──...

关于这些文件夹的一些详细信息:

  • 资产-在此处放置将要导入到组件中的所有资产
  • 组件-不是主视图的项目的所有组件
  • mixins-mixins是在各种组件中重复使用的Javascript代码片段。 在mixin中,您可以插入Vue.js中每个组件的方法。 它们与使用它们的组件合并。
  • 路由器-您的项目的所有路线(在我的情况下,我在index.js中拥有它们)。 基本上,Vue.js中的所有内容都是一个组件。 但是,并非所有事物都是一面。 页面的路由类似于“ /仪表板”,“ /设置”或“ /搜索”。 如果组件具有路由,则将其转发。
  • store(可选)-突变型.js中的Vuex常量,子文件夹模块中的Vuex模块(然后将其加载到index.js中)。
  • 翻译(可选)-语言环境文件,我使用的是Vue-i18n,效果很好。
  • utils(可选)-我在某些组件中使用的功能,例如 B.正则表达式值测试,常量或过滤器。
  • 视图-为了使项目更易于阅读,我将分离布线的组件并将它们放在此文件夹中。 为我路由的组件不仅仅是一个组件,它们代表页面并具有路由。 然后,我将它们放在“视图”中,当您查看页面时,切换到该文件夹​​。

您可以根据需要添加其他文件夹,例如 B.过滤器或常量,API。

一些启发我的资源

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Vue.js的智能组件与哑巴组件

智能组件和愚蠢组件是我从React中学到的一个概念。 智能组件也称为容器。 他们是处理状态变化的人。 您对事物的运作方式负责。 相反,愚蠢的组件(也称为演示组件)仅占据外观。

熟悉MVC模式后,就可以将备份组件与视图进行比较,将智能组件与控制器进行比较!

在React中,智能组件和哑组件通常放置在不同的文件夹中,而在Vue.js中,您将它们全部放在同一个文件夹中:组件。 使用命名约定来区分Vue.js。 假设您有一个愚蠢的卡片组件。 然后,您应该使用以下名称之一:

  • 基本卡
  • 应用卡
  • 电子名片

如果您有一个使用BaseCard并向其中添加一些方法的智能组件,则可以根据您的项目对其进行命名,例如:

  • 个人资料卡
  • 物品卡
  • 新闻卡

如果您的智能组件不仅仅是具有方法的“更智能” BaseCard,则只需使用适合您组件的名称即可,而无需以Base(或App或V)开头。 例:

  • 仪表板统计
  • 搜索结果
  • 用户资料

该命名约定来自Vue.j的官方样式指南,其中也包含命名约定!

命名规则

以下是Vue.j官方风格指南中的一些约定,您需要很好地构建项目:

  • 组件名称应始终由多个单词组成,但根应用程序组件除外。 例如,使用“ UserCard”或“ ProfileCard”而不是“ Card”。
  • 每个组件应位于其自己的文件中。
  • 单文件组件的文件名应始终为PascalCase或始终为Kebab-case。 使用“ UserCard.vue”或“ user-card.vue”。
  • 每边仅使用一次的组件应以前缀“ The”开头,以指示只能有一个。 例如,对于导航栏或页脚,请使用TheNavbar.vue或TheFooter.vue。
  • 子组件应在其父名称前添加前缀。 例如,如果要在“ UserCard”中使用“ Photo”组件,请将其命名为“ UserCardPhoto”。 这是为了提高可读性,因为文件夹中的文件通常按字母顺序排序。
  • 始终使用全名而不是组件名称中的缩写。 例如,不要使用“ UDSettings”,而要使用“ UserDashboardSettings”。

Vue.js官方样式指南

无论您是使用Vue.js还是高级入门,都应该阅读此Vue.js样式指南。 它包含许多技巧和命名约定。 它包含许多要做和不要做的事的例子。

如果您喜欢这篇文章,请单击下面的八卦按钮以显示您的支持! 另外,请随时发表评论并提供任何反馈。 别忘了跟我来!

您想看到更多类似的物品吗? 在Patreon上支持我