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

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

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

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

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

<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

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

编译后，将在项目路径下，生成dist目录，

接着将dist目录部署到O2服务器的webServer下，并重命名为“vue-app”。然后通过浏览器访问：http://your-server/vue-app。

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

如果您将您的应用部署到服务器的其他目录，如custom/vue-app下，那么您需要在src/o2.js文件中增加一行代码：o2.base = "../";

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

至此，我们已经可以在O2平台的框架下，使用Vue开发应用了。

开发模式优化

虽然我们可以使用React开发O2应用，但上述模式在我们每次修改代码后，需要运行build命令，并手工上传到服务器，在开发比较复杂的应用时，还是比较影响效率的。下面价绍两种方式来应对这种情况。

本地运行O2服务器

您可以在本地运行服务器，然后直接在服务器的webServer目录下创建项目。然后您必须修改Vue配置，使其编译到正确的路径。我们要修改项目目录下的vue.config.js文件：

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

然后每次运行编译后，Vue会将编译后的应用生成在webServer/vue-app/目录下，我们直接通过http://locahost/vue-app就可以查看运行结果。

通过部署工具自动化部署到远程服务器

当然，为了节省我们部署远程服务器的时间，我们可以使用javascript打包工具，自动完成这个过程，这里我们使用gulp，通过ftp或sftp来进行自动化部署到远程服务器。

这种方式不需要您本地运行O2服务器，但您必须有一台远程服务器，并可以通过ftp或sftp连接到服务器的webServer。

按上述方式创建好应用，然后我们安装gulp环境：

npm i -g gulp-cli

安装gulp以及gulp相关插件：

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

在项目根目录新建gulpfile.js文件：

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

就可以自动编译Vue应用，并上传到O2服务器。通过浏览器访问：http://your-server/vue-app就可以看到结果。

当然，这只是一个很简单的例子，提供一个思路，您也可以使用其他您熟悉的工具实现相同或类似的功能。对于熟悉前端构建工具的用户，实现更便捷的功能也不是难事，比如可以监控文件改动，实时部署，并刷新浏览器等。

总结

本章给大家介绍了在O2平台的框架内，使用Vue开发应用，并在O2服务器的webServer中运行了起来。它集成了O2平台的所有功能，您也不需要处理类似登录等一些繁琐的事，而且可以方便的调用O2的后端服务。并提供了一些优化开发模式的思路。

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

龙芯中科官方宣布，龙芯中科企业办公信息化平台全面完成国产化替代
4月4日,龙芯中科官方宣布,龙芯中科企业办公信息化平台全面完成国产化替代.龙芯 ERP 系统全系统使用国产化平台,私有化部署于基于龙芯 3C5000 服务器集群的虚拟化云平台上,使用自研 Loongn ...
浅谈快速开发平台：突破系统开发边界，赋能企业数字化！
快速开发平台,简单地说就是指那些不用编码或通过少量代码,就可以快速开发应用程序的平台.既可以降低开发人力成本,又可以缩短开发时间,从而实现企业降本增效的价值. 今天为大家介绍4款成熟业务的快速开发平台 ...
【嵌入式开发】手把手教你4418/6818开发板屏幕修改本文转自迅为: http://www.topeetboard.com 开发平台：iTOP-4418/6818开发板 44186818屏幕
[嵌入式开发]手把手教你4418/6818开发板屏幕修改本文转自迅为: http://www.topeetboard.com 开发平台:iTOP-4418/6818开发板 4418&6818 ...
O2OA：企业办公数字化转型的更佳选择
在全球都在积极探索由新一轮信息技术所引发的第四次工业革命时,一场激发企业内生动力的数字化运动在互联网企业和传统企业之间却呈现出两种截然不同的状态. 传统企业办公数字化不彻底仍是常态以技术为导向的互联 ...
低代码开发平台_低代码开发平台测评——伙伴云
本次测评的产品严格来说不算低代码开发平台,它自己给自己的定位更多是全流程数据生产力平台.不过它依然具备应用搭建的关键要素,而且在数据管理方面还比较出彩,所以不能放过它--伙伴云,这款由Discuz! ...
国内外主流云计算开发平台对比图云开发平台
转自:http://www.doserv.com/article/2013-05-17/5752527_8.shtml [导读]随着大众对云计算日益增长的需求,很多公司也建立了云计算开发平台,从多种角 ...
java项目_JNPF快速开发平台-简单快速高效开发java项目
◆JNPF快速开发平台 JNPF快速开发平台采用前后端分离技术.采用B/S架构开发,形成一站式开发多端(APP+PC)使用. 使用JNPF开发平台可以简单.快速.高效的构建各种类型java项目. ◆J ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
低代码开发平台_低代码开发平台系列：6、低代码是编程技术发展大势所趋
一.低代码是一种编程技术低代码是快速开发工具/技术的一种,属于软件开发/编程工具/技术领域,主要应用于企业软件开发领域.借助低代码工具,使用者无需编码即可实现企业软件系统常见功能的交付:少量编码扩展更 ...
【Lilishop商城】No4-2.业务逻辑的代码开发，涉及到：会员B端第三方登录的开发-平台注册会员接口开发
仅涉及后端,全部目录看顶部专栏,代码.文档.接口路径在: [Lilishop商城]记录一下B2B2C商城系统学习笔记~_清晨敲代码的博客-CSDN博客全篇会结合业务介绍重点设计逻辑,其中重点包括接口 ...

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