这篇文章想着是记录一下我最近开发uniapp的经历和踩坑。感觉还是蛮有意思的。这里是总结的搭建环境时遇到的坑
- uniapp使用vue-cli创建vue+TS + uview 架构项目
- 引入uview后相关问题
- 编译时sitemap.json没有找到的问题
开始uniapp的开(cai)发(keng)
今年收假回来本想着开年没活,可以快乐的摸鱼[狗头],结果一回来就告诉我需要把小程序重构了。打算支持包括微信小程序,百度小程序,支付宝小程序,快应用。选型已经选好uniapp啦。因为挺着急的嘛,所以就赶忙学习了一波uniapp。
搭建环境
在讲搭建过程之前我先介绍一下我们uniapp选用的技术架构。我们采用的是Vue( vue-property-decorator装饰器写法 ) + TS + uviewUI1.0的架构。搭建这套环境还是遇到了不少问题
一开始接手的时候已经使用hbuilderX搭建了一套demo(选择的时候选的是默认的模板,没接TS),里面包含uviewUI,我顺着这套架子去引入TS。因为我们之前项目使用额是“vue-property-decorator”那种装饰器写法,所以现在小程序也想用这样的写法。然后我一头扎下去就发现各种TS语法报错,查了一下uview里面的源码是用js写的,还有一些hbuilderX创建项目时自己创建的文件也是一大推TS语法报错,这修起来就很费劲。加上vue-property-decorator写法也有一些坑,还有平时喜欢用vscode,开发的时候用vscode写代码,HbuilderX启项目,微信小程序看效果,那开发体验简直不要太好,所以我查了一下github上面大佬的demo和网上一些搭建教程,果断跟老大请示重新用vue-cli重新搭建一套框架来开发,刚好趁着开发还不是很多的时候赶快换个坑踩,哈哈。然后老大就同意啦。我就赶忙换上vue-cli重新搭建了模板。我这推荐看一下uniapp官网的教程 :传送门 。还有这位大佬的文章:vscode + uniapp + Ts + uview-ui 创建步骤和问题。
我就是照着上面两篇文章和踩坑一步步搭建的。
我这里列几个我遇到的坑
- 引如uview遇到的node-sass的问题
我遇到的问题是报sass-loader报错。查找了一番原来是node-sass ,sass-loader,node的版本问题,下面有个对照表,以及我这边摸索出稳定的版本号
我自己配置的版本是 :
Node : 12.16.2
"node-sass": "^4.14.0",
"sass-loader": "^8.0.2",Ï
- Uview TS语法报错
这个错误就是无法找到模块“uview-ui”的声明文件。
这里在src下的sfc.d.ts里面增加以下代码
declare module 'uview-ui'
然后如果是把uview放到本地文件下的情况,需要在tsconfig.json里面exclude加入uview-ui
"exclude": [
"node_modules",
"unpackage",
"src/**/*.nvue",
"uview-ui"
]
- sitemap.json没有找到的问题
这个我开发的时候我发现一起开发的小伙伴都遇到了,所以这里记录一下。解决方法很简单,看一下有没有sitemap.json文件,如果有,拷贝里面内容后删掉这个文件,新建一个sitemap.json文件,粘贴内容,解决问题。如果没有,新建文件,加入以下代码,解决问题
{
"rules": [{
"action": "allow",
"page": "*"
}]
}
已上是我再搭建uniapp项目时遇到的一些问题,这篇文章更多的是记录一些经历,搭建环境的步骤我感觉按照上面安利的两篇教程搭建已经可以很好的搭建起项目了,所以这里就不再重复啦,下一篇就是记录开发过程的经历和遇到的坑。