VSCode 配 uni-app

凌雲 發表於 2020-07-10

CLI工程

  • 全域性安裝vue-cli
1 npm install -g @vue/cli
  • 通過cli建立uni-app專案
1 vue create -p dcloudio/uni-preset-vue uni-app
  • 選擇專案模板,可自由選擇如下圖:👇

VSCode 配 uni-app

VSCode 配 uni-app

  • 使用vscode開啟建立的專案

VSCode 配 uni-app

  • 安裝vue語法提示外掛👇

VSCode 配 uni-app

  • cli工程自帶uni-app&5+app語法提示

  • 安裝元件語法提示

1 npm i @dcloudio/uni-helper-json
  • 從 git 下載 uni-app 程式碼塊,放到專案目錄下的 .vscode 目錄即可擁有和 HBuilderX 一樣的程式碼塊。

VSCode 配 uni-app

VSCode 配 uni-app

  • 使用scss樣式
1 #先安裝node-sass
2 npm install node-sass
3 #然後安裝sass-loader,這裡安裝7.3.1版本,版本可選擇性更新,因為高版本可能會報錯
4 #使用 cnpm 會快一些
5 cnpm install [email protected]
  • 執行專案
1 npm run dev:%PLATFORM%
  • 釋出專案
1 npm run build:%PLATFORM%
  • %PLATFORM% 可選值參見package.json中的scripts

 VSCode 配 uni-app

 

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 編輯器開啟

VSCode 配 uni-app