创建uni-app项目
作者：互联网
一、创建uni-app项目
（1）第一种方式：
使用可视化界面创建，可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。
1.在点击工具栏里的文件 -> 新建 -> 项目：
2.选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。
差别是：HBuilderX创建的项目根目录就是源码，可直接编辑。dist在unpackage目录下。uni-app的编译器在HBuilderX的插件目录下，跟随HBuilderX升级而一起升级。
而cli创建的项目，源码在src下。uni-app的编译器也安装在项目下，不会跟随HBuilderX版本升级而升级，需要自己手动npm update。
（2）第二种方式：
通过vue-cli命令行创建
1. 使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
2.使用alpha版（对应HBuilderX最新alpha版）
alpha版相当于尝鲜版本，比最新正式版本多出许多功能。
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
3.选择模板
执行了上面命令之后，会提示选择项目模板，这里选择了默认模板
4.运行、发布uni-app
npm run dev:%PLATFORM% npm run build:%PLATFORM%
%PLATFORM% 可取值如下：这里选取了常用的3种
二、运行uni-app项目
1.浏览器运行：进入uniDemo1项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。
2.运行App到手机或模拟器：连接手机，开启USB调试，进入uniDemo1项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。
如手机无法识别，请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。
3.在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。
注意：微信开发者工具需要开启服务端口 在微信工具的设置->安全中。
4.在支付宝小程序开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 支付宝小程序开发者工具，即可在支付宝小程序开发者工具里面体验uni-app。
5.在百度、字节跳动、QQ、快应用（分联盟和华为）、快手、飞书、360、京东等小程序开发工具里运行：内容同上，不再重复。
标签：运行,创建,app,模板,微信,uni,HBuilderX 来源： https://www.cnblogs.com/czhowe/p/16551154.html