在前面的章节中,我们介绍了两种在O2OA中使用Vue开发应用的方式,已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器,自己搭建web服务器,那就请阅读本章。
  我们还是使用Vue的Vue-CLI工具,创建Vue应用,然后将O2OA集成到应用中,并实现以下功能:嵌入一个O2平台数据中心中的视图,展现内容管理信息;并创建两个按钮,用于创建信息文档和打开主页。

版本要求

本文适用于如下版本:

  • O2OA版本要求:5.1及以上版本;
  • Vue版本:本文撰写时,Vue版本是2.6.11。(更低的版本未经验证)
  • Vue-CLI版本:本文撰写时,Vue-CLI版本是4.4.4。

环境安装

  Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。在正确安装号Node.js和npm或yarn后,可以使用下列任一命令全局安装Vue-CLI:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

  安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。
  你还可以用这个命令来检查其版本是否正确:

vue --version

  Vue-CLI还有一个UI工具,可以通过vue ui命令来启动:

vue ui

image.png

创建一个应用

  运行以下命令来创建一个新项目,名为vue-app:

vue create vue-app

  根据提示来选取所需要的特性,本例中使用默认选项。安装完成后,Vue会自定创建好整个目录结构:
image.png
  本例中,我们将嵌入一个O2平台数据中心中的视图,展现内容管理信息;并创建两个按钮,用于创建信息文档和打开主页。

添加O2脚本引入

将O2服务器的webServer下的所有文件夹拷贝到public目录:image.png
在public/index.html的head中添加O2脚本引入:

<script src="../o2_core/bundle.js">script>

image.png
修改public/x_desktop/res/config/config.json文件:

{
    "center": [
    {
      "port": "20030",        //O2服务器中心服务器端口
      "host": "develop.o2oa.net"    //O2服务器中心服务器Host
    }
  ],
  "applicationServer": {
    "host": "develop.o2oa.net"    //O2应用服务器Host
  },
  "initManagerChanged": true,
  "initManagerName": "",
    ...
}

此文件主要修改两部分内容:
1、center部分,修改为要访问的O2中心服务器地址和端口;
2、applicationServer部分,修改为要访问的O2应用服务器地址,如果没有applicationServer,就添加一个。集群环境下,可配置应用服务器负载地址;

  为了方便后续引入,我们在src下创建一个o2.js,添加以下代码:

let o2 = window.o2;
let layout = window.layout;
export {o2, layout};

  修改src/main.js文件如下:

import Vue from 'vue'
import App from './App.vue'
//引入o2的layout对象
import {layout} from "./o2";

Vue.config.productionTip = false;

//当o2载入完成后创建Vue根组件
layout.addReady(function(){
  new Vue({
    render: h => h(App),
  }).$mount('#app')
});

修改App组件

  修改src/App.vue文件如下:






  App.vue是一个Vue组件,文件分为三部分:其中

推荐文章:

流程设计-流程设计与应用权限设置
2021-02-26
本文主要介绍如何在O2OA中进行审批流程或者工作流设计,O2OA主要采用拖拽可视化开发的方式完成流程的设计和配置,不需要过多的代码编写,业务人员可以直接进行修改
流程设计-流程表单的创建与设计
2021-02-26
本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计,O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置,不需要过多的代码编写,业务人员可以
办公用品管理使用手册
2021-02-18
O2OA办公用品管理为企业提供办公用品的入库,领用,采购维护等功能,以便于轻松管理物资,减少铺张浪费,节约成本,提高办公效率。
系统安全-启用HTTPS(腾讯云版)
2021-02-25
为增加系统和用户的安全性,平台支持启用HTTPS,使用SSL对网络流量进行证书加密传输。本篇主要介绍如何将在O2OA中启用HTTPS。
会议申请使用手册
2021-02-19
O2OA会议申请是使用平台流程管理能力开发的一个申请流程。员工的会议申请通过审批之后,可以同步到会议管理系统,由会议管理系统进行展现,提醒和跟踪。可以清晰地在会
系统配置-开机自动启动O2Server
2021-02-19
O2OA开发平台允许将平台启动设置为跟随操作系统自动启动,这样避免服务器重启后,还需要手工启动O2Server的操作。本篇介绍如何在windows和Linux两
源码编译-O2Server服务器源码编译教程
2021-04-08
O2OA是真正全代码开源的应用开发平台,开发者可以直接使用从github或者gitee上clone的源码编译成服务器,代码可以修改,安全可靠,无限制。本文主要介
平台服务器主机架构配置推荐
2021-03-04
O2OA开发平台支持公有云,私有云和混合云部署,也支持复杂的网络结构下的分布式部署。本篇主要介绍O2OA支持的部署环境以及常用的集群部署架构。
系统角色权限设置说明
2021-02-25
O2OA平台内置19种不同的系统角色,适应于各类应用的权限控制。本篇主要简单讲述初平台拥有的角色列表以及如何对指定的应用进行权限设置
开发知识-使用VNC连接中标麒麟V7操作系统
2021-02-07
NeoKylinLinuxAdvancedServerreleaseV7Update6(Chromium)

results matching ""

    No results matching ""