一、新建項目

• 通過HbuilderX新建

在點擊工具欄里的文件 -> 新建 -> 項目（快捷鍵Ctrl+N，MacOS上是CMD + N）：

左測Tab選擇uni-app類型，輸入工程名，選擇模板，Vue版本選擇3，其他不用修改。點擊創建，即可成功創建。

uni-app自帶的模板有 默認的空項目模板、Hello uni-app 官方組件和API示例，還有一個重要模板是 uni ui項目模板，日常開發推薦使用該模板，已內置大量常用組件。

• 通過cli新建

推薦使用vue最新的3.0版本，所以cli只介紹3.0對應的指令

1、創建JavaScript項目

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

如果對應HBuilderX最新alpha版本，用下面這個指令

npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

2、創建TypeScript 項目

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

注意

• Vue3/Vite版要求 node 版本 18+、20+
• 如果使用 HBuilderX（3.6.7以下版本）運行 Vue3/Vite 創建的最新的 cli 工程，需要在 HBuilderX 運行配置最底部設置 node路徑 為自己本機高版本 node 路徑（注意需要重啟 HBuilderX 才可以生效）
  • HBuilderX Mac 版本菜單欄左上角 HBuilderX->偏好設置->運行配置->node路徑
  • HBuilderX Windows 版本菜單欄 工具->設置->運行配置->node路徑
• 如果想使用其他ide（比如VSCode）來開發uni-app，必須使用cli來創建項目

二、項目結構

上圖是一個新建項目的目錄結構

App.vue是主入口

pages-頁面文件

static-靜態資源文件?

二、項目運行

2.1 HbuilderX項目

HBuilder中可以直接通過快捷鍵CMD+R /CTRL+R或者點擊運行按鈕或者選擇頂部“運行”菜單，然后選擇運行的平臺，即可運行。

如果是運行到瀏覽器環境，直接選擇對應的瀏覽器即可。

如果是運行到微信小程序，需要按照提示安裝微信開發工具并開啟部分權限設置。

如果是運行到App環境，需要先打開模擬器或者通過usb將手機連接到電腦。然后選擇通過標準基座運行。如果項目用到一些云插件，需要通過自定義基座才能調試，自定義基座需要自己云打包制作才可使用。

自定義基座制作

制作自定義基座需要安卓、iOS開發者證書，需要另外去制作，這里不贅述了。

使用快捷鍵CMD+U / CTRL+U，或者通過頂部菜單“發行”，然后選擇云打包，在打開的頁面中配置證書信息。

1. 安卓證書信息配置：

如果有自有證書，選擇自有證書，填寫相關信息

如果沒有證書，選擇使用公共測試證書

????????2. 蘋果證書信息配置：

設置bundle ID，填寫證書相關信息

? ? ? ? ?3. 配置證書信息后，選擇“打自定義調試基座”，“傳統打包”，然后點擊右下角打包按鈕，即可提交云打包。

? ? ? ? 4. 云打包成功后，重新運行項目，即可選擇通過自定義基座運行。

2.2 cli項目

cli創建的項目，通過下面指令運行和打包發布：

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

注意

cli創建的項目，在App端不支持run，運行調試仍需在HBuilderX中操作。