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

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

创新互联专业为企业提供罗定网站建设、罗定做网站、罗定网站设计、罗定网站制作等企业网站建设、网页设计与制作、罗定企业网站模板建站服务，10余年罗定做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

Vue CLI

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

如下（已显示全部可选项）：

 
 
 
  
  
  --public  
  
  
  ----img  
  
  
  ------icons  
  
  
  ----favicon.ico  
  
  
  ----index.html  
  
  
  ----robots.txt  
  
  
  --src  
  
  
  ----assets  
  
  
  ------logo.png  
  
  
  ----components  
  
  
  ------HelloWorld.vue 
  
  
  ----router  
  
  
  ------index.ts  
  
  
  ----store  
  
  
  ------index.ts  
  
  
  ----views  
  
  
  ------About.vue  
  
  
  ------Home.vue  
  
  
  ----App.vue  
  
  
  ----main.ts  
  
  
  ----registerServiceWorkers.ts  
  
  
  ----shims-vue.d.ts  
  
  
  --tests  
  
  
  ----e2e  
  
  
  ----unit  
  
  
  --.browserslistrc  
  
  
  --.eslintrc.js  
  
  
  --.gitignore  
  
  
  --babel.config.js  
  
  
  --cypress.json  
  
  
  --jest.config.js  
  
  
  --package.json  
  
  
  --package-lock.json  
  
  
  --README.md  
  
  
  --tsconfig.json

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

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

新 src 目录

闲言少叙，改造后的目录结构：

 
 
 
  
  
  src  
  
  
  --assets  
  
  
  --common  
  
  
  --layouts  
  
  
  --middlewares  
  
  
  --modules  
  
  
  --plugins  
  
  
  --router  
  
  
  --services  
  
  
  --static  
  
  
  --store  
  
  
  --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，你可以在之下放置你的关于路由跳转判断文件。这里有个简单的例子：

 
 
 
  
  
  export default function checkAuth(next, isAuthenticated) {  
  
  
    if (isAuthenticated) {  
  
  
      next('/')  
  
  
    } else {  
  
  
      next('/login');  
  
  
    }  
  
  
  }

在 vue-router 中这样使用

 
 
 
  
  
  import Router from 'vue-router'  
  
  
  import checkAuth from '../middlewares/checkAuth.js'  
  
  
  const isAuthenticated = true  
  
  
  const router = new Router({  
  
  
    routes: [],  
  
  
    mode: 'history'  
  
  
  })  
  
  
  router.beforeEach((to, from, next) => {  
  
  
    checkAuth(next, isAuthenticated)  
  
  
  });

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

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

Modules

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

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

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

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

 
 
 
  
  
  src  
  
  
  --modules  
  
  
  ----orders  
  
  
  ------__tests__  
  
  
  ------components  
  
  
  --------OrdersList.vue  
  
  
  --------OrderDetails.vue  
  
  
  ------store  
  
  
  --------actions.ts  
  
  
  --------getters.ts  
  
  
  --------mutations.ts  
  
  
  --------state.ts  
  
  
  ------helpers.ts  
  
  
  ------types.ts

包括：测试文件、组件（订单列表、订单详情）、Vuex 数据、相关文件。

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

Plugins

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

 
 
 
  
  
  import MyPlugin from './myPlugin.ts'  
  
  
  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 目录，前者是核心的页面（参照路由），后者是具体的子业务及相关。这样的建议确实是不错的思路~

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

名称栏目：花五分钟重新认知Vue项目src目录
文章来源：http://www.mswzjz.cn/qtweb/news16/221666.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章