ubase-vue

使用方式

$ vue init litor/ubase2-template project1
$ cd project1
$ npm install --registry=https://registry.npm.taobao.org
$ npm run dev
$ browser http://localhost:port // port在启动的输出日志中可以看到

注意： 使用上面方式生成的代码中包含框架提供的以下功能的使用方式：

• vuex的使用
• 国际化的使用
• 独立请求的config使用
• 静态资源asset的使用
• 内置service的使用
• proxy的使用

根据自己需要删除不需要的部分

编译环境配置

gulpfile.babel.js配置参数说明

import path from 'path'
import ubase from 'ubase-vue'
 
ubase({
    // 输出路径 相对于项目根目录
    dist:'./www/', 
 
    // 别名 项目可以使用import('statics/...') 方便多级目录下的import
    alias: {  
        'components': path.resolve(__dirname, './src/components'),
        'statics': path.resolve(__dirname, './src/statics')
    },
    
    // 端口 可以不指定；不指定时，将会随机分配一个可用端口
    'port':8081, 
    
    // 配置请求代理, target和marathonID二选一, 推荐配置marathonID；配置marathonID后，每次重启工程会到marathon获取最新到ip和端口
    'proxy': [{ source: '/api/admin', target: 'http://172.16.6.150:8888', marathonID: 'wec-counselor-leave-apps-v0.0.98' }],
    
    // 是否自动加载vue组件（应用目录及components目录），默认为true
    'autoImportVueComponent':true
})

package.json实例

{
  "name": "ubase-vue-example",
  "version": "0.0.1",
  "scripts": {
    "dev": "gulp --debug",
    "build": "gulp -p"
  },
  "babel":{
    "presets": ["es2015","stage-2"],
    "plugins": ["transform-vue-jsx","syntax-async-functions",
      ["transform-runtime", {
        "helpers": false,
        "polyfill": false,
        "regenerator": true,
        "moduleName": "babel-runtime"
      }]]
  },
  "dependencies": {
    "ubase-vue": "^2.3.8"
  }
}

应用入口

src/index.vue和src/routes.js二选一（简单无需路由的应用的可以用src/index.vue作为入口，对于复杂的多路由应用使用routes.js作为入口）

routes.js 模版

import home from './home.vue'

export default [
  {
    path: '/',
    component: home
  }
]

应用目录结构

    src/
    ├── components/
    ├── index.html
    ├── routes.js
    ├── config.json
    ├── service.js
    └── ...
    └── statics/
        ├── images/
        ├── asset/
        └── ...

asset静态资源

src/statics/asset目前下内容会完全拷贝到输出路径下的statics/asset里面，适用与部分不方便import的第三方库，如富文本等；（通过这种方式使用的库，需要在index.html中通过script标签引用）

vuex使用

在应用下新建后缀为".vuex.js"的文件，ubase-vue会自动识别并做vuex的相关配置(这些配置是在底层实现的，不掺合开发者的业务代码，并对开发者不可见)。

在vue中如何使用？

export const state = {
    name: 'wisedu'
}

computed: {
    index(){
        return this.$state.index // index即为index.vuex.js的内容
    },
 }
 
 mounted(){
    console.log(this.index.name) // 输出wisedu
 }

单工程多APP使用

在src目录下新建apps目录，在apps目录下面可以新建多个app目录，app之间相互独立，各自都有自己单独的index.html入口。

    src/
    ├── components/
    ├── apps/
    │   ├── app1
    │   │   ├── index.html
    │   │   ├── routes.js
    │   │   ├── config.json
    │   │   └── ...
    │   ├── app2
    │   │    ├── index.html
    │   │    ├── routes.js
    │   │    ├── config.json
    │   │    └── ...
    │   └── ...
    └── statics/
        ├── images/
        └── ...

单独请求的配置文件

在应用index.html同级目录下，新建config.json文件即可。该文件不会被编译到项目代码中，浏览器访问应用时，会单独请求该文件。方便打包完成后依然需要修改配置的情况。

在vue中如何使用config.json中的配置？

在vue中通过this.$root.config即可访问到config.json中到内容。

国际化使用

在应用下新建后缀为".i18n.js"的文件，ubase-vue会自动识别并做国际化的相关配置

Sample index.i18n.js

var zh_CN = {
  title: 'demo title',
};
 
var en_US = {
  title: 'demo title2',
};
 
export default { zh_CN ,  en_US};
 

在vue文件template中的使用方式：

    <div>{{$t('index.title')}}</div>

在vue文件script中的使用方式：

    this.$t('index.title')

注：当app有多个语言时，在config.json中有一项特殊的配置项"LANG", 可以配置当前需要使用的语言

自动导入app下的vue文件（应用下自己写的vue文件可以在template里直接使用，无需再import）

app下vue自动导入并全局注册（此时需要保证单个app下vue的文件名不能重名），多app模式下，app之间时相互独立的（app之间vue文件可以同名）。 注：自动导入默认开启，如需关闭可在gulpfile.babel.js中配置autoImportVueComponent为false

代理配置

在gulpfile.babel.js中配置proxy项即可

'proxy': [{ source: '/api/', target: 'http://172.16.6.150:8888' }] // 其中/api为需要代理的接口前缀，target是需要代理到的真实服务地址

可用端口自动识别

前端工程启动时，自动识别可用端口，无需指定（多工程开发时如果手动指定容易冲突）

开发接口

window.Ubase.beforeInit

在整个应用挂载开始之前被调用

参数

    {
        config // config.json中的对象
        router // routes.js的内容
        next // 函数 继续往下执行
    }