uniapp是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS熙暴、Android、以及各種小程序慌盯。深受廣大前端開發(fā)者的喜愛怨咪。uniapp官方也提供了自己的IDE工具HBuilderX，可以快速開發(fā)uniapp項目润匙。但是很多前端的同學(xué)已經(jīng)比較習(xí)慣使用VSCode去開發(fā)項目诗眨，為了開發(fā)uniapp項目再去切換開發(fā)工具，而且對新的開發(fā)工具也要有一定的適應(yīng)過程孕讳，大多數(shù)前端的同學(xué)肯定是不愿意的匠楚。下面我們就看看用VSCode如何搭建uniapp項目。
安裝node和pnpm
node的安裝我就不多說了厂财，去官網(wǎng)下載芋簿，直接安裝就可以了。node安裝好以后璃饱，我們再來安裝pnpm与斤。咦？node安裝完不是自帶npm嗎？這個pnpm又是啥撩穿？這里簡單介紹一下npm和pnpm的區(qū)別磷支，不做重點。使用 npm 時食寡，依賴每次被不同的項目使用雾狈，都會重復(fù)安裝一次。 而在使用pnpm時抵皱，依賴會被存儲在一個公共的區(qū)域，不同的項目在引入相同的依賴時移盆，會從公共區(qū)域去引入伤为，節(jié)省了空間咒循。
pnpm我們直接全局安裝就可以了剑鞍，執(zhí)行以下的命令：
npm install -g pnpm
安裝好以后昨凡，我們在命令行執(zhí)行pnpm -v，能夠看到版本號就說明安裝成功了沥阳。
創(chuàng)建uniapp項目
由于我們要使用VSCode去開發(fā)項目，而且項目要使用Vue3和TypeScript晌杰，所以我們要使用命令行去創(chuàng)建uniapp項目抑诸。先進入我們存放VSCode的項目目錄蜕乡，我的項目目錄是D:\VSProjects层玲，進入后辛块，執(zhí)行命令如下：
npx degit dcloudio/uni-preset-vue#vite-ts 項目名稱
項目名稱寫你自己真實的項目名稱就可以了父虑，我的項目叫做my-vue3-uniapp士嚎。這個命令會把官方提供的使用了TypeScript和Vite的uniapp項目模板下載下來莱衩，然后我們就可以去開發(fā)uniapp項目了。
我們使用VSCode打開項目括细，項目的目錄如下：
我們可以看到src目錄里的文件都是uniapp項目的文件，包括頁面览濒、樣式贷笛、靜態(tài)文件等，src目錄外是整個項目的文件汇荐，如：vite.config.ts和tsconfig.json等拢驾。然后我們打開終端繁疤，使用pnpm命令安裝一下依賴躁染，執(zhí)行命令如下：
pnpm i
執(zhí)行完成后吞彤，我們熟悉的node_modules目錄出現(xiàn)在了項目中饰恕，如圖：
然后我們運行項目，執(zhí)行命令如下：
pnpm run dev:mp-weixin
上面的命令會把我們的代碼編譯成微信小程序代碼，如圖：
編譯完成后，我們的項目中出現(xiàn)了dist目錄泊藕，這個目錄就是編譯后的輸出目錄吱七。然后我們打開微信小程序開發(fā)工具，目錄選擇/dist/dev/mp-weixin，如圖：
AppID寫我們自己的小程序的AppID吧寺，點擊確定，
看到這個畫面赖条，說明我們的uniapp項目搭建成功了碱茁，而且可以通過微信小程序開發(fā)工具去預(yù)覽纽竣。我們可以通過VSCode在頁面上添加些文字蜓氨，看看微信小程序開發(fā)工具的畫面是否有改變。這里就不給大家演示了刀荒。
添加uni-ui擴展組件
在我們開發(fā)項目時，會用到各種組件泼返，僅僅使用uniapp的內(nèi)置組件是遠遠不夠的绅喉，我們還需安裝官方提供的擴展組件uni-ui柴罐，怎么安裝呢？我們同樣使用pnpm命令去安裝似芝，在具體安裝uni-ui擴展組件之前党瓮，我們先需要安裝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安裝完成后，我們再配置easycom蚪拦，easycom的好處是，可以自動引入uni-ui組件括袒，無需我們手動import类垦，這對于我們開發(fā)項目來說非常的方便米苹，我們打開src目錄下的 pages.json 并添加 easycom 節(jié)點：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 規(guī)則如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他內(nèi)容
pages:[
// ...
]
}
這樣uni-ui擴展組件就添加到我們的項目中了良瞧。
Json文件的注釋
我們在添加easycom的時候褥蚯，發(fā)現(xiàn)pages.json文件中的注釋是有錯誤提示的，我們想讓Json文件中可以有注釋，至少pages.json和manifest.json兩個文件這種可以有注釋摊册，這個我們需要在VSCode中配置一下，打開文件->首選項->設(shè)置温治，如圖：
然后我們在文本編輯器中找到文件绸狐，再在Associations中添加項寒矿，如下：
然后我們回到pages.json和manifest.json這兩個文件看一下，注釋就不報錯了镜豹。
VSCode插件安裝
到現(xiàn)在為止，我們的uniapp項目已經(jīng)搭建起來了已卸，而且已經(jīng)可以正常運行了，兩個比較重要的json文件中永乌，注釋文字也不報錯了。但這離我們正常開發(fā)還差很多望几，我們在使用uniapp組件的時候，沒有提示，這使得我們編寫程序很不方便疟羹，我們可以安裝幾個uniapp插件解決這些問題。我們在VSCode的擴展商店中搜索一下uniapp，這里需要安裝3個插件：
- uniapp小程序擴展
- uni-create-view
- uni-helper
安裝完之后力九，我們在編寫頁面時，會有提示：
在新建頁面時，會有uniapp相關(guān)的選項：
這些對于我們實際開發(fā)是非常由幫助的。
安裝uniapp的types
我們可以看到vue文件中，uniapp的組件并沒有變綠掏缎，說明ts是沒有生效的，我們先把uniapp的類型文件安裝一下酌儒，如下：
pnpm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types
我們在使用pnpm安裝時，會報錯，我們根據(jù)uni-helper的官方文檔中的提示鸥印，將 shamefully-hoist 為 true。這個需要我們找到家目錄下的.npmrc文件璃弄，如圖：
然后在文件中增加：
registry=http://registry.npm.taobao.org
shamefully-hoist=true
然后纤掸，我們再執(zhí)行pnpm命令安裝類型文件政己。安裝完成后卵牍，在項目根目錄下，打開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是有報錯的，鼠標懸停上去發(fā)現(xiàn)：
報錯提示兩個選項將要廢棄，我們要把這個錯誤提示去掉，可以在文件中增加"ignoreDeprecations": "5.0",：
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"ignoreDeprecations": "5.0",
……
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
這樣compilerOptions就不報錯了。然后我們打開vue文件陌凳，發(fā)現(xiàn)uniapp的標簽都變綠了，但是會有報錯，這個VSCode的插件之間有沖突造成的崔梗，我們可以配置如下解決，參考官方文檔：
{
……
"vueCompilerOptions": {
"plugins": ["@uni-helper/uni-app-types/volar-plugin"]
},
……
}
然后重啟VSCode。最后我們發(fā)現(xiàn)vue文件的uniapp標簽變綠了谦铃，而且沒有報錯：
最后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"]
}
最后
到這里，我們的uniapp項目就搭建完成了诵肛，而且是使用我們非常熟悉的VSCode，項目中還是用了Vue3，Typescript乙埃，Vite锯岖，該裝的插件也已經(jīng)裝上了介袜，鼠標懸停會給我們組件的提示，大大提高了我們的開發(fā)效率出吹。OK了遇伞，去開發(fā)我們的項目應(yīng)用吧~~~
