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>