目录结构 #

主要目录结构 #

主要目录结构及说明:

         
├── api                                			# Api地址                                 				
├── components                                  # 通用组件
├── assets                                      # 字体和scss
├── filters                                     # 过滤器
├── hybrid                                       # 文件上传工具
├── libs                                        # 公共类库
├── pages                                        # 页面
├── store                                       # vuex 状态管理配置
├── static                                       # 静态资源文件
├── theme                                       # app主题色配置
├── uni_modules                                 # 符合uni-app模块化规范的插件
├── unpackage                                   # 打包后资源
├── utils                                       # js工具
├── uview-ui                                    # uview框架
├── App.vue                                     # 应用入口组件
├── main.js                                     # 应用入口js
├── manifest.json                               # app基础配置
├── package.json                                # package.json
├── pages.json                                  # 页面信息配置
├── nginx.conf									# nginx发布配置
├── Dockerfile									# dockerfile配置
├── uni.scss                                    # 默认内置的常用样式

详细目录说明 #

api目录 #

存放api请求接口文件,目录如下:

|-api                          #api目录
  |-apply                        #我的
  |  |-apply.js                    #我的应用菜单
  |  |-order.js                    #订单api
  |  |-reportLog.js                #日志
  |  |-schedule.js                 #日程
  |  |-visualDev.js                #在线开发
  |-common.js                    #公共接口
  |-message.js                   #消息通知
  |-workFlow                     #工作流
  |  |-flowBefore.js               #待我审核
  |  |-flowEngine.js               #流程引擎
  |  |-flowLaunch.js               #流程发起
  |  |-workFlowForm.js             #流程表单

components目录 #

项目通用的组件目录,目录如下:

|-components                           #组件目录
  |-ly-tree                               #树组件
  |-mall3s                                #mall3s自定义组件库
  |  |-mall3s-barcode                         #条形码组件
  |  |-mall3s-button                          #按钮组件
  |  |-mall3s-cascader                        #级联组件
  |  |-mall3s-checkbox                        #checkbox组件
  |  |-mall3s-city-select                     #城市选择组件
  |  |-mall3s-com-select                      #部门选择组件
  |  |-mall3s-date-range                      #日期选择组件
  |  |-mall3s-date-time                       #时间选择组件
  |  |-mall3s-editor                          #编辑器组件
  |  |-mall3s-file                            #文件上传组件
  |  |-mall3s-file-comment                    #文件上传组件
  |  |-mall3s-group                           #分组组件
  |  |-mall3s-num-range                       #数字框组件
  |  |-mall3s-org-select                      #组织选择组件
  |  |-mall3s-parser                          #html渲染组件
  |  |-mall3s-popup-select                    #弹出层下拉框组件
  |  |-mall3s-qrcode					      #二维码组件
  |  |-mall3s-relation-attr					  #关联属性组件
  |  |-mall3s-relation-select				  #关联下拉框组件
  |  |-mall3s-select				          #下拉框组件
  |  |-mall3s-switch				          #swith组件
  |  |-mall3s-text				              #文本框组件
  |  |-mall3s-time-range				      #时间范围选择组件
  |  |-mall3s-tree-select				      #树形下拉框选择组件
  |  |-mall3s-upload				          #文件上传组件(封装)
  |  |-mall3s-user-select				      #用户选择组件

assets目录 #

字体和scss,目录如下

|-assets                       #字体和scss
  |-iconfont                     #iconfont字体
  |  |-custom                      #自定义
  |  |  |-iconfont.css             #字体样式
  |  |-ym                        #ym字体
  |  |  |-iconfont.css             #字体样式
  |-scss                         #scss
  |  |-common.scss                 #公共样式

filter目录 #

filter过滤器,目录如下

|-filters
  |-index.js                 #过滤器

hybrid目录 #

hybrid文件管理器,目录如下

|-hybrid
  |-html                 #文件管理器

libs目录 #

libs公共库,目录如下

|-libs                   #公共库
  |-chat.js                  #聊天
  |-codeGeneration.js        #代码生成
  |-permission.js            #权限
  |-resources.js             #资源

pages目录 #

pages存放项目的页面。目录如下

|-pages                     #页面
  |-apply                      #我的应用
  |  |-dynamicModel               #在线开发应用(后台加载应用)
  |  |-externalLink               #页面超链组件
  |  |-fieldPunchCard
  |  |-order                      #订单页面
  |  |-reportLog                  #日志
  |  |-schedule                   #日程
  |  |  |-calendar                  #日历控件
  |-componentLibrary              #组件库
  |-form                          #form表单组件
  |-index                         #首页
  |-launch                        #启动页
  |-login                         #登录
  |-mall3s-pop-select             #弹窗搜索框
  |-message                       #通讯
  |-my                            #我的
  |  |-abouts                        #关于我们
  |  |-accountSecurity               #账户安全
  |  |-business                      #我的公司信息
  |  |-cancellation                  #注销数据
  |  |-contactUs                     #联系我们
  |  |-modifyPsd                     #修改密码
  |  |-personalData                  #个人信息
  |  |-scanResult                    #搜索结果
  |  |-settings                      #设置
  |  |-subordinate                   #我的下属
  |-workFlow                      #工作流
  |  |-allApp                        #全部应用
  |  |-candiDateUserSelect           #用户选择
  |  |-comment                       #评论
  |  |-components                    #工作流程
  |  |-filePreview                   #文件预览
  |  |-flowBefore                    #待我审核
  |  |-flowCopy                      #抄送我的
  |  |-flowDone                      #已办流程
  |  |-flowLaunch                    #我发起的
  |  |-flowTodo                      #流程代办
  |  |-operate                       #流程操作
  |  |-scanForm                      #搜索表单
  |  |-workFlowForm                  #流程表单

static目录 #

static存放项目静态资源,比如images。

store目录 #

store存放vuex。

|-store                #store
  |-getters.js          #getter
  |-index.js            #store核心js
  |-modules                #模块
  |  |-base.js               #基础数据模块
  |  |-chat.js               #聊天相关模块
  |  |-user.js               #用户数据模块

unpackage目录 #

unpackage存放打包后的文件,新建的项目是没有的。(使用微信开发者工具运行后,也会出现此文件夹) 对于打包后的文件,还需要说的是:如果打包后,相关组件或者图片失去了效果,可能是打包后的相关内容的引用路径出现了改变,导致错误。一旦出现类似错误,大家可以留意一下。

utils目录 #

utils存放项目相关公共js库。

|-utils             #公共js
  |-define.js          #项目配置相关js
  |-mall3s.js          #框架相关js
  |-request.js         #axios请求
  |-share.js           #页面分享js

uview-ui目录 #

uview框架组件库目录.

manifest.json #

manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。在之前配置各种相关内容时,自动跳转到的配置信息界面,就是这个json文件。如果使用HBuiderX打开,它会是这种界面信息,而如果是用其它开发工具打开,它会是一串代码,但内容是相同的。(当然,你可以考虑从其它开发工具修改它)

对比: 在这里插入图片描述

其他文件 #

App.vue是项目的根组件,所有页面都是在App.vue下进行切换的,是页面的入口文件,可以调用应用的生命周期函数。

main.js是项目的入口文件,主要作用是初始化vue实例并使用需要的插件。

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。

Dockerfile文件是项目发布到容器的配置文件。

nginx.conf文件时发布到linux下nginx的配置文件。

上次更新: 3/12/2023, 8:08:52 AM