创建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、京东等小程序开发工具里运行：内容同上，不再重复。