一、 HBuildX的介紹

HBuildX也是DCloud開發的一款編輯器，和uni-app是同一個公司開發的。可想而知，HBuildX對uni-appa支持程度極高，因此我們也就選用HbuildX作為uni-app開發的主編輯器。

二、安裝HbuildX

• 官網下載：HBuilderX-高效極客技巧?選擇APP開發版
• 解壓后即可使用
• 安裝插件：工具=>插件安裝（uni-app(vue2)編譯、uni-app(vue3)編譯、scss/sass編譯）

三、創建第一個uni-app

• 啟動HbuildX，文件=>新建=>項目=>選擇uni-app=>填寫項目名，項目路徑=>選擇項目模板：uni-ui項目=>點擊創建

• 項目結構

  |-- components uni-app組件目錄 |-- pages 頁面目錄 |-- static 存放應用引用的本地靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放于此 |-- main.js Vue入口文件 |-- App.vue 應用全局配置文件 |-- manifest.json 配置應用名，打包版本，appid,logo等打包信息的配置文件 |-- pages.json 配置路由，導航條，選項卡等頁面信息文件 |-- index.html 適配vue3 |-- uni.scss uni-app內置的常用樣式變量

四、運行

1、運行到瀏覽器

• 運行到chrome瀏覽器：進入到uni-app=>運行=>運行到瀏覽器=>運行到chrome瀏覽器
• 運行到內置瀏覽器：安裝“內置瀏覽器插件”=>運行=>運行到內置瀏覽器

2、運行到微信小程序

• 安裝微信開發者工具，地址：穩定版 Stable Build | 微信開放文檔
• 打開服務端口：啟動微信開發者工具，點擊設置圖標=>安全=>打開服務端口
• 配置微信小程序路徑：打開HbuildX，點擊運行=>運行到小程序模擬器=>運行設置=>找到小程序運行配置下的微信開發者工具路徑進行配置
• 運行：打開HbuildX，進入項目，點擊運行=>運行到小程序模擬器=>微信開發者工具=>微信小程序會自動打開并運行項目

3、運行到安卓手機

• 將手機通過數據線連接到計算機
• 將手機設置為USB調試模式，不同型號手機設置方式不同，大家可以去搜索一下
• 運行：打開HBuildX，進入項目，單擊運行=>運行到手機或模擬器=>運行-設備:Android-*****
• 運行后，手機會安裝HBuilder應用，安裝完成后，就可以預覽了。

4、運行到蘋果手機

• Windows電腦連接蘋果手機，要先安裝iTunes，地址：Apple - Support - Downloads
• 將手機用數據線連接到電腦=>選擇“信任“。
• 打開HBuildX，進入項目，單擊運行=>手機運行=>選擇iphone設備，等待編譯完成，就可以預覽了。

總結

以上是生活随笔為你收集整理的uni-app开发环境配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。