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会自定创建好整个目录结构:
image.png
  本例中,我们将嵌入一个O2平台数据中心中的视图,展现内容管理信息;并创建两个按钮,用于创建信息文档和打开主页。

添加O2脚本引入

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

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

image.png
  为了方便后续引入,我们在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文件如下:






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

推荐文章:

服务集成-发送用户账号密码进行登录认证
2021-03-02
O2OA提供多种SSO单点认证方式,比如约定密钥,OAuth2,SMAP等等。本文主要演示如何发送用户账号密码进行登录认证。
服务器下载及私有云部署
2021-02-19
本篇主要简单描述从官网下载服务器,进行部署,启动的过程,并且描述在部署过程中常见的问题与报错以及云服务器安全策略配置和O2OA服务器端口修改的方式。使用华为云+
源码使用-使用Eclipse导入o2server源码
2021-03-15
O2OA是真正全代码开源的应用开发平台,开发者可以直接使用从github或者gitee上clone的源码编译成安卓客户端,代码可以修改,安全可靠,无限制。本文主
系统架构-基于nginx快速集群部署-上下文分发
2021-02-26
O2OA平台使用分布式架构设计,提供灵活的扩展方案用于对服务器的负载能力进行扩展,保障系统的高可用性。本篇主要介绍如何基于nginx上下文分发的方式快速集群部署
系统安全-自签名SSL证书验证HTTPS功能
2021-02-25
为增加系统和用户的安全性,平台支持启用HTTPS,使用SSL对网络流量进行证书加密传输。本篇主要介绍如何将在O2OA中使用自签名SSL证书验证HTTPS功能。
常见问题-接口代码疑惑解答汇总
2021-02-07
一、分页样例代码try(EntityManagerContaineremc=EntityManagerContainerFactory.instance().c
快速入门-平台相关资料汇总
2021-02-07
一、官网http://www.o2oa.net/download.html二、前端框架https://mootools.net/三、jpahttps://www
系统配置-数据库驱动JAR包更改
2021-02-25
O2OA信息化系统开发平台默认自带Mysql8或者其他数据库某固定版本的jdbc驱动包,当用户使用的数据库系统版本与O2OA默认驱动不兼容时可能会导到某些数据库
业务开发-组织架构-系统内置角色信息介绍
2021-03-22
O2OA提供数十种内置角色来控制系统的管理权限,用户可以适当组合相应的角色来实现功能的权限控制。本文主要介绍如何在O2OA中的各类角色权限信息。
开发知识-React篇:在React应用中集成O2OA
2021-02-07
  在前面的章节中,我们介绍了两种在O2OA中使用React开发应用的方式,已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器,自己搭建web服

results matching ""

    No results matching ""