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