Uni-App项目搭建以及准备工做

准备工做

Uni-App项目开发，须要“定制化IDE”，也就是“HBuilderX”工具，主要是由于模拟运行调试一块，其余IDE不具有，其余功能和VS code、Submit Text 基本一致。

因此咱们第一步咱们下载工具：HBuilderX

下载App开发版，可开箱即用；以下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可以使用。如使用cli方式建立项目，可直接下载标准版，由于uni-app编译插件被安装到项目下了。

若是须要开发小程序，固然就要成为小程序端的开发者，因此第二步就是注册成为小程序端的开发者，拥有appid。

第三步，若是开发ios app，还须要去申请证书，方便后面上架App Store作准备。

建立 Uni-App

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app，输入工程名，而且你能够从模板里的 你喜欢的模板 便可体验官方示例。最后点击建立，便可成功建立 uni-app 项目。

官方模板地址：DCloud 插件市场

建立完成后目录结构以下

目录结构介绍

注意：

static 目录下的 js 文件不会被编译，若是里面有 es6 的代码，不通过转换直接运行，在手机设备上会报错。

css、less/scss 等资源一样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

HbuilderX 1.9.0+ 支持在根目录建立 ext.json sitemap.json 文件。

运行uni-app项目

浏览器运行：进入项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，便可在浏览器里面体验uni-app 的 H5 版。

同理，还能够运行到手机模拟器，小程序模拟器等。

运行后，目录会多一个，这里就是各端编译后的文件，以下图：app-plus(ios端)，mp-toutiao(头条小程序端)，mp-weixin(微信小程序端)

注意： 如何你“微信小程序模拟”，须要打开微信开发工具，而后 设置 -> 安全 -> 服务端口 -> 开启。不然链接接不上。

头条小程序，先模拟运行，而后打开头条小程序开发工具，导入项目，选择上图的mu-toutiao目录，后面更改文件，就好自动更新编译过去了。

总结

项目搭建是很是快速的，和vue脚手架同样便利。同时，须要注意上面标注的"注意"事项，这样搭建，以至后面开发会更简单、轻松一些。

最后，谢谢你们支持。

喜欢的能够关注我哦!

原文地址：www.javanx.cn/20190826/un…