簡(jiǎn)介
uniapp是一個(gè)使用Vue.js開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、以及各種小程序。深受廣大前端開(kāi)發(fā)者的喜愛(ài)。uniapp官方也提供了自己的IDE工具HBuilderX，可以快速開(kāi)發(fā)uniapp項(xiàng)目。但是很多前端的同學(xué)已經(jīng)比較習(xí)慣使用VSCode去開(kāi)發(fā)項(xiàng)目，為了開(kāi)發(fā)uniapp項(xiàng)目再去切換開(kāi)發(fā)工具，而且對(duì)新的開(kāi)發(fā)工具也要有一定的適應(yīng)過(guò)程，大多數(shù)前端的同學(xué)肯定是不愿意的。下面我們就看看用VSCode如何搭建uniapp項(xiàng)目。
安裝node和pnpm
node的安裝我就不多說(shuō)了，去官網(wǎng)下載直接安裝就可以了。node安裝好以后，我們?cè)賮?lái)安裝pnpm。咦？node安裝完不是自帶npm嗎？這個(gè)pnpm又是啥？這里簡(jiǎn)單介紹一下npm和pnpm的區(qū)別，不做重點(diǎn)。使用 npm 時(shí)，依賴每次被不同的項(xiàng)目使用，都會(huì)重復(fù)安裝一次。 而在使用pnpm時(shí)，依賴會(huì)被存儲(chǔ)在一個(gè)公共的區(qū)域，不同的項(xiàng)目在引入相同的依賴時(shí)，會(huì)從公共區(qū)域去引入，節(jié)省了空間。
pnpm我們直接全局安裝就可以了，執(zhí)行以下的命令：
npm install -g pnpm
安裝好以后，我們?cè)诿钚袌?zhí)行pnpm -v，能夠看到版本號(hào)就說(shuō)明安裝成功了。
C:\Users\PC>pnpm -v
10.12.1
創(chuàng)建uniapp項(xiàng)目
由于我們要使用VSCode去開(kāi)發(fā)項(xiàng)目，而且項(xiàng)目要使用Vue3和TypeScript，所以我們要使用命令行去創(chuàng)建uniapp項(xiàng)目。先進(jìn)入我們存放VSCode的項(xiàng)目目錄，我的項(xiàng)目目錄是D:\VSProjects，進(jìn)入后，執(zhí)行命令如下：
npx degit dcloudio/uni-preset-vue#vite-ts 項(xiàng)目名稱
項(xiàng)目名稱寫(xiě)你自己真實(shí)的項(xiàng)目名稱就可以了，我的項(xiàng)目叫做my-vue3-uniapp。這個(gè)命令會(huì)把官方提供的使用了TypeScript和Vite的uniapp項(xiàng)目模板下載下來(lái)，然后我們就可以去開(kāi)發(fā)uniapp項(xiàng)目了。
我們使用VSCode打開(kāi)項(xiàng)目，項(xiàng)目的目錄如下：
我們可以看到src目錄里的文件都是uniapp項(xiàng)目的文件，包括頁(yè)面、樣式、靜態(tài)文件等，src目錄外是整個(gè)項(xiàng)目的文件，如：vite.config.ts和tsconfig.json等。然后我們打開(kāi)終端，使用pnpm命令安裝一下依賴，執(zhí)行命令如下：
pnpm i
執(zhí)行完成后，我們熟悉的node_modules目錄出現(xiàn)在了項(xiàng)目中，如圖：
然后我們運(yùn)行項(xiàng)目，執(zhí)行命令如下：
pnpm run dev:mp-weixin
上面的命令會(huì)把我們的代碼編譯成微信小程序代碼，如圖：
編譯完成后，我們的項(xiàng)目中出現(xiàn)了dist目錄，這個(gè)目錄就是編譯后的輸出目錄。然后我們打開(kāi)微信小程序開(kāi)發(fā)工具，目錄選擇/dist/dev/mp-weixin，如圖：
AppID寫(xiě)我們自己的小程序的AppID，點(diǎn)擊確定，
看到這個(gè)畫(huà)面，說(shuō)明我們的uniapp項(xiàng)目搭建成功了，而且可以通過(guò)微信小程序開(kāi)發(fā)工具去預(yù)覽。我們可以通過(guò)VSCode在頁(yè)面上添加些文字，看看微信小程序開(kāi)發(fā)工具的畫(huà)面是否有改變。這里就不給大家演示了。
添加uni-ui擴(kuò)展組件
在我們開(kāi)發(fā)項(xiàng)目時(shí)，會(huì)用到各種組件，僅僅使用uniapp的內(nèi)置組件是遠(yuǎn)遠(yuǎn)不夠的，我們還需安裝官方提供的擴(kuò)展組件uni-ui，怎么安裝呢？我們同樣使用pnpm命令去安裝，在具體安裝uni-ui擴(kuò)展組件之前，我們先需要安裝sass和sass-loader
//安裝sass
pnpm i sass -D
//安裝sass-loader
pnpm i sass-loader@v8.x
由于現(xiàn)在的node版本都是大于16的，所以，我們根據(jù)uniapp官方的建議，安裝v8.x的版本。
最后我們安裝uni-ui，如下：
pnpm i @dcloudio/uni-ui
uni-ui安裝完成后，我們?cè)倥渲胑asycom，easycom的好處是，可以自動(dòng)引入uni-ui組件，無(wú)需我們手動(dòng)import，這對(duì)于我們開(kāi)發(fā)項(xiàng)目來(lái)說(shuō)非常的方便，我們打開(kāi)src目錄下的 pages.json 并添加 easycom 節(jié)點(diǎn)：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 規(guī)則如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他內(nèi)容
pages:[
// ...
]
}
這樣uni-ui擴(kuò)展組件就添加到我們的項(xiàng)目中了。
Json文件的注釋
我們?cè)谔砑觘asycom的時(shí)候，發(fā)現(xiàn)pages.json文件中的注釋是有錯(cuò)誤提示的，我們想讓Json文件中可以有注釋，至少pages.json和manifest.json兩個(gè)文件這種可以有注釋，這個(gè)我們需要在VSCode中配置一下，打開(kāi)文件->首選項(xiàng)->設(shè)置，如圖：
然后我們?cè)谖谋揪庉嬈髦姓业轿募?，再在Associations中添加項(xiàng)，如圖:
然后我們回到pages.json和manifest.json這兩個(gè)文件看一下，注釋就不報(bào)錯(cuò)了。
VSCode插件安裝
到現(xiàn)在為止，我們的uniapp項(xiàng)目已經(jīng)搭建起來(lái)了，而且已經(jīng)可以正常運(yùn)行了，兩個(gè)比較重要的json文件中，注釋文字也不報(bào)錯(cuò)了。但這離我們正常開(kāi)發(fā)還差很多，我們?cè)谑褂胾niapp組件的時(shí)候，沒(méi)有提示，這使得我們編寫(xiě)程序很不方便，我們可以安裝幾個(gè)uniapp插件解決這些問(wèn)題。我們?cè)赩SCode的擴(kuò)展商店中搜索一下uniapp，這里需要安裝3個(gè)插件：
uniapp小程序擴(kuò)展
uni-create-view
uni-helper
安裝完之后，我們?cè)诰帉?xiě)頁(yè)面時(shí)，會(huì)有提示：
在新建頁(yè)面時(shí)，會(huì)有uniapp相關(guān)的選項(xiàng)，這些對(duì)于我們實(shí)際開(kāi)發(fā)是非常由幫助的：
安裝uniapp的types
我們可以看到vue文件中，uniapp的組件并沒(méi)有變綠，說(shuō)明ts是沒(méi)有生效的，我們先把uniapp的類型文件安裝一下，如下：
pnpm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types
然后在文件中增加：
registry=http://registry.npm.taobao.org
shamefully-hoist=true
然后，我們?cè)賵?zhí)行pnpm命令安裝類型文件。安裝完成后，在項(xiàng)目根目錄下，打開(kāi)tsconfig.json文件，在types中增加我們安裝的類型：
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
……
"types": [
"@dcloudio/types",
"@uni-helper/uni-app-types",
"@uni-helper/uni-ui-types"
]
}
……
}
添加完成后，我們發(fā)現(xiàn)compilerOptions是有報(bào)錯(cuò)的，鼠標(biāo)懸停上去發(fā)現(xiàn)：
錯(cuò)提示兩個(gè)選項(xiàng)將要廢棄，我們要把這個(gè)錯(cuò)誤提示去掉，可以在文件中增加"ignoreDeprecations": "5.0",
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"ignoreDeprecations": "5.0",
……
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
這樣compilerOptions就不報(bào)錯(cuò)了。然后我們打開(kāi)vue文件，發(fā)現(xiàn)uniapp的標(biāo)簽都變綠了，但是會(huì)有報(bào)錯(cuò)，這個(gè)VSCode的插件之間有沖突造成的，我們可以配置如下解決，參考官方文檔：
這樣compilerOptions就不報(bào)錯(cuò)了。然后我們打開(kāi)vue文件，發(fā)現(xiàn)uniapp的標(biāo)簽都變綠了，但是會(huì)有報(bào)錯(cuò)，這個(gè)VSCode的插件之間有沖突造成的，我們可以配置如下解決，參考官方文檔：
{
……
"vueCompilerOptions": {
"plugins": ["@uni-helper/uni-app-types/volar-plugin"]
},
……
}
然后重啟VSCode。最后我們發(fā)現(xiàn)vue文件的uniapp標(biāo)簽變綠了，而且沒(méi)有報(bào)錯(cuò)：
最后tsconfig.json的整體內(nèi)容如下：
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"ignoreDeprecations": "5.0",
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
"types": [
"@dcloudio/types",
"@uni-helper/uni-app-types",
"@uni-helper/uni-ui-types"
]
},
"vueCompilerOptions": {
"plugins": ["@uni-helper/uni-app-types/volar-plugin"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
這時(shí)候發(fā)現(xiàn)還是有報(bào)錯(cuò)，選項(xiàng)“importsNotUsedAsValues”已刪除。請(qǐng)從配置中刪除它。 請(qǐng)改用“verbatimModuleSyntax”
原因分析，主要是我們使用的tsconfig版本低了，升級(jí)@vue/tsconfig版本，我這里是從0.1.3=>0.4.0，看看@vue/tsconfig官方最新版本文檔
需要注意的是，0.7.0是有要求的，Typecript 需要>=5.0,VUE>=3.4
由于我的TypeScript版本是4.9，不太想升到5.0以上，想著安裝了一個(gè)0.4.0的低版本，這里面的代碼已經(jīng)刪除了那兩個(gè)屬性，可以看得到，引用也可以按照原來(lái)的@vue/tsconfig/tsconfig.json方式
找到package.json,修改@vue/tsconfig 版本為0.4.0
再次執(zhí)行pnpm i 后即可
結(jié)束語(yǔ)
到這里，我們的uniapp項(xiàng)目就搭建完成了，而且是使用我們非常熟悉的VSCode，項(xiàng)目中還是用了Vue3，Typescript，Vite，該裝的插件也已經(jīng)裝上了，鼠標(biāo)懸停會(huì)給我們組件的提示，大大提高了我們的開(kāi)發(fā)效率。OK了，去開(kāi)發(fā)我們的項(xiàng)目應(yīng)用吧~~~
備注：該文章大部分內(nèi)容轉(zhuǎn)發(fā)于使用VSCode搭建UniApp + TS + Vue3 + Vite項(xiàng)目 - 牛初九 - 博客園，本人僅做了部分修改，用于學(xué)習(xí)記錄。
