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

uni-app 是一個使用Vue.js開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺。

方式一： 使用HBuilderX來快速開發和運行

第一步：準備好HbuilderX工具

uni-app官網有相關的介紹，要下載app開發版本的HbuilderX工具。

第二步：新建一個uni-app的項目，選擇空項目。

uni-app的默認模板項目里面文件夾結構是這樣的：

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

第三步：運行項目。

點擊工具欄里的【運行】選項，在下拉框中選擇不同的運行環境即可。可以參考官網步驟。

因為最近的項目是在微信端，這里就介紹下微信端運行的相關事宜。

在微信開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發者工具，即可在微信開發者工具里面體驗uni-app。

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

方式二： 使用腳手架來快速搭建和開發

• 全局安裝：npm i -g @vue/cli （之前安裝過可跳過此步->2）：因為uni-app是基于vue3.0以上的，所以要更新vue到合適版本；

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

按照提示，直接Enter;

• 啟動（微信小程序）：npm run dev:mp-weixin

• 微信小程序開發者工具導入項目:需要手動導入小程序項目。

推薦：《uniapp教程》