Vue-CLI是Vue官方提供的CLI工具，用于為應(yīng)用快速搭建繁雜的腳手架。本章我們介紹使用Vue-CLI工具在Node,js環(huán)境下，Vue和O2集成應(yīng)用開發(fā)，并在O2平臺的webServer下運(yùn)行。

版本要求

本文適用于如下版本：

• O2OA版本要求：5.1及以上版本；
• Vue版本：本文撰寫時，Vue版本是2.6.11。（更低的版本未經(jīng)驗證）
• Vue-CLI版本：本文撰寫時，Vue-CLI版本是4.4.4。

環(huán)境安裝

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 命令。你可以通過簡單運(yùn)行 vue，看看是否展示出了一份所有可用命令的幫助信息，來驗證它是否安裝成功。

你還可以用這個命令來檢查其版本是否正確：

vue --version

在O2平臺框架中使用Vue

如果您希望將應(yīng)用部署在O2服務(wù)器的webServer下，那么就可以參考下面的例子。

創(chuàng)建一個應(yīng)用

運(yùn)行以下命令來創(chuàng)建一個新項目，名為vue-app：

vue create vue-app

根據(jù)提示來選取所需要的特性，本例中使用默認(rèn)選項。安裝完成后，Vue會自定創(chuàng)建好整個目錄結(jié)構(gòu)：

本例中，我們將嵌入一個O2平臺數(shù)據(jù)中心中的視圖，展現(xiàn)內(nèi)容管理信息；并創(chuàng)建兩個按鈕，用于創(chuàng)建信息文檔和打開主頁。

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

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

為了方便后續(xù)引入，我們在src下創(chuàng)建一個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;//當(dāng)o2載入完成后創(chuàng)建Vue根組件 layout.addReady(function(){new Vue({render: h => h(App),}).$mount('#app') });

//當(dāng)o2載入完成后創(chuàng)建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="內(nèi)容管理數(shù)據(jù)" name="所有信息"/><button @click="createDocument">創(chuàng)建新信息</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對象新建內(nèi)容管理文檔//o2.env對象即是在O2門戶頁面的腳本中的this指向，可以使用其方法。//createDocument方法創(chuàng)建內(nèi)容管理文檔，可傳入欄目和分類參數(shù)，請參考API文檔o2.env.page.createDocument();},"openHomepage": function(){//通過o2.env對象打開主頁應(yīng)用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>部分實(shí)現(xiàn)組件的邏輯。

在模板中，我們使用了<o2-view>標(biāo)簽，將由o2-view組件負(fù)責(zé)渲染，給o2-view傳入了兩個參數(shù)：app="內(nèi)容管理數(shù)據(jù)"和name="所有信息"，我們將在o2-view組件中使用這兩個參數(shù)，用于展現(xiàn)“內(nèi)容管理數(shù)據(jù)”這個數(shù)據(jù)應(yīng)用下的“所有信息”視圖。您需要現(xiàn)在O2平臺里創(chuàng)建好對應(yīng)的視圖，如果需要展現(xiàn)其他數(shù)據(jù)應(yīng)用的其他視圖，需要修改這兩個值。

我們創(chuàng)建了兩個button，通過@click分別綁定了createDocument和openHomepage兩個方法，分別用于新建內(nèi)容管理文檔和打開主頁應(yīng)用

我們在components部分引用了o2View組件，下面我們就要創(chuàng)建這個組件。

創(chuàng)建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, //傳入的參數(shù)，本例中獲取到“內(nèi)容管理數(shù)據(jù)”name: String //傳入的參數(shù)，本例中獲取到“所有信息”},//在vue組件掛載后執(zhí)行mounted: function(){//引入o2平臺的Viewer對象o2.xDesktop.requireApp("query.Query", "Viewer", function(){//新建一個Viewer對象，用于展現(xiàn)指定的視圖//將Viewer展現(xiàn)掛載到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對象。

當(dāng)然，這里我們要在我們的O2服務(wù)器上創(chuàng)建好數(shù)據(jù)應(yīng)用和視圖，對應(yīng)本例中，就是“內(nèi)容管理數(shù)據(jù)”應(yīng)用下的“所有信息”視圖。

編譯并運(yùn)行

我們完成了上述開發(fā)工作，就可以編譯并運(yùn)行我們的應(yīng)用了。

由于我們要將Vue應(yīng)用放到O2的web服務(wù)器的目錄下，而非根路徑下，所以我們需要簡單配置以下編譯的路徑。再vue應(yīng)用目錄下創(chuàng)建vue.config.js文件，輸入以下代碼：

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

