引入uview版本的问题

uview至今已经出了1.0和2.0两个版本,奥。。。昨天更到3.0了。。。。抱歉。。奥
那么在uniapp项目中引入他们有什么区别呢
首先登陆Hbuilder的官网 https://www.dcloud.io/ 去到插件市场。
前提:你的Hbbulider已经登上了你的账号
在这里插入图片描述搜索框里搜索 uview
在这里插入图片描述找到1.0的插件点进去下载
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述在这里插入图片描述
原始的新建的目录
在这里插入图片描述
引入view1.0后的目录
在这里插入图片描述

接下来引入2.0版本
在这里插入图片描述在这里插入图片描述

在这里插入图片描述看到这里,相信大家也都看出来了,引入两个版本的区别。2.0将1.0原本散落四处的目录归结为了一个总目录。建议大家引入2.0,因为想要使用uview的组件,光是引入插件是不够的。后面还要在好几个文件中引入对应的目录。

首先是在main.js中引入插件并使用
在这里插入图片描述

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

然后我们来到 pages.json在这里插入图片描述

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

接着我们来到 App.vue。大家一定要注意这个路径的问题呀,我刚开始写的时候就是如下图,路径写错了直接报错,然后我就注释掉了,再写这里的时候回去看,发现是自己路径写错了。。。
.
在这里插入图片描述

@import "@/uni_modules/uview-ui/index.scss";

最后来到项目的最后一个文件uni.scss
在这里插入图片描述

@import "@/uni_modules/uview-ui/theme.scss"; // 引入uView样式 
@import "@/uni_modules/uview-ui/index.scss"; // 引入uView样式 

在以上的4个文件中引入之后。我们来开始在页面中使用uview的组件
在这里插入图片描述
在这里插入图片描述到这里,你应该知道为什么我建议你引入至少2.0了吧,毕竟在其他文件写路径的时候,你可能会对这些路径犯迷糊。以上是我刚刚之前遇到的坑,综合了其他大佬提供的解决方案,记录一下方便我以后回来找解决方案。

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值