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文件中，修改服務地址
5、微信開發者工具中，新建項目的目錄為：dist -> dev -> mp-weixin