uni-app支持通过 可视化界面、vue-cli命令行两种方式快速创建项目。

通过 HBuilderX 可视化页面

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。
开始之前，开发者需先下载安装如下工具：

• HBuilderX：官方IDE下载地址(opens new window)

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
下载后默认不包含uni-app插件，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。

创建uni-app

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

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

运行uni-app

浏览器运行

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

运行App到手机或模拟器

连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。

如手机无法识别，请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。

在微信开发者工具里运行

进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。


注意：微信开发者工具需要开启服务端口 在微信工具的设置->安全中。
打开小程序，点右上角的齿轮设置，打开服务端端口，这样HBuilderX才能调用小程序模拟器运行项目。

通过vue-cli命令行

说明

Uni-app已经支持Vue3 和 Vue3的composition API，这里创建Vue3 小程序项目。
目前小程序，仅支持 cli 方式创建支持 vue3 默认模板项目，不支持Vite，可能是因为Vite打包后的文件夹有关，期待后续发展。

环境安装

全局安装vue-cli，打开控制台 （cmd，也叫命令行工具），输入

npm install -g @vue/cli

创建uni-app

windows环境下，找到你想要存放这个项目的文件夹，然后在上面地址栏上输入cmd，打开命令行工具，这样做同时会设置好前面的路径

然后输入

vue create -p dcloudio/uni-preset-vue#vue3 my-vue3-project

这里的my-vue3-project，是你项目的名字，可以随意更改
安装过程中会询问，是默认的项目（JS），还是用TypeScripts的项目，按你个人选择。

运行、发布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

两种创建项目方式的区别

编译器的区别

• cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，可以使用 @dcloudio/uvm管理编译器的版本，如 npx @dcloudio/uvm。
• HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
• 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。

• cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

  开发工具的区别

• cli创建的项目，内置了d.ts，同其他常规npm库一样，可在vscode、webstorm等支持d.ts的开发工具里正常开发并有语法提示。

• 使用HBuilderX创建的项目不带d.ts，HBuilderX内置了uni-app语法提示库。如需把HBuilderX创建的项目在其他编辑器打开并且补充d.ts，可以在项目下先执行 npm init，然后npm i @types/uni-app -D，来补充d.ts。
• 但vscode等其他开发工具，在vue或uni-app领域，开发效率比不过HBuilderX。详见：https://ask.dcloud.net.cn/article/35451
• 发布App时，仍然需要使用HBuilderX。其他开发工具无法发布App，但可以发布H5、各种小程序。如需开发App，可以先在HBuilderX里运行起来，然后在其他编辑器里修改保存代码，代码修改后会自动同步到手机基座。
• 如果使用cli创建项目，那下载HBuilderX时只需下载23.31M的标准版即可。因为编译器已经安装到项目下了。

  在VSCode中开发uni-app