快捷導(dǎo)航

手把手教你如何運(yùn)行一個(gè)前端uniapp項(xiàng)目

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

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

前言

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

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

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

克隆項(xiàng)目：
- 打開終端，運(yùn)行以下命令將項(xiàng)目克隆到本地：
```
git clone https://github.com/xxx.uniapp-v2.git
```
- 進(jìn)入項(xiàng)目目錄：
```
cd xx-uniapp-v2
```
安裝依賴：
- 在項(xiàng)目目錄下運(yùn)行以下命令來安裝項(xiàng)目依賴：
```
npm install
```
- 這個(gè)命令會(huì)根據(jù)項(xiàng)目的 package.json 文件自動(dòng)安裝所需的依賴包。
  如果遇到環(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 依賴沖突的安裝方式。當(dāng)運(yùn)行這個(gè)命令時(shí)，npm 將不會(huì)嚴(yán)格驗(yàn)證 peerDependencies 的版本要求，允許安裝過程中出現(xiàn)的依賴版本沖突繼續(xù)安裝下去。
  
  在 npm 7 及更高版本中，默認(rèn)會(huì)嚴(yán)格檢查 peerDependencies。如果檢測到不兼容的 peerDependencies，就會(huì)報(bào)錯(cuò)，阻止安裝。使用 --legacy-peer-deps 可以繞過這個(gè)檢查，使得安裝更類似于 npm 6 的行為，從而避免版本沖突帶來的安裝失敗。

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

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