项目文档结构
- build //自动化部署相关配置
- dist //文件生成目录(运行build之后生成,release到此文件夹)
-- ...
- node_module //自动安装(第三方模块,包括各种辅助构建工具,以及框架)
-- ...
- npmPlugins //npm插件
- src //源码文件(开发环境)
-- assets //静态资源(包含UI样式) 具体查看 ui文档结构
-- components //组件 具体查看 通用组件文档结构
-- pages //业务模块 具体查看 业务组件文档结构
-- store //数据仓库以及后端接口 具体查看 状态管理组件文档结构
-- util //工具包 例如swiper
-- app.vue //根组件
-- main.js //入口文件
-- kdweibo.js //云之家api
-- route-config.js //路由配置
- static //静态文件
- .babelrc //转化es2015(新版的babel是需要在文件上配置的,如果没有此文件会导致webpack-config里面对应的配置不生效)
- .editorconfig //编辑器配置文件(例如 缩进2格)
- config.js //开发环境配置文件
- index.ejs //js模板(暂时没用)
- index.html
- package.json //npm 配置
- pro_service.js //临时服务器(暂时没用)
- sftp-config.json //ftp 配置
- webpack.cofig.js //webpack配置
<a name="ui"></a>
UI文档结构
- base
-- base //ui样式基本库
-- mixin //常用功能封装
-- basic.styl
-- mobile.styl
-- basic.styl
-- setArrow.styl
-- setChecked.styl
-- setOnepx.styl
-- text.styl
-- variable //从widget中抽出来的变量,方便以后改动
-- themes //样式主题,可以自行增加
-- ...
-- fn.styl //variable入口文件
-- reset.styl //初始化样式
-- widget //ui组件样式库
-- button
-- calculate
-- calendar
-- cell
-- dialog
-- panel
-- tab
-- ui.styl //widget入口文件,包含所有widget样式
- index.styl //base入口文件,这里引用到了ui样式库和ui组件库
<a name="common"></a>
通用组件文档结构
- base.js //基类 包含表单验证
- index.js //引入vue模块,并且注册,将注册后的对象返回
这个主要是为了将来迁移做的优化,值需要引入这个文件,不需要再页面再注册
例如: 使用button模块,直接可以这样写 <v-button><v-button>
- cell.vue //一个单元
- cells.vue //一组单元
- cellInput.vue //含有输入框的单元
- flex-para.vue //随着文字增多,字体大小变小
- menu.vue //菜单
- menu-item.vue //菜单item
- number.vue //含有-+数字
- selectperson.vue //云之家-人员选择
- swiper.vue //图片左右滑动
- tab.vue //导航栏
- tab-item.vue //导航栏item
- uploader.vue //云盘-上传图片
<a name="work"></a>
业务组件文档结构
- apply //报销单模块
-- applylist.vue //我的报销
-- edit.vue //新增
-- history.vue //历史
-- item.vue //明细
-- nodeline.vue //节点
-- todolist.vue //我的代办
-- view.vue //审批
-- workflow.js //工作流模式
- consumption //录入消费明细模块
-- bot.vue //底部消费信息
-- edit.vue //新增明细
-- item.vue //明细
-- list2edit.vue //编辑
-- list2view.vue //审批
-- sum.vue //汇总
-- viewConsump.vue //审批
- demo
- 404.vue
- base.js //自动导入组件并注册
- common.vue //过渡动画模块
- enums.js //枚举表
- home.vue //主页面
- rightManage.vue //人员权限模块
- start.vue //为了后续渲染,阻塞页面
- sysConf.vue //权限管理模块
<a name="store"></a>
store文档结构
- api //后端接口-api
- modules //Vuex模块
-- apply.js //报销模块
-- setting.js //权限管理、人员管理、admin
-- user.js //登录用户信息,userId openId等
-- valid.js //表单验证
- aciton.js //Vuex-aciton
- getter.js //Vuex-getter
- index.js //store入口
- mutation-types.js //Vuex-mutationType
网友评论