vscode能用uni-app嗎

vscode能用uni-app，具體方法：1、安裝vue語法提示插件vetur；2、執行「npm i @dcloudio/uni-helper-json」指令安裝元件語法提示；3、下載並匯入HBuilderX自帶的uni-app程式碼即可。

本教學操作環境：windows7系統、Visual Studio Code1.45.1.0版，DELL G3電腦。

uni-app 是一個用 vue 語法來開發小程式、App、H5 的框架，官方推薦的開發工具為 HBuilderX，使用起來有很好的開發體驗。

不過，由於 HBuilderX 沒有 Linux 版以及很多前端之前已經習慣了 vscode，不想更換編輯器。直接使用 vscode 開發 uni-app，其體驗並不是很好。

其實 uni-app 和 vscode 也可以很搭，接下來為大夥帶來 vscode 中 uni-app 的正確開啟姿勢。

CLI 工程

全域安裝vue-cli 3.x（如已安裝請跳過此步驟）

npm install -g @vue/cli

透過CLI建立uni-app 項目

vue create -p dcloudio/uni-preset-vue my-project

此時，會提示選擇項目模板，初次體驗建議選擇hello uni-app 項目模板，如下所示：

在vscode中開啟項目

#安裝vue語法提示外掛vetur

CLI 工程預設帶了uni-app語法提示和5 App語法提示

安裝元件語法提示

元件語法提示是uni-app的亮點，其他框架很少能提供。

npm i @dcloudio/uni-helper-json

匯入HBuilderX 自帶的程式碼區塊

從github 下載# uni-app 程式碼區塊，放到專案目錄下的.vscode 目錄即可擁有和HBuilderX 一樣的程式碼區塊。

#執行專案

npm run dev:%PLATFORM%

發布專案

npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

#h5mp-alipay mp-baidump-weixin##mp- toutiao

值	平台
H5
支付寶小程式
百度小程式
微信小程式

頭條小程式############mp-qq######qq 小程式############

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装

初始化npm（如已初始化跳过此步骤）

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件，vscode一样可以使用。

• 如果这些插件有npm使用方式（如uni-ui），可以用npm
• 如果作者没提供npm方式，那么下载zip包解压也是可以用的

【相关推荐：《uniapp教程》、《vscode教程》】

以上是vscode能用uni-app嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！