dorado如何使用vue、element-ui

文章目录

  • 使用环境:
  • 方式1:通过iframTab控件加载使用vue的html页面
  • 方法2 :直接在dorado中使用vue和element-ui
    • 不能使用把相关css和js文件下载到本地
    • 使用远程文件
      • 注意
  • 参考文章
    • 通过iframTab控件加载使用vue的参考文章

使用环境:

dorado7+eclipse4.3

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

此方式通过写vue页面,然后通过iframTab控件的path属性加载整个页面
dorado如何使用vue、element-ui_第1张图片
dorado如何使用vue、element-ui_第2张图片

方法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 文件

<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>

<script src="https://unpkg.com/vue/dist/vue.js">script>

<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

参考文章

通过iframTab控件加载使用vue的参考文章

  • vue 整合 dorado 框架
  • Dorado7 框架升级成 SSM, 并且使用 Vue 进行前端开发

你可能感兴趣的:(dorado,vue,dorado,element-ui)