基于vue和webpack的前端集成开发框架
$ npm install -g vue-cli
$ vue init litor/ubase-template my-project
$ cd my-project
$ npm install
$ npm run dev
单app模式
src/
├── components/
├── pages/
│ ├── page1
│ │ ├── page1.i18n.js // 国际化文件
│ │ ├── pag1.vue // 主文件
│ │ ├── page1.service.js //service
│ │ └──page1.state.js // 状态文件
│ ├── index.html // 必须
│ ├── routes.js // 可选
│ ├── config.json // 可选
│ └── ...
└── statics/
├── images/
└── ...
多app模式
src/
├── components/
├── pages/
│ ├── app1
│ │ ├── index.html
│ │ ├── routes.js
│ │ ├── config.json
│ │ └── ...
│ ├── app2
│ │ ├── index.html
│ │ ├── routes.js
│ │ ├── config.json
│ │ └── ...
│ └── ...
└── statics/
├── images/
└── ...
| 名称 | 描述 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| autoImportVueComponent | 是否自动加载vue组件（应用目录及components目录） | Boolean | true | |
| alias | 配置别名 | Object | -- | |
| langs | 支持的语言列表 | Array | ['cn'] | 此处列出的语言，需要在各个.i18n.js文件中export出来 |
| dest | 输出路径 | String | './www' | |
| port | 端口 | string | '8081' | |
| proxy | 代理 | Array | -- | { source: '/jcsj-apps-web', target: 'http://res.wisedu.com:8000' } |
自动识别， 如果有.i18n.js文件，则添加国际化功能
// test.i18n.js
var cn = {
title: 'helloworld'
};
export default { cn };
在js中的使用方式
Vue.t('test.title')
在template中的使用方式
$t('test.title')
直接写.state.js文件即可 在.vue文件中通过下面方式引用：
computed: {
ps(){
return this.$store.state.test // 此处对应获取的是test.state.js文件中的状态
}
},
vue中使用sass方式
<style lang="sass" rel="stylesheet/scss">
...
</style>
该配置文件异步获取，而是不打包进项目js中，所以部署后仍然可以去修改配置 配置文件的内容在.vue文件中可以通过this.$root.config获取
如果没有手动配置route.js, 则自动寻找应用下的index.vue或index/inde/index.vue作为根路由
通过Ubase全局变量管理
Ubase.updateState(arg1, arg2) // 其中arg1为state.js的前缀，arg2为待更新中的状态值 {'title': 'helloworld'}或者 {'info.name': ' xiaoming'}
例如：如果要更新page1.state.js中的状态{info:{name:'zhangsan'}}，则Ubase.upateState('page1', {'info.name': 'xiaoming'})
Ubase.getState(arg) // arg为state.js的前缀 即要获取状态的文件
Ubase.invoke(arg1, arg2) // 其中arg1为（vue文件的前缀.该文件methods下的方法）， arg2为传的参数
例如：如果要调用page1.vue的methods配置项中的reload方法，则Ubase.invoke('page1.reload', '3')
注：仅当config.json中"DEBUG"配置项为true时才输出日志