手把手教你如何運行一個前端uniapp項目

更新時間：2025年01月22日 09:07:23 作者：Junes?inh

這篇文章主要介紹了如何設置和運行一個基于uni-app框架的項目,包括安裝必要的軟件、克隆項目并安裝依賴,以及如何使用HBuilderX進行項目運行和調(diào)試,需要的朋友可以參考下

前言

要運行 xx-uniapp-v2 這個項目，您可以按照以下步驟來設置開發(fā)環(huán)境。

這個項目基于 uni-app 框架，通常需要 Node.js 和 HBuilderX 開發(fā)工具來運行。

安裝 Node.js：
- 到 Node.js 官網(wǎng) 下載并安裝 Node.js（建議安裝 LTS 版本）。
- 安裝完成后，打開終端（或命令行）并運行以下命令，確認安裝成功：
```
node -v npm -v
```
安裝 HBuilderX：
- HBuilderX 是 uni-app 官方推薦的開發(fā)工具，前端代碼的開發(fā)和調(diào)試會更方便?？梢栽?HBuilderX 官網(wǎng) 下載并安裝。

克隆項目：
- 打開終端，運行以下命令將項目克隆到本地：
```
git clone https://github.com/xxx.uniapp-v2.git
```
- 進入項目目錄：
```
cd xx-uniapp-v2
```
安裝依賴：
- 在項目目錄下運行以下命令來安裝項目依賴：
```
npm install
```
- 這個命令會根據(jù)項目的 package.json 文件自動安裝所需的依賴包。
  如果遇到環(huán)境問題，類似：error peer vue@">= 2.5 < 2.7" from @vue/composition-api@1.7.2
```
npm install --legacy-peer-deps
```
  npm i --legacy-peer-deps 是一種忽略 peerDependencies 依賴沖突的安裝方式。當運行這個命令時，npm 將不會嚴格驗證 peerDependencies 的版本要求，允許安裝過程中出現(xiàn)的依賴版本沖突繼續(xù)安裝下去。
  
  在 npm 7 及更高版本中，默認會嚴格檢查 peerDependencies。如果檢測到不兼容的 peerDependencies，就會報錯，阻止安裝。使用 --legacy-peer-deps 可以繞過這個檢查，使得安裝更類似于 npm 6 的行為，從而避免版本沖突帶來的安裝失敗。

打開項目：
- 啟動 HBuilderX，選擇“文件” > “打開目錄”，然后選擇剛剛克隆的 xx-uniapp-v2 項目目錄。
運行項目：
- 在 HBuilderX 中，選擇左側(cè)的 運行 按鈕。
- 可以選擇在瀏覽器中預覽（例如，點擊“運行到瀏覽器”）或在模擬器中運行。
配置 API 地址（可選）：
- 如果項目需要后臺接口支持，可以檢查項目中的 manifest.json 或 .env 文件，修改其中的 API 地址以指向您自己的后端環(huán)境。

如果您需要在實際的 Android 手機上測試該項目，可以選擇 HBuilderX 的“運行到手機或模擬器”選項，這樣會打包并部署到連接的 Android 設備上。
在 Android 設備上調(diào)試時，確保手機的 USB 調(diào)試 功能已開啟，并且 HBuilderX 可以識別到設備。