|
| 1 | +## 目录结构 |
| 2 | +app |
| 3 | +├── assets |
| 4 | +│ ├── iconfont // 字体文件，图标 |
| 5 | +│ ├── images // views用到的图片 |
| 6 | +│ └── styles // 样式 |
| 7 | +│ ├── variables.scss // 定义样式变量，保证页面的统一风格 |
| 8 | +│ ├── iconfont.scss // 图标样式 |
| 9 | +│ ├── app.scss // 整理布局、公共样式 |
| 10 | +│ └── xxx.scss // 路由(views目录下)页面的样式 |
| 11 | +├── js |
| 12 | +│ ├── component // 组件：不能包含业务逻辑 |
| 13 | +│ │ ├── index.js // 组件库入口，插件化写法，组件命令为we-xxx |
| 14 | +│ │ └── xxx // 组件xxx |
| 15 | +│ │ ├── index.js // 组件xxx的入口文件 |
| 16 | +│ │ ├── index.vue // 组件xxx的vue文件 |
| 17 | +│ │ └── index.scss // 组件xxx的样式，需@import(variables.scss) |
| 18 | +│ ├── helper // 类似工具函数，跟业务逻辑没啥关系，比工具函数大一点 |
| 19 | +│ ├── module // 模块 |
| 20 | +│ │ ├── index.js // 模块入口文件 |
| 21 | +│ │ ├── moduleMixin.js // 模块配置文件处理、模块间通讯核心逻辑 |
| 22 | +│ │ └── xxx // 模块xxx |
| 23 | +│ │ ├── index.js // 模块xxx的配置 |
| 24 | +│ │ ├── index.vue // 模块xxx的vue文件 |
| 25 | +│ │ └── index.scss // 模块xxx的样式，需@import(variables.scss) |
| 26 | +│ ├── service // 服务 |
| 27 | +│ │ ├── db // 包含各种写IndexDB的逻辑 |
| 28 | +│ │ ├── api.js // 访问接口的ajax封装 |
| 29 | +│ │ ├── mixin.js // 全局的mixin |
| 30 | +│ │ ├── router.js // 路由配置 |
| 31 | +│ │ └── router.js // socket封装 |
| 32 | +│ ├── utils // 工具函数 |
| 33 | +│ ├── view // 页面视图 |
| 34 | +│ │ ├── app.vue // 根路由视图 |
| 35 | +│ │ ├── layout.vue // 登录进去的页面的路由视图 |
| 36 | +│ │ ├── xxx.vue // xxx页面 |
| 37 | +│ │ ├── router.js // 路由配置 |
| 38 | +│ │ └── router.js // socket封装 |
| 39 | +│ └── app.js // webpack入口文件 |
| 40 | +├── tpls |
| 41 | +│ └── index.html // 入口html模板 |
| 42 | +├── mumble.json // CLI工具mn2的配置文件 |
| 43 | +├── webpack.base.js // webpack的基础配置 |
| 44 | +├── webpack.dev.js // 执行`mn2 dev`命令的webpack配置 |
| 45 | +└── webpack.prod.js // 执行`mn2 gen`命令的webpack配置 |
| 46 | + |
| 47 | +## 模块 |
| 48 | +模块应该是独立的，跟外界无耦合的。内部由业务组件和UI组件组成，组件之间共享统一状态容器。模块和模块之间通过事件机制来交互。 |
| 49 | + |
| 50 | +### 配置 |
| 51 | +```js |
| 52 | +// import index from './index.vue'; |
| 53 | +export default { |
| 54 | + // 模块名称 |
| 55 | + name: 'Demo', |
| 56 | + // 规范模块监测什么事件，或者说模块对外提供什么接口 |
| 57 | + events: ['Demo:add'], |
| 58 | + // 规范模块能够触发其他模块什么事件或者说调用其他模块什么接口 |
| 59 | + dispatchs: ['OtherModule:add', 'OtherModule:delete'], |
| 60 | + // 规范模块的动作，由外部调用或者自己执行 |
| 61 | + methods: { |
| 62 | + showTree(arg, cb) { |
| 63 | + console.log(arg); |
| 64 | + }, |
| 65 | + }, |
| 66 | + // 模块内部组件统一的状态容器 |
| 67 | + data() { |
| 68 | + return {}; |
| 69 | + }, |
| 70 | + // 规范模块对外提供的组件 |
| 71 | + components: { |
| 72 | + index: () => import('./index.vue'), |
| 73 | + }, |
| 74 | +}; |
| 75 | +``` |
| 76 | + |
| 77 | +### 规范 |
| 78 | +1. 模块首字母大写 |
| 79 | +2. event定义的事件名称必须是 模块名:事件名 |
| 80 | +3. index.scss需@import(variables.scss)，保证风格的统一 |
| 81 | +4. 模块不能依赖其他模块，只能使用this.dispatch调用其他模块接口 |
| 82 | + |
| 83 | +### events 和 methods 的差别 |
| 84 | +events里面定义的事件是在模块里的组件created时才加入监听者队列，而methods定义的事件是js被加载就会加入监听者队列。methods里面提供的接口，应该是跟视图无关的，大多是请求数据。 |
| 85 | + |
| 86 | + |
| 87 | +## 页面 |
| 88 | +模块和ui组件组装起来就是页面，需要在router中添加路由配置 |
| 89 | + |
| 90 | +### 规范 |
| 91 | +1. 页面的根dom样式为xxx-page |
| 92 | +2. index.scss需@import(variables.scss)，保证风格的统一 |
| 93 | + |
0 commit comments