vue真实项目结构

我明白你的需求。如果你想看一个真实企业项目使用的复杂目录结构,你可以参考以下几个例子:

  • 根据1的介绍,一个vue项目的目录结构可以细分为以下几个部分:
|- src
|  |- api 存放所有请求接口
|  |- assets 存放静态资源,如图片、字体等
|  |- components 存放可复用的组件
|  |- config 存放一些配置文件,如路由、全局变量等
|  |- directive 存放自定义指令
|  |- filter 存放过滤器
|  |- mixin 存放混入对象
|  |- mock 存放模拟数据
|  |- pages 存放页面级别的组件,按照路由模块来划分
|  |- plugins 存放插件,如element-ui、axios等
|  |- router 存放路由配置文件
|  |- store 存放状态管理文件,如vuex等
|  |- utils 存放通用的工具函数或配置文件
  • 根据23的介绍,一个vue项目的目录结构可以按照功能模块来划分,例如:
|- src 
   | - modules 
      | - home 首页模块 
         | - components 首页相关组件 
         | - views 首页相关视图 
         | - router.js 首页相关路由 
         | - store.js 首页相关状态管理 
      | - user 用户模块 
         | - components 用户相关组件 
         | - views 用户相关视图 
         | - router.js 用户相关路由 
         | - store.js 用户相关状态管理  
   | - common 公共资源目录  
      | - assets 公共静态资源  
      | - components 公共组件  
      | - utils 公共工具函数  
   | - App.vue 根组件  
   | - main.js 入口文件   
  • 根据4的介绍,一个vue项目的目录结构可以按照以下方式来设计:
|- src 开发目录  
   |-- api 接口请求封装(axios)  
   |-- assets 资源文件(图片、样式)  
   |-- components 组件(公共/业务)  
   |-- config 配置项(全局变量/常量)  
   |-- directive 自定义指令(v-copy/v-debounce/v-lazyload...)  
   |-- filters 过滤器(dateFormat/currencyFormat...)   
   |-- layout 布局组件(header/footer/siderbar...)   
   |-- mixins 混入对象(authMixin/listMixin...)   
   |-- mock 模拟数据(mockjs)   
   |-- plugins 插件注册(element-ui/axios/vue-lazyload...)   
   |-- router 路由配置 (index.js/map.js/guard.js...)   
   |-- store 状态管理 (index.js/modules/user.js/modules/cart.js...)   
   |-- utils 工具函数 (request/storage/event-bus/validator...)

这些只是一些示例,你可以根据自己的项目需求和喜好来调整目录结构。希望这能对你有所帮助。

posted @ 2023-03-02 09:14  ๑Secret  阅读(30)  评论(0编辑  收藏  举报