uni-app入门到项目实战

**

uni-app入门到项目实战

**

1-1创建一个uni-app项目

首先前往官方网址https://www.dcloud.io/hbuilderx.html下载HBuilder X。

一般选择”App开发版“进行下载即可。
下载完成后启动HBuilder X，即可创建新的项目，
如图所示，新建项目

选择uni-app（U）即可，给项目任取一个名称，选择默认模板即可，点击创建一个项目，如图所示
uni-app进行开发一套代码的话，是可以实现同时运行到多个平台的，能够被编译成APP或者是一个小程序…
完成以上步骤后，我们还需要在下载一个微信开发者工具
以下是下载网址https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
根据自己电脑的配置选择下载对应的稳定版本。

安装完成之后打开微信开发者工具，若为此界面，即为安装成功

1、接下来，我们需要将项目运行到这个小程序上，如图所示

（前提：如果是第一次运行这个模拟器的话还需要打开运行设置)

找到正确的路径（即微信开发者工具的安装路径）

点击第一个选项，微信开发者工具即可，它会自动启动微信开发者工具，如图所示

接下来可在开发者工具中查看或操作。

1-2目录结构介绍

我们可以看到这里的page文件，里面还包含了一个index文件（index.vue），这就相当于是一个页面，这里面是页面的内容；
我们在开发uni-app项目的时候，vue页面的结构就是这样的，分为三个部分