0.0.8 • Published 4 years ago
vpaco-easy v0.0.8
vpaco
页面配置化开发，让前端业务开发人员更聚焦于业务。
vpaco的核心是页面配置引擎，通过该引擎最终实现前端组件开发和业务开发的分离解藕，让专业的人做专业的事。
使用
安装
npm install vpaco --save注册
import Vue from 'vue'
import vpaco from 'vpaco'
import component1 from "./component"
import component2 from "./component2"
import page1 from "./page"
import page2 from "./page2"
Vue.use(vpaco)
vpaco.register({
components: {
component1,
component2
},
pages: {
page1,
page2
}
})页面
export default {
layout: [
{
name: 'alias1',
component: 'component1'
},
{
name: 'alias2',
component: 'component2'
}
],
config: function(vm) {
const options = {
alias1: {},
alias2: {}
}
const events = {
alias1: {
'on-change'(){
}
},
alias2: {}
}
const methods = {
}
return {
options,
events,
methods
}
}
}register配置项
| Name | type | Description |
|---|---|---|
| components | Object | 组件(页面layout中使用的组件) |
| pages | Object | 页面 |
| extensions | Object | 页面方法扩展 |
页面内置属性
| Name | type | Description | Parameters |
|---|---|---|---|
| refs | 属性 | 页面组件实例引用 | - |
| layoutRefs | 属性 | layout中布局对象引用 | - |
| reloadPage | 方法 | 刷新页面 | - |
| emit | 方法 | 抛出事件 | (...) |
| pushPage | 方法 | 页面替换 | (page, options) |
| popPage | 方法 | 页面返回，pushPage相反 | - |
layout布局对象配置项
| Name | Description | type |
|---|---|---|
| class | 样式类 | String, Object |
| style | 样式 | Object |
| hidden | 是否隐藏 | Boolean |
| component | 组件名称 | String |
| page | 页面名称 | String |
页面config配置项
| Name | Description |
|---|---|
| options | 组件配置 |
| events | 组件事件 |
| methods | 页面方法 |
| init | 页面初始化钩子 |
| mounted | 页面渲染完成钩子 |
| optionsChange | 页面入参改变钩子 |
| destroy | 页面销毁钩子 |