本文摘自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 中实现 echarts 随窗体变化
一招搞定vue常用指令
关于vue使用验证器: veevalidate3
vue3.0和vue2.0的区别是什么？
vue中的样式绑定详解
.js文件中怎么引用vue
4个很 nice 的vue router过渡动效，快来收藏！
vue中mounted和created的区别（图文详解）
vue-cli项目怎么使用vw单位？
怎么安装vue.js
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 如何在vue中使用umy-ui
