VSCode 配 uni-app

CＬＩ工程

• 全局安裝vue-cli

1 npm install -g @vue/cli

• 經過cli建立uni-app項目

1 vue create -p dcloudio/uni-preset-vue uni-app

• 選擇項目模板，可自由選擇以下圖：👇

• 使用vscode打開建立的項目

• 安裝vue語法提示插件👇

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

• 安裝組件語法提示

1 npm i @dcloudio/uni-helper-json

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

• 使用scss樣式

1 #先安裝node-sass
2 npm install node-sass
3 #而後安裝sass-loader，這裏安裝7.3.1版本，版本可選擇性更新，由於高版本可能會報錯
4 #使用 cnpm 會快一些
5 cnpm install sass-loader@7.3.1

• 運行項目

1 npm run dev:%PLATFORM%

• 發佈項目

1 npm run build:%PLATFORM%

• %PLATFORM% 可選值參見package.json中的scripts

 

 

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