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了吧,毕竟在其他文件写路径的时候,你可能会对这些路径犯迷糊。以上是我刚刚之前遇到的坑,综合了其他大佬提供的解决方案,记录一下方便我以后回来找解决方案。