uniapp 中安装使用 uView ui 框架 (适合新创建的项目,老项目的使用npm的方式更稳妥点)

哎 本来   博主  不是从事uniapp 的开发人员 但是对 uniapp的关注 还是挺上心的 

当年 这个ui框架出来的 那一刻  我还去 看了看   赞助了点钱呢   

这框架 还是挺厉害   其实 我还是很像从事 uniapp 开发呢 奈何  所在的几家公司 都不用   尴尬了  希望下家公司会用到 吧 哈哈

好了 我们 步入正题了

1.  首先 就是  先去 下载  插件包

uView UI已发布Sketch和Axure设计资源 - DCloud 插件市场   

2. 用 hbuilerX  创建一个  新的uniapp 项目 从零开始     把刚刚下载的  放到  和 main.js 的同级目录下

3.  将下面的代码 放到 main.js  中

import uView from "uview-ui";
Vue.use(uView);

4 .  下面的放到  uni.scss 文件中      注意   前提 你的软件中必须安装了  scss这个插件哦  没有的话  就去安装一个scss插件

@import 'uview-ui/theme.scss';

5.  将下面的这句话   放到  pages.json 文件中

"easycom": {
			"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
		},

6. 然后就开始 使用我们的   ui 组件   不过这个时候 还是重启下  你的编辑器  重新进行编译

<u-button type="primary">月落</u-button>
<u-calendar v-model="show" :mode="mode"></u-calendar>
<u-button @click="show = true">打开</u-button>

7. 在App.vue文件。 记得加上。 lang=scss

<style lang="scss">
	@import "uview-ui/index.scss";
	/*每个页面公共css */
</style>

看下 实际的效果哈      是不是可以了    uView ui  还是做得很好的  值得 推荐

关注我  持续更新前端知识    

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yunchong_zhao

帮到你了,请作者喝杯矿泉水可好

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值