VUE集成EasyUI

EasyUI是非常成熟前端框架，它对VUE支持也非常完善，参考其中文官网也非常容易入手http://www.jeasyui.cn与官网http://www.jeasyui.com，参照如下步骤开始使用EasyUI-VUE

1、使用Eclipse的CodeMix插件创建VUE工程

2、使用NPM安装vx-easyui程序包

在项目所在目录运行
npm install vx-easyui --save

3、在VUE工程的main.js中引入Easyui

4、修改HelloWorld.vue文件

引入EasyUI datagrid和tree

<template><Layout style="width:100%;height:100%;"><LayoutPanel region="north" style="height:50px;"><div class="title">North Region</div></LayoutPanel><LayoutPanel region="south" style="height:50px;"><div class="title">South Region</div></LayoutPanel><LayoutPanel region="west" style="width:200px;"><div class="title"><h2>导航</h2><Tree :data="treedata" @selectionChange="selection=$event"></Tree><p v-if="selection">Selected: {{selection.text}}</p></div></LayoutPanel><LayoutPanel region="center" style="height:100%"><div class="title"><div style="margin-bottom:10px"><Label for="c1">Pager on: </Label><ComboBox inputId="c1" style="width:120px":data="pageOptions" v-model="pagePosition" :editable="false":panelStyle="{height:'auto'}"></ComboBox></div><DataGrid style="height:100%":pagination="true":data="data":total="total":pageSize="pageSize":pagePosition="pagePosition"><GridColumn field="inv" title="Inv No"></GridColumn><GridColumn field="name" title="Name"></GridColumn><GridColumn field="amount" title="Amount" align="right"></GridColumn><GridColumn field="price" title="Price" align="right"></GridColumn><GridColumn field="cost" title="Cost" align="right"></GridColumn><GridColumn field="note" title="Note"></GridColumn></DataGrid></div></LayoutPanel></Layout></div>
</template><script>
export default {data() {return {total: 10000,pageSize: 20,data: [],pagePosition: "bottom",pageOptions: [{ value: "bottom", text: "Bottom" },{ value: "top", text: "Top" },{ value: "both", text: "Both" }],treedata: this.getTreeData()};},created() {this.data = this.getData(this.total);},methods: {getData(total) {let data = [];for (let i = 1; i <= total; i++) {let amount = Math.floor(Math.random() * 1000);let price = Math.floor(Math.random() * 1000);data.push({inv: "Inv No " + i,name: "Name " + i,amount: amount,price: price,cost: amount * price,note: "Note " + i});}return data;},getTreeData() {return [{id: 1,text: "My Documents",children: [{id: 11,text: "Photos",state: "closed",children: [{id: 111,text: "Friend"},{id: 112,text: "Wife"},{id: 113,text: "Company"}]},{id: 12,text: "Program Files",children: [{id: 121,text: "Intel"},{id: 122,text: "Java"},{id: 123,text: "Microsoft Office"},{id: 124,text: "Games"}]},{id: 13,text: "index.html"},{id: 14,text: "about.html"},{id: 15,text: "welcome.html"}]}];}}
};
</script>
<style>
.title {text-align: center;margin-top: 10px;
}
</style>

5、启动VUE项目

npm run serve

6、浏览器测试

VUE集成EasyUI相关推荐

如何使用Vue集成其它UI组件？如何阅读UI官网？移动端组件Vant实例教程（熬夜干货）
如何使用Vue集成其它UI组件前言一.Vant是什么? 二.基础环境准备 1.1 了解是根本 1.2 安装 1.3 引入组件 3.1 步骤一 3.2 步骤二 3.3 步骤三二.事件绑定 2.1 ...
Electron中与Vue集成流程
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
Node.js、Npm、MVVM模式、idea的vue集成
Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
利用官方的vue-cli脚手架来搭建Vue集成开发环境
在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...
SpreadJS与Vue集成，苏宁集团『极客办公』系统开发案例
"造极"如今已成为苏宁集团的年度核心关键词."造极"在具体工作上的体现,代表着苏宁不断追求极致的工匠精神,即对待每一个环节,都要严格要求.精益求精." ...
Vue集成Cesium之二 —— 相机（Camera）
上一篇文章初步写了一下 vue 集成 cesium 方法和注意的地方. 最近因为项目中用到的地图资源并不是拿来就能用,需要调整显示的角度.缩放等设置.所以把 cesium 所有的相机(也就是视角)设置 ...
vue集成Highcharts 云词图
vue集成Highcharts 云词图最近接手一个需求,需要服务端统计词语,前端出一个云图. 记得很早之前在echarts看到过一个云词图,去翻一下echarts官网没翻到索性去Highcharts ...
vue集成超图supermap-cesium实践
一.使用vue-cli创建vue工程 1,cmd进入文件夹20200305,创建名为vuesupermap的工程. 命令为:vue init webpack vuesupermap 2,进入项目根目录 ...

VUE集成EasyUI

1、使用Eclipse的CodeMix插件创建VUE工程

2、使用NPM安装vx-easyui程序包

3、在VUE工程的main.js中引入Easyui

4、修改HelloWorld.vue文件

5、启动VUE项目

6、浏览器测试

VUE集成EasyUI相关推荐

最新文章

热门文章