vue2.x搭建saas项目系列之二：项目目录结构介绍

悠悠 2023-01-08 13:27 149阅读 0赞

> 此篇幅主要介绍、我们是如何在vue-cli默认目录结构上去定义此项目的目录结构，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，不断地在迭代

如图，就是我们项目的目录结构，对于所有的模块都做了细分，目前业务不是很复杂，单页面应用可以支撑，后续可能会考虑使用微前端重新架构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70][]

> ├── public                                     \# 静态资源 
> 
> │   │── favicon.ico                         \# favicon图标
> 
> │   │── index.html                          \# html模板
> 
> │   │── xxxxxModule.docx             \# 静态文件
> 
> │   └── xxxxxModule.xlsx              \# 静态文件
> 
> ├── src                                          \# 源代码
> 
> │   ├── api                                     \# 全局所有请求
> 
> │   ├── ├── common       
> 
> │   ├── ├──├── index.ts  
> 
> │   ├── assets                              \# 基础数据、全局常量、图片 (由 webpack 处理加载)
> 
> │   ├── ├── baseData
> 
> │   ├── ├── constant
> 
> │   ├── ├── images
> 
> │   ├── components                    \# 全局组件、及组件注册(同步异步注册)
> 
> │   ├── ├── basicCp                  \# 基础组件
> 
> │   ├── ├── businessCp            \# 业务组件
> 
> │   ├── ├── index.ts                   \# 组件注册
> 
> │   ├── directive                           \# 全局指令
> 
> │   ├── filters                                \# 全局过滤函数
> 
> │   ├── icons                                \# svg 图标
> 
> │   ├── layout                               \#  layout布局
> 
> │   ├── mixins                              \# 列表的混入、以及一些公共类的混入
> 
> │   ├── router                               \# 路由
> 
> │   ├── store                                \# 全局 vuex store
> 
> │   ├── styles                               \# 全局 style 统一管理
> 
> │   ├── types                               \# 组件 type
> 
> │   ├── utils                                 \# 工具类、正则、http请求等封装
> 
> │   ├── views                              \# 业务页面
> 
> │   ├── App.vue                          \# 入口页面
> 
> │   ├── main.ts                           \# 入口文件 加载组件 初始化等 entry
> 
> │   ├── permission.ts                 \# 权限管理
> 
> │   ├── settings.ts                      \# 设置文件
> 
> │   └── shims.d.ts                      \# 模块注入
> 
> ├── .browserslistrc                    \# browserslistrc 配置文件 (用于支持 Autoprefixer)
> 
> ├── .env.xxx                              \# 环境变量配置
> 
> ├── babel.config.js                    \# babel-loader 配置
> 
> ├── package.json                      \# package.json 依赖
> 
> ├── postcss.config.js                 \# postcss 配置
> 
> ├── xxx.md                                \# 平台开发规则说明
> 
> ├── tsconfig.json                       \# typescript 配置
> 
> └── vue.config.js                       \# vue-cli 配置

到此，项目目录结构介绍-文章结束，原创不易，感谢浏览！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: /images/20221119/364cdd89e3064eaa95eb8f2f511832c3.png