當 uni-app 碰見 vscode，我該如何讓它臣服

前言

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

不過，因爲 HBuilderX 沒有 Linux 版以及一些鮮爲人知的祕密，想要使用 vs code。若是直接使用 vscode 開發 uni-app，其體驗並非很好，可是碰上了神通廣大的咱們，必需要讓他臣服。

其實 uni-app 和 vscode 也能夠很搭，接下來爲各位小夥伴帶來 vscode 中 uni-app 的正確打開姿式。

使用

1、CLI 工程

1. 全局安裝 vue-cli（如已安裝請跳過此步驟）

   npm install -g @vue/cli
   複製代碼

2. 經過 CLI 建立 uni-app 項目

   vue create -p dcloudio/uni-preset-vue my-project
   複製代碼

   注意：項目名不容許出現大寫

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

   自定義模板： 選擇自定義模板時，須要填寫 uni-app 模板地址，這個地址其實就是託管在雲端的倉庫地址。以 GitHub 爲例，地址格式爲 userName/repositoryName，如 dcloudio/uni-template-picture 就是下載圖片模板。

3. 建立好以後就會出現以下內容：

   �  Successfully created project my-project.
   �  Get started with the following commands:
   
    $ cd my-project
    $ yarn serve
   複製代碼

2、在 vscode 中打開項目

安裝插件

1. 安裝 vue 語法提示插件 vetur

2. CLI 工程默認帶了 uni-app 語法提示和 5+App 語法提示

3. 安裝組件語法提示（組件語法提示是uni-app的亮點，其餘框架不多能提供。）

   npm i @dcloudio/uni-helper-json
   複製代碼

導入 HBuilderX 自帶的代碼塊

從 github 下載 uni-app 代碼塊，放到項目目錄下的 .vscode 目錄便可擁有和 HBuilderX 同樣的代碼塊。

3、運行項目

npm run dev: %PLATFORM%
複製代碼

4、發佈項目

npm run build: %PLATFORM%
複製代碼

%PLATFORM% 可取值以下：

值	平臺
h5	H5
mp-weixin	微信小程序
mp-alipay	支付寶小程序
mp-baidu	百度小程序
mp-toutiao	頭條小程序
mp-qq	qq 小程序

---

CLI 方式參考文檔

HBuilderX 方式官網已經講的很詳細了。

---

但願你們使用起來能夠更加駕輕就熟。有任何問題歡迎留言討論。