服务器之家

服务器之家 > 正文

花五分钟重新认知Vue项目src目录

时间:2021-03-27 23:23     来源/作者:前端大全

花五分钟重新认知Vue项目src目录

Vue 项目的目录不就是 Vue CLI 吗?让本瓜带你来康康作者是否还能变出什么花来?本文取其要,通译之。

Vue CLI

 

认知一个项目从认识目录开始!Vue 项目那逃不过认知最通用的 Vue CLI 目录结构。

如下(已显示全部可选项):

  1. --public  
  2. ----img  
  3. ------icons  
  4. ----favicon.ico  
  5. ----index.html  
  6. ----robots.txt  
  7. --src  
  8. ----assets  
  9. ------logo.png  
  10. ----components  
  11. ------HelloWorld.vue 
  12. ----router  
  13. ------index.ts  
  14. ----store  
  15. ------index.ts  
  16. ----views  
  17. ------About.vue  
  18. ------Home.vue  
  19. ----App.vue  
  20. ----main.ts  
  21. ----registerServiceWorkers.ts  
  22. ----shims-vue.d.ts  
  23. --tests  
  24. ----e2e  
  25. ----unit  
  26. --.browserslistrc  
  27. --.eslintrc.js  
  28. --.gitignore  
  29. --babel.config.js  
  30. --cypress.json  
  31. --jest.config.js  
  32. --package.json  
  33. --package-lock.json  
  34. --README.md  
  35. --tsconfig.json 

Vue CLI 目录是非常标准的 Vue 项目结构,但是它并不适用于中型或大型应用。

原因是:我们应该花更多的精力去关注 src 文件夹!具体往下看。

新 src 目录

 

闲言少叙,改造后的目录结构:

  1. src  
  2. --assets  
  3. --common  
  4. --layouts  
  5. --middlewares  
  6. --modules  
  7. --plugins  
  8. --router  
  9. --services  
  10. --static  
  11. --store  
  12. --views 

让咱们来一一揭晓为什么要设置这样的目录结构!

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,你可以在之下放置你的关于路由跳转判断文件。这里有个简单的例子:

  1. export default function checkAuth(next, isAuthenticated) {  
  2.   if (isAuthenticated) {  
  3.     next('/')  
  4.   } else {  
  5.     next('/login');  
  6.   }  

在 vue-router 中这样使用

  1. import Router from 'vue-router'  
  2. import checkAuth from '../middlewares/checkAuth.js'  
  3. const isAuthenticated = true  
  4. const router = new Router({  
  5.   routes: [],  
  6.   mode: 'history'  
  7. })  
  8. router.beforeEach((to, from, next) => {  
  9.   checkAuth(next, isAuthenticated)  
  10. }); 

此例意在做权限校验。更多关于中间件的讨论,在这篇文章-Vue tricks: smart router for VueJS

https://itnext.io/vue-tricks-smart-router-for-vuejs-93c287f46b50

Modules

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

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

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

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

  1. src  
  2. --modules  
  3. ----orders  
  4. ------__tests__  
  5. ------components  
  6. --------OrdersList.vue  
  7. --------OrderDetails.vue  
  8. ------store  
  9. --------actions.ts  
  10. --------getters.ts  
  11. --------mutations.ts  
  12. --------state.ts  
  13. ------helpers.ts  
  14. ------types.ts 

包括:测试文件、组件(订单列表、订单详情)、Vuex 数据、相关文件。

它又像是一个小的 src 目录~

Plugins

Plugins 文件夹当然是用来放 plugin。在 Vue2 中,我们这样调用

  1. import MyPlugin from './myPlugin.ts'  
  2. Vue.use(MyPlugin, { someOption: true }) 

在 Vue3 中,我们也可以在 main.ts 中调用,更多可见 v3-using-a-plugin

https://v3.vuejs.org/guide/plugins.html#using-a-plugin

Services

Services 文件夹是放请求库和 API 的地方,也包括对 localStorage 的管理等。

Static

通常来说,我们不需要 Static 这个文件夹,但也可以放一些 dummy data (虚拟数据)。

Router

Router 文件夹放置你的路由文件,太过常见、无需赘述。你也可以根据需要只在根目录设置 router.ts。但是更推荐你将路由进行一个划分以便阅读和扩展。vue-tricks-smart-router

https://itnext.io/vue-tricks-smart-router-for-vuejs-93c287f46b50

Store

Store 文件夹放置你的 Vuex 相关文件。在这个目录下主要是一些全局的持久数据及方法:state 、 actions 、 mutations 、 getters,同时也和 modules 文件夹下的 Vuex 进行关联。

Views

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

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

有以下优点:

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

小结

 

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

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

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

原文地址:https://mp.weixin.qq.com/s/U8zSuV1nvOKu0ffv9o5Ozw

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部