Vplus NPM | npm.io

vplus

一个为了能快速开发移动应用的Vue插件。

当前版本： 0.2.16 当前插件并不稳定，如有问题，欢迎开issues，给我意见（2017年05月31日）

项目介绍：

我没有打算完全重造轮子，毕竟现有Vue已经有很多优秀的生态，比如我这个项目使用的移动端组件库vux，且JavaScript生态圈也有很多专长的项目如axios，我想要做的就是一个将这些优秀项目整合在一起，之后能减轻或者说简化开发人员的学习成本或者小型项目的集成成本，这也是我做这个插件的目的。

插件依赖的第三方库：

better-scroll 由于vux对应的scroll已经弃用
qs 需要对POST参数进行处理

建议依赖的第三方库：

vux 目前见过vue移动组件库中构建写的最好的
axios
vue-router

文档

安装

npm安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
```
npm install vplus -S
```

集成

目前仅支持完整引入，因为我不做组件库，只是在需要的时候定义小部分项目需要的组件。

在 main.js 中写入以下内容：

import Vue from 'vue'
import vplus from 'vplus'
import App from './App.vue'

const vplusOptions = { MODE: 'DEV', RUN_ENV: 'MOBILE_PHONE', // RUN_ENV: 'BROWSER', DEBUG: process.env.NODE_ENV !== 'production', AJAX_DEF_SHOWLOADING: false, SERVER_TIMEOUT: 16000, INDEX: '/', LOGIN_PATH: '/Public/Login', CONTEXT_PATH: 'http://www.xxx.com', SERVER_CONTEXT_PATH: 'http://www.xxx.com/server', FLAG_RES_DATA: 'res', FLAG_RESCODE: 'status', FLAG_ERRCODE: 'errcode', SUCCESS_RESCODE: '0000', FLAG_RETURNMESSAGE: 'errmsg', FLAG_RESCODE_SESSION_INVALID: 'core_error_session_timeout', 'core_error_session_killout', FLAG_RESCODE_UNAUTHORIZED: 'core_error_unauthorized', logout, LOGIN_STATE_AUTH_PATHS: /^((\/Mng).*)$/ , onLoginStateAuthFaild, onPageNext, onPageReplace }

const router = new VueRouter({ routes: // ... { path: '*', component: GlobalErrorPage } })

// 设置opts，具体参数正在整理开发中。2017年05月31日 Vue.use(vplus, vplusOptions)

new Vue({ el: '#app', render: h => h(App) })

## 选项

```js

let _commConfig = {
DEBUG: false,
CONTEXT_PATH: _cpath,
// 默认首页
INDEX: '/',
LOGIN_PATH: '/Login',
AJAX_DEF_SHOWLOADING: false,
// ajax 相关配置，用于axios发送ajax之后或者之前的一些设置
SERVER_TIMEOUT: 6000,
// 返回数据对象的key（可能没有，如农信社）
FLAG_RES_DATA: '',
// 返回码Key
FLAG_RESCODE: 'ReturnCode',
FLAG_ERRCODE: '',
// 返回码正确标识
SUCCESS_RESCODE: '000000',
// 返回码Session超时标识集合，如['role.invalid_user', 'validation.user.force.logout.exception']
FLAG_RESCODE_SESSION_INVALID: null,
// 返回码权限校验失败标识集合，如['core_error_unauthorized']
FLAG_RESCODE_UNAUTHORIZED: null,
// 返回消息Key
FLAG_RETURNMESSAGE: 'ReturnMessage',
// 是否对返回的消息字段进行base64.decode
RETURNMESSAGE_DECODE: false,
// 通用参数
COMM_PARAMS: null,
// 通用请求头
COMM_HEADERS: null,
// 运行环境：浏览器（BROWSER）、手机（MOBILE_PHONE）、平板（PAD）
RUN_ENV: 'BROWSER',
// 桥接协议
PROTOCOL: 'bs',
// 在服务端返回超时时候回调该函数
logout: null,
// 应用资源访问校验规则：登录规则（如：[/^((\/Mng).*)$/]）
LOGIN_STATE_AUTH_PATHS: [],
// 授权失败回调
onLoginStateAuthFaild: null,
// 下面4个是页面路由编程式导航钩子
onPageGo: null,
onPageNext: null,
onPageReplace: null,
onPageTo: null,
// 针对uiErrDialog、uiConfirm在显示和隐藏的时候回传canBeBack配置，以便应用可以控制在这两个时机处理返回事件，解决在手机端点击原生toolbar或者物理返回之后，这两种控件还在显示
onModCanBeBack: null
}

方法

具体暴露的方法，请查看插件安装之后打出的console log，其中为了方便分别在Vue原型和windows上面分别设置了一系列的方法，windows的_VP属性对象是Vue中实例对象的$vp的子级！

此后，插件将会在Vue原型上暴露两个对象：

$vp

ajax类方法，如：

export default {
    // ...
    created () {
      if (this.buts.length === 0) {
        this._getButs()
      }
    },
    methods: {
      _getButs () {
        this.$vp.get('testPhoneMenu').then((data) => {
          this.buts = data.List.items
        })
      }
    },
    // ...
  }

ui类方法，如：

 export default {
  // ...
  created () {
    this.$vp.toast('开发中!')
  },
  // ...
}

+ **$bus**
  - $bus事件总线管理对象，将其绑定到每个ViewModel示例之上，通过调用其的$on注册一个事件，通过$emit广播一个时间，上面的例子中，就演示了两个子组件间通过$bus完成了消息的分发,如：
  ```
  <template>
    <div id="test">
      <my-component></my-component>
      <button-counter class="btn"></button-counter>
    </div>
  </template>

  <script type="text/ecmascript-6">
    import Vue from 'vue'
    Vue.component('my-component', {
      template: `
        <div style="margin:10px">{{num}}</div>
      `,
      data () {
        return {
          num: 0
        }
      },
      created () {
        // 在组件 B 创建的钩子中监听事件
        this.$bus.$on('increment', (counter) => {
          this.num = counter
        })
      }
    })

    Vue.component('button-counter', {
      template: '<button v-on:click="increment">{{ counter }}</button>',
      data () {
        return {
          counter: 0
        }
      },
      methods: {
        increment () {
          this.counter += 1
          this.$bus.$emit('increment', this.counter)
        }
      }
    })

    export default {}
  </script>

  ```

构建

# install dependencies
npm install

# example serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run dist