1、工具及環境
- HBuilder X
- 微信開發者工具
- Node.js，測試：node -v（node安裝） 和 npm -v（自帶的npm也安裝成功）
2、建立uni-app專案：
在點選工具欄裡的檔案 -> 新建 -> 專案，選擇uni-app，輸入工程名，如：hello-uniapp，點選建立，即可成功建立 uni-app。點選模板裡的 Hello uni-app 即可，如下圖：
一個uni-app專案，預設包含如下目錄及檔案：
3、執行uni-app到微信開發者工具
1、填寫微信小程式的AppID：
2、在HBuilder X，配置 ‘微信開發者工具’ 的安裝路徑：
3、在微信開發者工具中，通過 設定 》安全皮膚，開啟微信開發者工具的服務埠：
4、在HBuilder X，點選執行 -> 執行到小程式模擬器 -> 微信開發者工具，將當前uni-app專案編譯之後，自動執行到微信開發者工具中，從而方便檢視專案效果與除錯：
微信開發者工具會將uni-app專案程式碼自動編碼為微信小程式識別的程式碼。非常方便。
注意：編譯執行uni-app前，在專案目錄下執行：npm i。
每個專案都有一個package.json檔案，裡面有很多元件資訊。使用npm i將按照package.json安裝所需要的元件放在生成的node_modules資料夾中，專案下的每一個檔案中都可以通過import引入node_modules的元件來加以使用。
4、其他問題
1、使用git管理專案：在專案根目錄中新建 .gitignore 忽略檔案 , 並配置如下:
node_modules/
dist/
unpackage/dist\
在專案根目錄中新建 .gitignore 忽略檔案 , 並配置如下:
注意：此時我們忽略了 unpackage 目錄中僅有的 dist 目錄 , 因此預設情況下 , unpackage 目錄不會被 git 追蹤。此時, 為了讓 git 能夠正常追蹤 unpackage 目錄 , 按照慣例 , 我們可以在 unpackage 目錄下建立一個叫做 .gitkeep 的檔案進行佔位
2、微信開發工具執行小程式報錯：WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object
解決方法：詳情 》本地設定 》除錯基礎版本調為：2.14.4 \color{red}{2.14.4}2.14.4
3、npm run dev
當我們執行npm run dev時，系統就會跑到package.json檔案中執行scripts中對應的指令碼。如下圖，可以看到start對應的是npm run dev：
4、在 src -> common -> config.js檔案中，修改服務地址