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应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。