站長資訊網(wǎng)如何快速搭建uni-app項目？下面本篇文章給大家介紹一下從零搭建uni-app項目的兩種方法，希望對大家有所幫助！
uni-app 是一個使用Vue.js開發(fā)跨平臺應用的前端框架，開發(fā)者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺。
方式一： 使用HBuilderX來快速開發(fā)和運行
第一步：準備好HbuilderX工具
uni-app官網(wǎng)有相關的介紹，要下載app開發(fā)版本的HbuilderX工具。
第二步：新建一個uni-app的項目，選擇空項目。
uni-app的默認模板項目里面文件夾結構是這樣的：
- pages—用來存放頁面文件路徑；
- static—引用的靜態(tài)資源目錄，如圖片、視頻等文件；
- App.vue— 應用配置，用來配置全局樣式及監(jiān)聽文件；
- main.js—- vue初始化入口文件；
- mainfest.json—-配置應用名稱、appid、logo、版本等打包信息文件；
- pages.json—- 配置頁面路由、導航條、選項卡等頁面類信息文件。
第三步：運行項目。
點擊工具欄里的【運行】選項，在下拉框中選擇不同的運行環(huán)境即可。可以參考官網(wǎng)步驟。
因為最近的項目是在微信端，這里就介紹下微信端運行的相關事宜。
在微信開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發(fā)者工具，即可在微信開發(fā)者工具里面體驗uni-app。
注意： 如果是第一次使用，需要先配置小程序ide的相關路徑，才能運行成功。在HbuilderX中需要在工具->配置->運行配置，找到小程序運行配置，將微信開發(fā)者工具路徑復制到里面。
方式二： 使用腳手架來快速搭建和開發(fā)
-
全局安裝：npm i -g @vue/cli （之前安裝過可跳過此步->2）：因為uni-app是基于vue3.0以上的，所以要更新vue到合適版本；
-
創(chuàng)建項目：vue create -p dcloudio/uni-preset-vue my-project（你自己創(chuàng)建項目的名字）
按照提示，直接Enter;
-
啟動（微信小程序）：npm run dev:mp-weixin
-
微信小程序開發(fā)者工具導入項目:需要手動導入小程序項目。
推薦：《uniapp教程》
