重新认知Vue项目src目录

来一一揭晓为什么要设置这样的目录结构！

Assets

静态文件目录：包含字体、图标、图片、样式等静态资源，不做赘述。

Common

公共文件夹：通常来说，它又能被拆分成多个子目录：components、mixins、directives，又或者是单个的文件：functions.ts、helpers.ts、constants.ts、config.ts，亦或者其它。但它们有共同的特点：Common 文件夹下的文件都是在多出被引用的。

举例：在 src/common/components 文件夹下，你可以设置 Button.vue 在全局共享的组件；在 helpers.ts 文件中写公共方法以供多处调用。

Layouts

你可以在 Layouts 文件夹下放整个应用的布局文件。比如 AppLayout.vue.，关于布局的更多问题可以见 这篇文章-Vue tricks: smart layouts for VueJS https://itnext.io/vue-tricks-smart-layouts-for-vuejs-5c61a472b69b

Middlewares

“中间件”这个文件夹有点类似 vue router，你可以在之下放

Modules

Modules 文件夹是咱们应用的核心！

此文件夹关于应用的业务逻辑部分，它有以下类：

•  业务组件 components
•  测试单元 **tests**
•  数据持久 store
•  其它本业务相关的文件

这里有个很棒的例子：订单业务模块

Views

Views 文件夹是我们应用中第二重要的文件夹了。我们都知道它包含的也是业务组件。但其实它更应该是路由的一种映射，比如 /home /about /orders 这个路由，在 Views 文件夹下就应该有 Home.vue、 About.vue 、Orders.vue 这三个文件！

你一定会问为什么要拆分业务部分为 Views 和 Modules 这两个目录，而不是像 Vue CLI 那样放在一起？

有以下优点：

•  更清晰的目录结构
•  更快速的了解路由
•  更直观看到根文件、根页面、以及它们与子组件、子业务是如何关联的。

小结

作者从工作中针对 Vue 项目目录结构进行思考，然后给出建议，并不是要求咱完全套用，咱可汲取其思想，按需所用。

本瓜以为：在实际的项目中，Vue CLI 项目确实会造成 Views 目录的庞大，所以将 Views 改造，分为 Views 和 Modules 目录，前者是核心的页面（参照路由），后者是具体的子业务及相关。这样的建议确实是不错的思路~

其实，又回到了那个问题：如果咱足够了解业务，需求没有频繁的改动，目录结构应该会是清晰的。但是没办法，再好的产品也避免不了来回改动。所以只能定期梳理、定期优化了。认知目录的过程也是对业务熟悉的过程。

（编辑：淮南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!