wisf－基于vue2.0的前端集成开发框架

框架内置vue开发中常用的loader的配置(less, sass, css, js及图片等)，构建工具使用的是gulp，对vue、vuex及国际化进行了封装和抽象，自动生成项目app对入口文件，vuex和国际化等自动配置。

项目目录结构

单app模式

src/
├── components/
├── pages/
│   ├── page1
│   │   ├── page1.i18n.js // 国际化文件
│   │   ├── pag1.vue // 主文件
│   │   ├── page1.service.js //service
│   │   └──page1.vuex.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
│   │    └── ...
│   ├── base.i18n.js // 多app共享国际化文件
│   └── ...
└── statics/
    ├── images/
    └── ...

使用方式

1、在项目中引入wisf库

npm i wisf --save

2、gulpfile.babel.js

var wisf = require('wisf');

wisf({
   dest: './www',
   port: '8081'
 });

3、按照项目目录结构编写项目源码

4、run：

dev

$ gulp --debug

production

$ gulp --production

config配置项

| 名称 | 描述 | 类型 | 默认值 | 备注 | | --- | --- | --- | --- | --- | | 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' } | | useConfigFile | 是否使用独立config文件 | Boolean | false | 有些配置信息希望单独在单独的文件中，方便后续可配置 |

内置能力

1、国际化

自动识别， 如果有.i18n.js文件，则添加国际化功能

// test.i18n.js

var cn = {
    title: 'helloworld'
};

export default { cn };

在js中的使用方式

Vue.t('test.title')

在template中的使用方式

$t('test.title')

2、vuex 直接写.vuex.js文件即可 在.vue文件中通过下面方式引用：

computed: {
  ps(){
    return this.$store.state.test // 此处对应获取的是test.vuex.js文件中的状态
  }
},

3、less、sass

4、单独配置文件（通过useConfigFile配置是否需要）

配置文件的内容在.vue文件中可以通过this.$root.config获取

框架暴露的方法

通过$w全局变量管理

1、showLoading() // 显示加载动画
2、hideLoading() // 隐藏加载动画
3、beforeInit // 应用启动前的钩子方法，默认未空，可根据需要配置， 回调返回的对象包含
   {config，router, routes, next} // config.json内容，router对象, routes.js内容, next
4、updateState // 更新vuex状态，$w.updateState(arg1, arg2) 其中arg1为vuex.js的前缀，arg2为待更新中的状态值 {'title': 'helloworld'}或者 {'info.name': ' xiaoming'}
    例如：如果要更新page1.vuex.js中的状态{info:{name:'zhangsan'}}，则$w.upateState('page1', {'info.name': 'xiaoming'})
5、invoke // 跨组件执行方法 $w.updateState(arg1, arg2) 其中arg1为（vue文件的前缀.该文件methods下的方法）， arg2为传的参数
    例如：如果要调用page1.vue的methods配置项中的reload方法，则$w.invoke('page1.reload', '3')