dorado如何使用vue、element-ui

最新推荐文章于 2025-06-24 14:36:11 发布

原创最新推荐文章于 2025-06-24 14:36:11 发布 · 367 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #dorado #element-ui

dorado 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了如何在Dorado7环境中使用Vue和Element-UI。方法包括通过iFrameTab加载Vue的HTML页面及直接在Dorado中引入远程的Vue.js和Element-UI库。由于Eclipse版本限制，无法本地处理es6语法，所以推荐使用远程文件。在w3c-html4-template.html中添加资源引用，并在htmlContainer的onReady事件中写入初始化JS代码。若仅使用Element-UI样式，可直接引入无需额外处理。

使用环境：

dorado7+eclipse4.3

方式1：通过iframTab控件加载使用vue的html页面

此方式通过写vue页面，然后通过iframTab控件的path属性加载整个页面
在这里插入图片描述

方法2 ：直接在dorado中使用vue和element-ui

方法1不够灵活，想在dorado中直接使用vue和element-ui，怎么办？

不能使用把相关css和js文件下载到本地

由于 vue 中使用了 es6，而 eclipse 4.3 版本太低，不能安装 enide2015 来解决 es6 问题，所以只能使用远程文件

使用远程文件

步骤1 ：WebContent/WEB-INF/dorado-home/w3c-html4-template.html，是所有该项目的 view 视图都会加载的模板，所以直接在其中添加 vue.js 和 element-ui 的 css 和 js 文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">
#outputPageHeader()
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body scroll="no" style="margin:0px; overflow:hidden">
	<label id="doradoView" style="display:none" />
#outputPageFooter()
#outputException()
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</html>

步骤2 ：使用 htmlContainer，在 content 中添加 html 代码

<div id="app">
<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
</div>

步骤3 ：在该 htmlContainer 的 onReady 事件上添加 js 代码

new Vue().$mount('#app');//设置vue的作用区域，$mount()为id选择器

在这里插入图片描述

注意

如果只是使用 element-ui 的 css，不用，等 tag，可直接使用，不用步骤3