　　在O2OA门户页面中使用Vue非常容易，本章我们介绍两个实例，来展示如何在门户页面中使用Vue。

版本要求

本文适用于如下版本：

O2OA版本要求：5.1及以上版本；
Vue版本：本文撰写时，Vue版本是2.6.11。（更低的版本未经验证）

实例一、HelloWord

　　在O2OA门户应用中创建一个页面，并向页面中创建一个文本组件，名称为“label”，值设置为“固定值”：{{message}}。如下图：

然后再表单的afterload事件中，输入以下代码：

//引入vue脚本，生产环境使用https://cdn.jsdelivr.net/npm/vue
//你也可以下载js文件，放到O2服务器的webServer目录下，建议放到o2_lib目录，然后用正确的路径加载它
o2.load("https://cdn.jsdelivr.net/npm/vue/dist/vue.js", function () {
  o2.load([js1,js2,js3], function(){
    
  });
    new Vue({
        el: this.page.get("label").node,
        data: {
            message: 'Hello O2OA with Vue !'
        }
    });
}.bind(this));

保存页面后，并预览此页面：

这样我们就在O2OA门户页面中使用了Vue。

实例二、O2 Task List

　　本列我们实现与前面章节中，集成React样例中一样的功能：列示当前用户的前20条待办，点击标题打开待办；并通过点击按钮启动流程和打开主页。

新建页面

　　在O2OA门户应用中新建一个页面，并向页面中创建一个容器组件，标识为：div。然后在容器中创建一个通用元素，元素标签为o2-task。我们会在后面创建o2-task的Vue组件。

在页面基本属性的CSS添加如下CSS代码：

.App {
  padding: 20px;
  margin: 20px;
}
.App-header {
  padding: 5px 10px;
  background: #0f81cc;
  font-size: 18px;
  color: #ffffff;
}

.o2-tasklist {
  padding: 10px;
  background: #f3f3f3;
  font-size: 18px;
}
.o2-task {
  line-height: 20px;
  height: 20px;
  cursor: pointer;
}
.o2-button {
  padding: 10px 20px;
  text-align: center;
  background: #0f81cc;
  margin-top: 10px;
  color: #ffffff;
  font-size: 18px;
  float: left;
  margin-right: 20px;
  cursor: pointer;
}

创建Vue组件

在门户中创建一个脚本，命名为：vue_task，并输入以下代码：

//引入vue脚本，生产环境使用https://cdn.jsdelivr.net/npm/vue
//你也可以下载js文件，放到O2服务器的webServer目录下，建议放到o2_lib目录，然后用正确的路径加载它
o2.load("https://cdn.jsdelivr.net/npm/vue/dist/vue.js", function () {
    //将this对象赋值给一个临时变量
    var _self = this;
    //创建名为o2-task的Vue组件
    Vue.component('o2-task', function (resolve, reject) {
        //调用O2平台的列示当前人待办的服务
        _self.Actions.load("x_processplatform_assemble_surface").TaskAction.V2ListPaging(1, 20, {}, function (json) {
            //异步返回后，执行resolve方法
            resolve({
                //必须通过function返回data数据
                data: function () {
                    return {
                        count: json.count,
                        taskList: json.data
                    };
                },
                //组件的html内容@click绑定事件，v-for实现循环
                template: `
                    <div class="App"><div class="App-header"><p>您有{{count}}个待办</p></div>
                        <div class="o2-tasklist" v-for="d in taskList">
                            <div class="o2-task" @click='openTask(d.work)'>{{d.title || "无标题"}}</div>
                        </div>
                        <div class="o2-button" @click="startProcess">点击此处启动流程</div>
                        <div class="o2-button" @click="openHomepage">点击此处打开O2首页</div>
                    </div>`,
                //组件方法定义
                methods: {
                    openHomepage: function () {
                        //page对象的openApplication方法打开主页"Homepage"
                        _self.page.openApplication("Homepage");
                    },

                    openTask: function (id) {
                        //page对象的openWork方法打开待办
                        _self.page.openWork(id);
                    },

                    startProcess: function () {
                        //page对象的startProcess方法打开待办
                        //请将“application-name”和“process-name”修改为您的流程应用名称和流程名
                        _self.page.startProcess("application-name", "process-name");
                    }
                }
            })
        });
    });

    //创建Vue根实例，将根实例挂载到页面的容器div上
    new Vue({ el: this.page.get("div").node });
}.bind(this));

上述代码实现了一个Vue组件，并挂载到页面的容器div上。代码中有简单注释，请参考Vue官方文档。

在页面中引入脚本库

　　在页面的afterload事件中，添加以下代码：

this.include("vue_task");
this.include(["11","22"], function(){}, true);

预览查看结果

预览当前页面，就可以看到如下效果：

　　到此我们我们在O2OA门户中使用了Vue创建了我们需要的组件，并调用它，可见这是非常容易的。直接应用Vue的js文件也是Vue官方推荐的使用方式。

　　Vue还提供了官方Vue-CLI工具，用于在Node.Js开发环境下的快速构建，下一章，我们就来介绍通过Vue-CLI创建Vue应用并集成O2OA