目录结构 #
主要目录结构 #
主要目录结构及说明:
├── 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的配置文件。