liyi_hz2008
liyi_hz2008

O2OA开源企业办公开发平台：使用Vue-CLI开发O2应用

Vue-CLI是Vue官方提供的CLI工具，用于为应用快速搭建繁杂的脚手架。本章我们介绍使用Vue-CLI工具在Node,js环境下，Vue和O2集成应用开发，并在O2平台的webServer下运行。

版本要求

本文适用于如下版本：

  • 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

在O2平台框架中使用Vue

如果您希望将应用部署在O2服务器的webServer下，那么就可以参考下面的例子。

创建一个应用

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

vue create vue-app

根据提示来选取所需要的特性，本例中使用默认选项。安装完成后，Vue会自定创建好整个目录结构：

O2OA开源企业办公开发平台：使用Vue-CLI开发O2应用_第1张图片

本例中，我们将嵌入一个O2平台数据中心中的视图，展现内容管理信息；并创建两个按钮，用于创建信息文档和打开主页。

添加O2脚本引入在public/index.html的head中添加O2脚本引入：

O2OA开源企业办公开发平台：使用Vue-CLI开发O2应用_第2张图片

为了方便后续引入，我们在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')
});

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

修改App组件

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

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