uni-app整合uViewUI(非常牛逼的uni-app组件)

举报
代码哈士奇 发表于 2021/05/18 15:32:49 2021/05/18
【摘要】 哈喽,小伙伴们大家好,我是代码哈士奇。这篇文章带大家了解uni-app如何整合uViewUI视频教程 https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/ 什么是uViewuView UI,是uni-app生态最优秀的UI框架官网为https://www.uviewui.com/熟悉uni-app的小伙伴应该都知道通过...

哈喽,小伙伴们大家好,我是代码哈士奇。
这篇文章带大家了解uni-app如何整合uViewUI
视频教程 https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/

什么是uView

uView UI,是uni-app生态最优秀的UI框架
官网为https://www.uviewui.com/
熟悉uni-app的小伙伴应该都知道通过组件我们能快速的开发一个应用
加上现在有了uniCloud,粗略的估算了下,如果我们写过一两个练手实战,可能用不到3个小时你就能开发出来一个程序
要想好看又实用 那么就选择uni-app吧~

安装uView

新建项目

图片.png
我们随便新建一个项目

图片.png

npm下载

项目根目录执行npm install uview-ui

图片.png

如果出现下面这种情况
图片.png

需要初始化package.json

执行 npm init 一路回车即可
图片.png

然后 npm install uview-ui

配置main.js


import uView from “uview-ui”;
Vue.use(uView);
复制进main.js 如下图
图片.png

配置 uni.scss


@import ‘uview-ui/theme.scss’;
复制进入uni.scss

如下图
图片.png

配置App.vue

<style lang="scss"> /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */ @import "uview-ui/index.scss"; </style>

替换
图片.png

如下图
图片.png

配置pages.json


“easycom”: {
“^u-(.*)”: “uview-ui/components/u-$1/u-$1.vue”
},
复制进pages.json
如下图
图片.png

完成配置

测试

引入宫格图

复制官方文档的代码
图片.png
图片.png

引入表格

复制官方文档的代码
图片.png

图片.png

完成

拓展

官方提供了很多的工具以及模板还有资源下载

uView非常好使,支持平台多,如会使用,如虎添翼~

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。