提示：

此文中介绍的方法已过时，建议查看文档：o2oa开发平台前端源码级二次开发

O2OA进行前端的二次开发，介绍了创建O2OA component的方式，基于React和Vue的模式

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会自定创建好整个目录结构：

为了方便后续引入，我们在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文件如下：

<template>
  <div id="app">
    <div class="title">信息中心</div>
    <o2-view app="内容管理数据" name="所有信息"/>
    <button @click="createDocument">创建新信息</button>
    <button @click="openHomepage">打开主页</button>

  </div>
</template>

<script>
//引用o2-view组件
import o2View from './components/o2-view.vue'
//引入o2的全局对象o2
import {o2} from "./o2";

export default {
  name: 'App',
  components: {
    o2View
  },
  methods: {
    "createDocument": function(){
      //通过o2.env对象新建内容管理文档
      //o2.env对象即是在O2门户页面的脚本中的this指向，可以使用其方法。
      //createDocument方法创建内容管理文档，可传入栏目和分类参数，请参考API文档
      o2.env.page.createDocument();
    },
    "openHomepage": function(){
      //通过o2.env对象打开主页应用
      o2.env.page.openApplication("Homepage");
    }
  }
}
</script>

<style>
  #app {
    width: 80%;
    margin: 30px auto;
  }
  .title {
    padding: 10px;
    background: #0f81cc;
    font-size: 18px;
    color: #ffffff;
  }
  button {
    padding: 10px 20px;
    text-align: center;
    background: #0f81cc;
    margin-top: 10px;
    color: #ffffff;
    font-size: 18px;
    float: left;
    margin-right: 20px;
    cursor: pointer;
    border: 0;
  }
</style>

　　App.vue是一个Vue组件，文件分为三部分：其中<template>部分定义了组件的模板；<style>部分定义组件样式；<script>部分实现组件的逻辑。

在模板中，我们使用了<o2-view>标签，将由o2-view组件负责渲染，给o2-view传入了两个参数：app="内容管理数据"和name="所有信息"，我们将在o2-view组件中使用这两个参数，用于展现“内容管理数据”这个数据应用下的“所有信息”视图。您需要现在O2平台里创建好对应的视图，如果需要展现其他数据应用的其他视图，需要修改这两个值。

我们创建了两个button，通过@click分别绑定了createDocument和openHomepage两个方法，分别用于新建内容管理文档和打开主页应用

　　我们在components部分引用了o2View组件，下面我们就要创建这个组件。

创建o2-view组件

　　删除src/components/目录下的原有.vue文件，然后新建o2-view.vue文件，输入以下代码：

<template>
  <div class="view"></div>
</template>

<script>
//引入o2对象
import {o2} from "../o2";
export default {
  name: 'o2-view',
  props: {
    app: String,	//传入的参数，本例中获取到“内容管理数据”
    name: String  //传入的参数，本例中获取到“所有信息”
  },
  //在vue组件挂载后执行
  mounted: function(){
    //引入o2平台的Viewer对象
    o2.xDesktop.requireApp("query.Query", "Viewer", function(){
      //新建一个Viewer对象，用于展现指定的视图
      //将Viewer展现挂载到this.$el上,就是template中的：<div class="view"></div>对象
      new o2.xApplication.query.Query.Viewer(this.$el, {
        "application": this.app,
        "viewName": this.name,
      });
    }.bind(this));
  }
}
</script>

<style scoped>
div {
  height: 600px;
}
</style>

　　在o2-view组件中，我们主要做的事是，在vue组件挂载后，将o2的视图组件，再挂载到o2-view组件的根Dom对象。

　　当然，这里我们要在我们的O2服务器上创建好数据应用和视图，对应本例中，就是“内容管理数据”应用下的“所有信息”视图。

编译并运行

　　我们完成了上述开发工作，就可以编译并运行我们的应用了。

　　由于我们要将Vue应用放到O2的web服务器的目录下，而非根路径下，所以我们需要简单配置以下编译的路径。再vue应用目录下创建vue.config.js文件，输入以下代码：

module.exports = {
    publicPath: "."
};

　　将编译后的路径引用使用相对路径。

　　在当前项目路径下，使用以下任意一条命令编译项目：

npm build
# OR
yarn build

　　出现类似下面的信息，表示编译成功：

　　如果您未登录到服务器，会出现登录页面，登录后就可以看到实现的效果了。

//src/o2.js
let o2 = window.o2;
let layout = window.layout;
o2.base = "../";
export {o2, layout};

module.exports = {
    publicPath: ".",
    outputDir: "../vue-app"
};

npm i -g gulp-cli

npm i gulp gulp-ftp gulp-sftp-up4 gulp-run -save-dev

var gulp = require('gulp'),
    ftp = require('gulp-ftp'),
    sftp = require('gulp-sftp-up4'),
    run = require('gulp-run');

//根据您的实际服务器修改
var options = {
    'build': 'dist',
    'host': 'o2server服务器',
    'user': 'sftp user',
    'pass': 'sftp password',
    "port": 22,
    "remotePath": "/data/o2server/servers/webServer/vue-app"
};

//sftp任务
function upload_sftp(){
    var build = "dist/**/*";
    return gulp.src(build)
        .pipe(sftp({
            host: options.host,
            user: options.user || 'anonymous',
            pass: options.pass || null,
            port: options.port || 22,
            remotePath: (options.remotePath || '/')
        }));
}

//ftp任务
function upload_ftp(){
    var build = "dist/**/*";
    return gulp.src(build)
        .pipe(ftp({
            host: options.host,
            user: options.user || 'anonymous',
            pass: options.pass || null,
            port: options.port || 21,
            remotePath: (options.remotePath || '/')
        }));
}
//运行vue build
function build_vue() {
    return run('npm build').exec();
}
输出gulp任务，如果使用ftp，更换第二个任务为upload_ftp
exports.build = gulp.series(build_vue, upload_sftp);

gulp build