---

一、前提準備

首先要創建uniapp項目，需要先下載HBuilderX，HBuilderX是一款開箱即用的工具，下載完畢之后，解壓到指定的目錄即可使用，需要注意的是最好路徑里面不要有中文。

二、創建項目

一個 uni-app 工程，就是一個 Vue 項目，你可以通過 HBuilderX 或 cli 方式快速創建 uni-app 工程，在這里我們推薦使用HBuilderX就行創建。

點擊工具欄里的文件 -> 新建 -> 項目（快捷鍵Ctrl+N）：

輸入項目名稱，以及項目的存放位置(這里最后路徑中也別有中文)，模版類型我們選擇默認模版，如果是開發H5，小程序就不需要勾選uni-app x，只有開發App的時候才勾選，Vue版本根據項目需求進行選擇，配置完成之后點擊創建即可創建一個uniapp項目。

三、項目結構

├─pages                 業務頁面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
├─static                存放應用引用的本地靜態資源（如圖片、視頻等）的目錄，注意：靜態資源都應存放于此目錄
├─unpackage             非工程代碼，一般存放運行或發行的編譯結果
├─App.vue               應用配置，用來配置App全局樣式以及監聽 應用生命周期
├─main.js               Vue初始化入口文件
├─manifest.json         配置應用名稱、appid、logo、版本等打包信息
├─pages.json            配置頁面路由、導航條、選項卡等頁面類信息
└─uni.scss              內置的常用樣式變量

四、運行測試

點擊工具欄里的文件 -> 運行 -> 內置瀏覽器：