# 開發環境搭建 [TOC] ## 開發環境搭建 ### 一、安裝開發工具 安裝HBuilderX 官方下載地址【[官方IDE載地址](https://www.dcloud.io/hbuilderx.html)】 安裝教程【[安裝教程](https://www.jianshu.com/p/6f59ad582a96)】 HBuilderX是通用的前端開發工具，但為uni-app制成特別強化。 下載App開發版，可開箱即用；如下載標準版，在運行或發行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用。 ### 二、項目 #### 1、使用HBuilderX導入項目 （1）前端工程jeecg-uniapp （2）HBuilderX打開項目   （3）修改接口api  #### 2、運行uni-app 1.**瀏覽器運行**：進入jeecg-uniapp項目，點擊工具欄的運行->運行到瀏覽器->選擇瀏覽器，即可在瀏覽器里面體驗uni-appH5版。   H5在開發環節，運行到外部瀏覽器可能會出現跨域的問題。 如果遇到跨域造成js無法聯網，注意網絡請求（request、uploadFile、downloadFile等）在瀏覽器存在跨域限制，解決方案有詳見：[https://ask.dcloud.net.cn/article/35267](https://ask.dcloud.net.cn/article/35267)。 如果只是開發調試可以使用內置瀏覽器，沒有跨域等的問題，首次使用內置瀏覽器可能會提示下載，運行成功后，可以在右側看到相應的頁面。  2.**在微信開發者工具里運行**：進入jeecg-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->微信開發者工具，即可在微信開發者工具里面體驗jeecg-uniapp項目   注意：如果是第一次使用，需要先配置小程序ide的相關路徑（見下圖），才能運行成功。如下圖，需在輸入框輸入微信開發者工具的安裝路徑。若HBuilderX不能正常啟動微信開發者工具，需要開發者手動啟動，然后將uni-app生成小程序工程的路徑復制到微信開發者工具里面，在HBuilderX里面開發，在微信開發者工具里面就可以看到實時的效果。uni-app或將項目編譯到根目錄的unpackage目錄。  3.真機運行：連接手機，開啟USB調試，進入jeecg-uniapp項目，點擊工具欄的運行->運行到手機或瀏覽器->選擇運行的設備，即可在該設備里面體驗uni-app。  運行成功后可在手機上看到頁面  如手機無法識別，請點擊菜單運行-運行到手機或模擬器-真機運行常見故障排查指南。運行前最好下載一個手機助手測試一下手機連接是否正常