“作者：坚果
公众号："大前端之旅"
华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，Javascript。
”
是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。当然在手，做啥都不愁。即使不跨端，也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
一图胜千言
支持通过 可视化界面、命令行 两种方式快速创建项目。
可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。
开始之前，开发者需先下载安装如下工具：
- HBuilderX：官方IDE下载地址
HBuilderX是通用的前端开发工具，但为做了特别强化。
下载之后解压缩运行exe文件
选择新建项目
选择uni-app类型，输入项目名，选择模板，点击创建，即可成功创建。
uni-app自带的模板有。Hello uni-app，是官方的组件和API示例。还有一个重要模板是uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。
除了HBuilderX可视化界面，也可以使用 脚手架，可以通过 创建 项目。
环境安装
全局安装vue-cli
创建uni-app
使用正式版（对应HBuilderX最新正式版）
使用alpha版（对应HBuilderX最新alpha版）
使用Vue3/Vite版
创建以 javascript 开发的工程（如命令行创建失败，请直接访问
gitee
下载模板）
创建以 typescript 开发的工程（如命令行创建失败，请直接访问
gitee
下载模板）
此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 项目模板，如下所示：
自定义模板
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 ，如 就是下载图片模板。
更多支持的下载方式，请参考这个插件的说明：download-git-repo
运行、发布uni-app
可取值如下：
可以自定义更多条件编译平台，比如钉钉小程序，参考package.json文档。
使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别
编译器的区别
- 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，可以使用 @dcloudio/uvm 管理编译器的版本，如 。
- HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
- 已经使用创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
- 版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。
开发工具的区别
- 创建的项目，内置了d.ts，同其他常规npm库一样，可在vscode、webstorm等支持d.ts的开发工具里正常开发并有语法提示。
- 使用HBuilderX创建的项目不带d.ts，HBuilderX内置了uni-app语法提示库。如需把HBuilderX创建的项目在其他编辑器打开并且补充d.ts，可以在项目下先执行 ，然后，来补充d.ts。
- 但vscode等其他开发工具，在vue或uni-app领域，开发效率比不过HBuilderX。详见：https://ask.dcloud.net.cn/article/35451
- 发布App时，仍然需要使用HBuilderX。其他开发工具无法发布App，但可以发布H5、各种小程序。如需开发App，可以先在HBuilderX里运行起来，然后在其他编辑器里修改保存代码，代码修改后会自动同步到手机基座。
- 如果使用创建项目，那下载HBuilderX时只需下载10M的标准版即可。因为编译器已经安装到项目下了。
进入hello-uniapp项目，点击工具栏的运行->运行到浏览器->选择浏览器，即可在浏览器里面体验uni-app的H5版。
运行成功
1）注意：如果是第一次使用，
需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径
若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径复制到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可以看到实时的效果。uni-app或将项目编译到根目录的unpackage目录。
2）开启小程序IDE服务端口的安全设置
3）运行效果
进入hello-uniapp项目，点击工具栏的运行->运行到小程序模拟器->微信开发者工具，即可在微信开发者工具里体验uniapp
连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。
进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 支付宝小程序开发者工具，即可在支付宝小程序开发者工具里面体验uni-app。
进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 百度开发者工具，即可在百度开发者工具里面体验uni-app。
进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 字节跳动开发者工具，即可在字节跳动开发者工具里面体验uni-app。
进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 360开发工具，即可在360开发工具里面体验uni-app。注意360工具只有windows版
进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 快应用联盟工具，即可在快应用联盟工具里面体验uni-app。
进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 华为开发者工具，即可在华为开发者工具里面体验uni-app。
Tips
- 如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
- 支付宝/百度/字节跳动/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开。
- 如果自动启动小程序开发工具失败，请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径，打开项目。
运行的快捷键是。
下载手机模拟器
MUMU模拟器：https://mumu.163.com/
模拟器端口：
一个 uni-app 工程，默认包含如下目录及文件：