如何在vue中使用umy-ui

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

本篇文章给大家详细介绍一下在vue中使用umy-ui的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

1.下载umy-ui http://www.umyui.com/

1

npm install  umy-ui    ||    yarn add umy-ui

2.创建存放umy-ui的文件 umy-ui.js

1

2

3

4

5

6

//完整引入

import Vue from 'vue';

import UmyUi from 'umy-ui'

import 'umy-ui/lib/theme-chalk/index.css';// 引入样式

 

Vue.use(UmyUi);

最好使用按需引入，借助 babel-plugin-component，以达到减小项目体积的目的。

npm install babel-plugin-component

3.在babel.config.js中进行设置

1

2

3

4

5

6

7

8

9

10

11

module.exports = {

  presets: [

    '@vue/app'

  ],

  plugins: [

    ["component", {

      'libraryName': "umy-ui",

      "styleLibraryName": "theme-chalk"

    }, "umy-ui"]

  ]

}

按需引入

1

2

3

4

5

6

7

8

9

10

11

12

import Vue from 'vue';

import {

  UTableColumn,

  UTable,

  UxGrid,

  UxTableColumn

} from 'umy-ui';

 

Vue.use(UTableColumn);

Vue.use(UTable);

Vue.use(UxGrid);

Vue.use(UxTableColumn);

在main.js中导入一下文件即可，当然以上代码也可以直接写道main.js中，但是代码就没有那么优雅了

4.最大的好处是使用虚拟表格，当数据非常之庞大的时候，用虚拟表格不会显得卡顿

阅读剩余部分

相关阅读 >>

怎么运行vue.js

$nexttick vs settimeout，看看它们的差异

vue实现打印功能的两种方法(附代码)

vue-material是什么？

vuwe是什么意思？

vue文件怎么打开

vue.js监听键盘事件

vue项目中关闭eslint校验的方法介绍

javascript之ssm+vue前后端分离框架整合实现

vue.js能做轮播图吗

更多相关阅读请进入《vue》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...