跌跌撞撞从新手写UniAPP(一):创建项目

281 阅读3分钟

大家好,我是前端SkyRain,一个大重量级别的前端工程师(240+)。

因为工作原因,之前对uniApp接触比较少。虽然偶尔也会参与到uniApp项目的开发,但都是打打杂,没有太多深入全面的接触,所以打算自己写一个完整的uniApp项目。这一路上坑肯定是不少的,所以才会是跌跌撞撞嘛(我怕疼😭)。主要是我始终认为在实战中掉进坑里,再从坑里爬出来,具体的心得体会更深,反正又不是正式项目😎

好了,不说废话了!下面就开始正式的开启uniApp之旅。

创建项目

安装编辑器

uniApp官方的编辑器就是HBuilderX,点击下面的链接就可以到下载页进行下载和安装,安装教程也在里面,这里不在赘述。

初始化项目

安装并打开编辑器后,点击菜单栏新建→项目,会弹出一下弹窗。

微信图片_20211021092136.png

因为是新手,我们就从最基础的开始。

  • 项目类别选择uni-app
  • 项目名内容自由发挥
  • 项目存储路径自行选择
  • 项目模板选择默认模板
  • 云开发内容暂不涉及,先不选择

最后,点击创建,等待项目生成完毕,就可以了!

项目运行

运行前说明

运行项目之前,先上一张图

微信图片_20211021092652.png

这就是uniApp默认模板项目生成好的样子,应该都是一样的。如果有不一样的部分,可以po在评论区,大家一起找找原因。

运行项目

运行项目,一般有两种情况:顺利运行、运行失败。

这里就是第一坑,我顺利的掉进去了。。。

其实是我故意的(瞎掰,明明是自己疏忽大意了,但我不承认!😏)。用VSCode开发的童鞋都知道,想要运行一个项目需要先cd到项目根目录下,再执行npm run serve命令运行项目。但是uniAPP的启动是点击菜单栏运行→运行到XXX,我这里选择的是运行到浏览器→Chrome,如下图所示,结果报错了。。。

微信图片_20211021095226.png

报错如图:

微信图片_20211021095328.png

一头雾水啊!各种百度、各种求助,结果竟然是没有选中项目!!!

此处需要提及一种植物九十九次。。。

不过还好,经过我多次的尝试,只要选中项目(项目根目录或者项目中任一文件或文件夹)再执行运行操作,就正常了。

大汗啊!!!天知道我咋会遇上这个错误的。第一坑,成功跳出。

运行成功

如下图

微信图片_20211021092153.png

运行好之后,会自动打开浏览器窗口。

微信图片_20211021092157.png

至此,项目运行成功。

页面显示为手机端页面的调整,应该都有了解。

不过还是可以多一句嘴:右键→检查,或者F12打开控制台,点击下图中的手机标志即可切换。左侧的红框区域内可以选择手机型号模型来调整页面显示模板

微信图片_20211021092201.png