写在前面
今天开始学习使用uni-app框架,来开发一个简单的app项目。
uni-app采用了vue来进行编写,我们也是要跟着学习一些vue3的一系列语法。
部署环境
让我们先下载一个uni-app的开发工具,那就是HBuilderX,可以开箱即用,无须配置其他环境,比如node.js。
如果你也需要下载,那么请去官网上下载最新版,国内开发的IDE,问题及国内的更新还是比较及时的。
开始创建一个uni-app项目
打开HBuilderX开发工具,选择文件——新建项目,到达如下界面:
当前是可以选择模板的,HBuilderX提供了几个很方便的模板:
默认模板:自然就什么都没有了
Hello uni-app:这个模板中具有着uni-app框架的一些组件、接口、模板等功能。称得上是uni-app的入门示例。
Hello uni-Cloud:此模板中集成了Cloud云服务的一些基本操作。
uniStarter:如果你用过springboot-start的话,那这个就好理解了,快速开发模板。
uni-ui库:此模板中具有uni提供的一系列的ui组件库,也是我们之后要一点点的学习的任务。
还有很多的模板,我记得一开始没几个模板,最近猛然发现更新了好多有意思的模板。
今天我们就先选择uni-ui模板来初始化一个Demo项目。
创建成功后,如下图目录:
随后让我们通过Chrome浏览器来运行,点击运行——浏览器——Chrome。
不过这里建议大家不要使用浏览器去调试,最好是有个真机去调试,效果会直接展示出来的。