這篇文章主要介紹“VSCode中怎么開發uni-app”，在日常操作中，相信很多人在VSCode中怎么開發uni-app問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”VSCode中怎么開發uni-app”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
我們使用 vue2 創建工程作為示例，uni-app中Vue2版的組件庫和插件也比較多，穩定、問題少，可以先參考下官方文檔：工程化
既然是使用vue腳手架，那肯定要全局安裝@vue/cli，已安裝的可以跳過。
注意：Vue2創建的項目，腳手架版本要用@4的版本，用@5的版本運行項目會報錯，這里推薦 @4.5.15
npm install -g @vue/cli
創建項目，后面是你的項目名字。
vue create -p dcloudio/uni-preset-vue uni_vue2_cli
這里我們選擇默認模板。
在VSCode打開這個項目，可以看看整個項目項目結構，src下項目結構跟HbuilderX創建的根目錄基本一樣，說明兩種項目轉換還是比較方便的。
提示：既然是Vue2項目，有
scss文件，那肯定要裝vetur和sass這兩個插件吧，不會有人還沒有裝吧。
創建tsconfig.json配置文件時，VSCode會自動檢測當前項目當中是否有ts文件，若沒有則報錯，提示用戶需要創建一個ts文件后，再去使用typescript。其實即使報紅，但運行項目是沒有問題的，但有強迫癥的人肯定受不了，不可能一直看著報錯吧。
解決方案很簡單，就是在項目根目錄下，隨便建一個ts文件，不用寫任何東西，然后在tsconfig.json配置 files 這個就好了。
我們在項目根目錄下新建一個puppet.ts，puppet：傀儡的意思，哈哈，這里名字可以自己隨便起。
tsconfig.json：
{
"compilerOptions": {
"types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"]
},
"files": ["puppet.ts"]
}我們打開pages.json和manifest.json，發現會報紅，這是因為在json中是不能寫注釋的，而在jsonc是可以寫注釋的。
解決方案：我們把pages.json和manifest.json這兩個文件關聯到jsonc中，然后就以寫注釋了。在設置中打開settings.json，添加：
千萬不要把所有json文件都關聯到jsonc中，你感覺在json中都能寫注釋了，覺得更好用了，其實不然，json就是json，jsonc就是jsonc，這兩個是不一樣的，例如，你在package.json寫注釋VSCode是不報錯了，但編譯的時候還是會報錯的，因為package.json就是不能寫注釋的。
很多人剛開始使用VSCode寫uni-app時，因為pages.json沒有任何語法提示，直接被勸退了，當初我也差點被勸退了，不過經過我的不懈努力，終于解決了。
其實現在VSCode已經有第三方插件提供語法提示和簡單的校驗了，體驗也是相當的不錯。
而且鼠標懸浮還有提示，相當的貼心了。
VSCode在json文件是不顯示像css中一樣的顏色塊，但有個插件可以幫我們做到。
當然，我們要對這個插件進行相關的配置，以便更好的使用。
"color-highlight.enable": true, // 開啟插件 // 顏色塊的樣式，這里我選擇了跟VSCode中css差不多樣子的顏色塊，自己選擇喜歡的就行 "color-highlight.markerType": "dot-before", // 這個插件起效果的語言，這里設置只在jsonc起作用 "color-highlight.languages": ["jsonc"], // 是否在旁邊的滾條顯示顏色，個人覺得不好看，關了 "color-highlight.markRuler": false, // 是否匹配單詞，如white，black "color-highlight.matchWords": false,
然后就是怎么快速創建頁面、組件、分包，那就要推薦以下這款插件了，支持一鍵創建，并且添加到paegs,json中。
在Hubilder X條件注釋是有高亮的，以便區分開普通注釋，在VSCode也有對應的插件可以實現，不得不說，VSCode的生態真的太好了，要啥插件都有。
這個插件可以定制化我們的注釋，比如顏色、加粗、斜體，怎么好看怎么來。
"better-comments.tags":[
{
"tag": "#",
"color": "#18b566",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": true,
"italic": false
},
]用Vue2創建的uni-app的cli項目默認是已經安裝對應的Api語法提示，并且默認已經在tscongfig.json配置好了，有三個：
@dcloudio/types，uni語法提示
miniprogram-api-typings，微信小程序wx語法提示
mini-types，支付寶小程序my語法提示
接下來就是組件語法提示，如<view>、<button>等uni-app原生組件，這個需要我們手動安裝對應的依賴包。
npm i @dcloudio/uni-helper-json
如果你覺得還不夠好用，你還可以安裝第三方插件來提供和Hbuilder X一樣的代碼塊，推薦插件：uniapp小程序擴展、uni-app-snippets
注意：cli創建的uni-app項目，跟web項目一樣，需要安裝對應的sass模塊，才能寫scss。安裝sass-loader，建議版本@10，否則可能會導致vue與sass的兼容問題而報錯。
npm i sass sass-loader@10 -D
安裝SCSS IntelliSense插件，就可以提示你項目中scss文件中定義的變量了。
對應的命令在package.json，中，可以自行查看。
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
發現命令還是比較長的，其實有更簡便的方式，VSCode支持一鍵運行npm腳本，我們以微信小程序為例。
VSCode跟Hbuilder x 不同的是，VSCode不會自動在微信開發者工具導入項目并打開，我們需要手動導入項目，只需要導入一次就行了，以后直接打開微信開發者工具就行了。
需要注意的是，需要在manifest.json配置微信小程序appid，不然微信開發者工具會報錯。
在微信開發者工具導入打包出來的文件夾。
然后，就可以愉快的寫代碼了。不管是運行項目，還是差量化編譯速度還是非?？斓?。
尤雨溪宣布Vue 3 在 2022 年 2 月 7 日成為新的默認版本，但目前uni-app對應的Vue3版的組件庫和插件還是有點少了。
使用Vue3創建項目跟Vue2有點區別，Vue3創建的項目采用的是vite，有一說一，vite是真的快，初始化項目的時候遇到了一些坑，這里說一下。
我一開始也卡住了，訪問倉庫失敗，官方文檔也說了解決方案，看了下，就是去更新下@dcloudio/uvm。
npx @dcloudio/uvm
然后再試一下就沒問題了，這里以javascript模板為例
npx degit dcloudio/uni-preset-vue#vite uni_vue3_cli
還有一個坑，就是Vue3創建的項目默認不安裝API語法提示依賴，所以要我們手動去安裝一下，然后去tsconfig.json配置一下。
npm i @dcloudio/types miniprogram-api-typings mini-types -D
VSCode有尤雨溪團隊專門為Vue3打造的插件Volar，寫Vue3就用 Volar，再配合Vite，開發體驗真的很nice，這里就不過多講了。
VSCode不能像Hbuilder X一樣一鍵導入插件，一般用cli創建的項目要使用插件，一般有兩種方式，第一種是支持npm安裝的，那就用npm最好，如uViewUI，另一種不支持npm安裝的，那就下載對應的zip壓縮包，放到項目中，這種一般會有兩個版本，我們選擇非uni_modules版本，如uCharts。
這點確實沒有Hbuilder X方便，不過導入第三方插件這種事情不是經常做，這還是可以接受的。
然后順手推薦幾個非常實用的插件，幫助我們提高開發效率。
Image preview
Path Intellisense
鼠標懸?？梢灶A覽圖片。
"gutterpreview.showImagePreviewOnGutter": false,// 關閉在行號中顯示縮列圖
這個插件可以幫助我們配置路徑別名，路徑智能感知。
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src/",
"static": "${workspaceRoot}/src/static"
},還有兩個是組件庫語法提示、代碼塊的插件，自己根據需要去安裝，這里就不過多贅述了。
uniapp小程序擴展
uni-ui-snippets
到此，關于“VSCode中怎么開發uni-app”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