將編譯后的路徑引用使用相對路徑。

在當(dāng)前項目路徑下，使用以下任意一條命令編譯項目：

npm build # OR yarn build

出現(xiàn)類似下面的信息，表示編譯成功：

編譯后，將在項目路徑下，生成dist目錄，

接著將dist目錄部署到O2服務(wù)器的webServer下，并重命名為“vue-app”。然后通過瀏覽器訪問：http://your-server/vue-app。

如果您未登錄到服務(wù)器，會出現(xiàn)登錄頁面，登錄后就可以看到實(shí)現(xiàn)的效果了。

如果您將您的應(yīng)用部署到服務(wù)器的其他目錄，如custom/vue-app下，那么您需要在src/o2.js文件中增加一行代碼：o2.base = "../";

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

至此，我們已經(jīng)可以在O2平臺的框架下，使用Vue開發(fā)應(yīng)用了。

開發(fā)模式優(yōu)化

雖然我們可以使用React開發(fā)O2應(yīng)用，但上述模式在我們每次修改代碼后，需要運(yùn)行build命令，并手工上傳到服務(wù)器，在開發(fā)比較復(fù)雜的應(yīng)用時，還是比較影響效率的。下面價紹兩種方式來應(yīng)對這種情況。

本地運(yùn)行O2服務(wù)器

您可以在本地運(yùn)行服務(wù)器，然后直接在服務(wù)器的webServer目錄下創(chuàng)建項目。然后您必須修改Vue配置，使其編譯到正確的路徑。我們要修改項目目錄下的vue.config.js文件：

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

然后每次運(yùn)行編譯后，Vue會將編譯后的應(yīng)用生成在webServer/vue-app/目錄下，我們直接通過http://locahost/vue-app就可以查看運(yùn)行結(jié)果。

通過部署工具自動化部署到遠(yuǎn)程服務(wù)器

當(dāng)然，為了節(jié)省我們部署遠(yuǎn)程服務(wù)器的時間，我們可以使用javascript打包工具，自動完成這個過程，這里我們使用gulp，通過ftp或sftp來進(jìn)行自動化部署到遠(yuǎn)程服務(wù)器。

這種方式不需要您本地運(yùn)行O2服務(wù)器，但您必須有一臺遠(yuǎn)程服務(wù)器，并可以通過ftp或sftp連接到服務(wù)器的webServer。

按上述方式創(chuàng)建好應(yīng)用，然后我們安裝gulp環(huán)境：

npm i -g gulp-cli

安裝gulp以及gulp相關(guān)插件：

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');//根據(jù)您的實(shí)際服務(wù)器修改 var options = {'build': 'dist','host': 'o2server服務(wù)器','user': 'sftp user','pass': 'sftp password',"port": 22,"remotePath": "/data/o2server/servers/webServer/vue-app" };//sftp任務(wù) 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任務(wù) 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 || '/')})); } //運(yùn)行vue build function build_vue() {return run('npm build').exec(); } 輸出gulp任務(wù)，如果使用ftp，更換第二個任務(wù)為upload_ftp exports.build = gulp.series(build_vue, upload_sftp);

然后，當(dāng)開發(fā)或修改代碼完成后，執(zhí)行以下命令：

gulp build

就可以自動編譯Vue應(yīng)用，并上傳到O2服務(wù)器。通過瀏覽器訪問：http://your-server/vue-app就可以看到結(jié)果。

當(dāng)然，這只是一個很簡單的例子，提供一個思路，您也可以使用其他您熟悉的工具實(shí)現(xiàn)相同或類似的功能。對于熟悉前端構(gòu)建工具的用戶，實(shí)現(xiàn)更便捷的功能也不是難事，比如可以監(jiān)控文件改動，實(shí)時部署，并刷新瀏覽器等。

總結(jié)

本章給大家介紹了在O2平臺的框架內(nèi)，使用Vue開發(fā)應(yīng)用，并在O2服務(wù)器的webServer中運(yùn)行了起來。它集成了O2平臺的所有功能，您也不需要處理類似登錄等一些繁瑣的事，而且可以方便的調(diào)用O2的后端服務(wù)。并提供了一些優(yōu)化開發(fā)模式的思路。

總結(jié)

以上是生活随笔為你收集整理的O2OA开源企业办公开发平台：使用Vue-CLI开发O2应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。