uni-app 是一個(gè)用 vue 語(yǔ)法來(lái)開(kāi)發(fā)小程序、App、H5 的框架，其官方推薦的開(kāi)發(fā)工具為 HBuilderX，使用起來(lái)有很好的開(kāi)發(fā)體驗(yàn)。
不過(guò)，由于 HBuilderX 沒(méi)有 Linux 版以及很多前端之前已經(jīng)習(xí)慣了 vscode，不想更換編輯器。直接使用 vscode 開(kāi)發(fā) uni-app，其體驗(yàn)并不是很好。
image.png
其實(shí) uni-app 和 vscode 也可以很搭，接下來(lái)為大伙帶來(lái) vscode 中 uni-app 的正確打開(kāi)姿勢(shì)。
CLI 工程
全局安裝 vue-cli 3.x（如已安裝請(qǐng)?zhí)^(guò)此步驟）
npm install -g @vue/cli
通過(guò) CLI 創(chuàng)建 uni-app 項(xiàng)目
vue create -p dcloudio/uni-preset-vue my-project
此時(shí)，會(huì)提示選擇項(xiàng)目模板，初次體驗(yàn)建議選擇 hello uni-app 項(xiàng)目模板，如下所示：
image.png
在vscode中打開(kāi)項(xiàng)目
image.png
安裝vue語(yǔ)法提示插件vetur
image.png
CLI 工程默認(rèn)帶了uni-app語(yǔ)法提示和5+App語(yǔ)法提示
image.png
image.png
安裝組件語(yǔ)法提示
npm i @dcloudio/uni-helper-json
image.png
image.png
導(dǎo)入 HBuilderX 自帶的代碼塊
從 github 下載 uni-app 代碼塊，放到項(xiàng)目目錄下的 .vscode 目錄即可擁有和 HBuilderX 一樣的代碼塊。
image.png
image.png
image.png
運(yùn)行項(xiàng)目
npm run dev:%PLATFORM%
發(fā)布項(xiàng)目
npm run build:%PLATFORM%
%PLATFORM% 可取值如下：
| 值 | 平臺(tái) |
|---|---|
| h5 | H5 |
| mp-alipay | 支付寶小程序 |
| mp-baidu | 百度小程序 |
| mp-weixin | 微信小程序 |
| mp-toutiao | 頭條小程序 |
| mp-qq | qq 小程序 |
HBuilderX 工程
HBuilderX 創(chuàng)建的工程默認(rèn)不帶 types 語(yǔ)法提示，在 vscode 中編輯的時(shí)候，可以自行安裝
初始化npm（如已初始化跳過(guò)此步驟）
npm init -y
安裝 uni-app 語(yǔ)法提示
npm i @types/uni-app @types/html5plus -D
另外，uni-app 項(xiàng)目下的 manifest.json、pages.json 等文件可以包含注釋。vscode 里需要改用 jsonc 編輯器打開(kāi)。
image.png
