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

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

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

├── 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 配置

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

猜你喜欢

转载自blog.csdn.net/wz_coming/article/details/112863293