如何快速搭建uni-app項(xiàng)目？下面本篇文章給大家介紹一下從零搭建uni-app項(xiàng)目的兩種方法，希望對(duì)大家有所幫助！

uni-app 是一個(gè)使用Vue.js開(kāi)發(fā)跨平臺(tái)應(yīng)用的前端框架，開(kāi)發(fā)者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個(gè)平臺(tái)。

方式一： 使用HBuilderX來(lái)快速開(kāi)發(fā)和運(yùn)行

第一步：準(zhǔn)備好HbuilderX工具

uni-app官網(wǎng)有相關(guān)的介紹，要下載app開(kāi)發(fā)版本的HbuilderX工具。

第二步：新建一個(gè)uni-app的項(xiàng)目，選擇空項(xiàng)目。

uni-app的默認(rèn)模板項(xiàng)目里面文件夾結(jié)構(gòu)是這樣的：

• pages—用來(lái)存放頁(yè)面文件路徑；
• static—引用的靜態(tài)資源目錄，如圖片、視頻等文件；
• App.vue— 應(yīng)用配置，用來(lái)配置全局樣式及監(jiān)聽(tīng)文件；
• main.js—- vue初始化入口文件；
• mainfest.json—-配置應(yīng)用名稱、appid、logo、版本等打包信息文件；
• pages.json—- 配置頁(yè)面路由、導(dǎo)航條、選項(xiàng)卡等頁(yè)面類信息文件。

第三步：運(yùn)行項(xiàng)目。

點(diǎn)擊工具欄里的【運(yùn)行】選項(xiàng)，在下拉框中選擇不同的運(yùn)行環(huán)境即可?？梢詤⒖脊倬W(wǎng)步驟。

因?yàn)樽罱捻?xiàng)目是在微信端，這里就介紹下微信端運(yùn)行的相關(guān)事宜。

在微信開(kāi)發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開(kāi)發(fā)者工具，即可在微信開(kāi)發(fā)者工具里面體驗(yàn)uni-app。

注意： 如果是第一次使用，需要先配置小程序ide的相關(guān)路徑，才能運(yùn)行成功。在HbuilderX中需要在工具->配置->運(yùn)行配置，找到小程序運(yùn)行配置，將微信開(kāi)發(fā)者工具路徑復(fù)制到里面。

方式二： 使用腳手架來(lái)快速搭建和開(kāi)發(fā)

• 全局安裝：npm i -g @vue/cli （之前安裝過(guò)可跳過(guò)此步->2）：因?yàn)閡ni-app是基于vue3.0以上的，所以要更新vue到合適版本；

• 創(chuàng)建項(xiàng)目：vue create -p dcloudio/uni-preset-vue my-project（你自己創(chuàng)建項(xiàng)目的名字）

按照提示，直接Enter;

• 啟動(dòng)（微信小程序）：npm run dev:mp-weixin

• 微信小程序開(kāi)發(fā)者工具導(dǎo)入項(xiàng)目:需要手動(dòng)導(dǎo)入小程序項(xiàng)目。

推薦：《uniapp教程》