天天看点

HbuilderX:uni app踩坑之uView-ui

HbuilderX:uni app踩坑之uView-ui

最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款。其实有些框架我是有基础的,比如bootstrap、element、iView…可能比较喜欢新鲜的东西吧,就一脚踩进了uView。看官方文档感觉挺好用的,然后说干就干,从环境开始。

HbuilderX对uniapp的集成挺好的,有现成的模板可以用:

HbuilderX:uni app踩坑之uView-ui

其中也有uView模板,拿来就用,很方便

HbuilderX:uni app踩坑之uView-ui

但我可能是比较喜欢钻(搞)研(笑)吧,就是想自己配置一下uView,然后就是一系列的崩溃…

我按照官方文档(添加链接描述)的步骤来配置环境,很easy,这里就不贴截图了,官网都有。有了vue基础,简直就是分分钟的事。下面说说遇到的坑吧。

坑一:

我尝试了官方文档的环境配置不知道多少遍,配了又删删了又配,运行之后就是一直报错,一直说缺少什么什么文件,自己又看不懂,百度也找不到解决方案,所以又百度了使用vue-cli脚手架方式创建uniapp项目,再npm安装uView,还是不太行的样子…然后又仔细看了不知道多少遍官方文档的环境安装配置步骤,其实官方文档说的很明白:

HbuilderX:uni app踩坑之uView-ui

我电脑上的版本一直是标准版…无语…蠢哭…官方文档很友好,小伙伴们阅读要仔细了。

将HbuilderX换成开发板后,又配置了一下uView环境,一次成功。呼~

坑二:

这个不算是很大的坑。uView与element差不多,标签的写法以u开头,但是我将环境配置好之后,在敲代码时,与uView有关的标签没有代码提示,敲着很不舒服,于是又百度啊百度啊百度…这类问题百度几乎没有答案,也可能是我搜索关键字不太对。唯一有点希望的解决的方案是:将.vue文件移到项目的根目录下,我知道这样不太合理,但还是试了试能不能解决代码提示问题,果然…骗人的,不行!(也不排除有些小伙伴用这种方式可行)然后我就想啊想啊想啊…怎么办怎么办呢,于是就想,官方给了两种uView配置的方式,我用的是npm安装方式,另一种是下载安装,于是我就…没错,我将uView下载了下来,然后将其复制到项目的根目录下,代码提示问题完美解决。所以小伙伴们可以试试直接下载安装配置uView环境,不用npm安装(这个方式我没试过,感觉应该没问题),这样环境与代码提示就一步到位了。

下面介绍两种下载uView的方式:

方式1:

https://ext.dcloud.net.cn/plugin?id=1593

这是官方给的地址,最好是谷歌浏览器。进去之后,往下拉,依次选择:

HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui

项目名称可以默认,也可以自己另外命名。

将目录下的uview-ui目录整个复制到自己的项目的根目录下。

HbuilderX:uni app踩坑之uView-ui

方式2:

在HbuilderX创建项目时,直接选择uView UI模板创建项目

HbuilderX:uni app踩坑之uView-ui

然后在这个模板项目的基础上编写自己的代码。

希望这篇博客能帮到一些小伙伴。每天都犯蠢,每天都快乐,程序猿/媛宝宝们加油!