使用VSCode搭建UniApp + TS + Vue3 + Vite項(xiàng)目

uniapp 是一個(gè)使用Vue.js開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、以及各種小程序。深受廣大前端開發(fā)者的喜愛。 uniapp 官方也提供了自己的IDE工具 HBuilderX ，可以快速開發(fā) uniapp 項(xiàng)目。但是很多前端的同學(xué)已經(jīng)比較習(xí)慣使用 VSCode 去開發(fā)項(xiàng)目，為了開發(fā) uniapp 項(xiàng)目再去切換開發(fā)工具，而且對(duì)新的開發(fā)工具也要有一定的適應(yīng)過程，大多數(shù)前端的同學(xué)肯定是不愿意的。下面我們就看看用 VSCode 如何搭建 uniapp 項(xiàng)目。

安裝node和pnpm

node 的安裝我就不多說了，去官網(wǎng)下載，直接安裝就可以了。node安裝好以后，我們?cè)賮戆惭b pnpm 。咦？ node 安裝完不是自帶 npm 嗎？這個(gè) pnpm 又是啥？這里簡單介紹一下 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)就說明安裝成功了。

創(chuàng)建uniapp項(xiàng)目

由于我們要使用 VSCode 去開發(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)目名稱 寫你自己真實(shí)的項(xiàng)目名稱就可以了，我的項(xiàng)目叫做 my-vue3-uniapp 。這個(gè)命令會(huì)把官方提供的使用了 TypeScript 和 Vite 的 uniapp 項(xiàng)目模板下載下來，然后我們就可以去開發(fā) uniapp 項(xiàng)目了。

我們使用 VSCode 打開項(xiàng)目，項(xiàng)目的目錄如下：

我們可以看到 src 目錄里的文件都是 uniapp 項(xiàng)目的文件，包括頁面、樣式、靜態(tài)文件等， src 目錄外是整個(gè)項(xiàng)目的文件，如： vite.config.ts 和 tsconfig.json 等。然后我們打開終端，使用 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è)目錄就是編譯后的輸出目錄。然后我們打開微信小程序開發(fā)工具，目錄選擇 /dist/dev/mp-weixin ，如圖：

AppID寫我們自己的小程序的AppID，點(diǎn)擊確定，

看到這個(gè)畫面，說明我們的 uniapp 項(xiàng)目搭建成功了，而且可以通過微信小程序開發(fā)工具去預(yù)覽。我們可以通過 VSCode 在頁面上添加些文字，看看微信小程序開發(fā)工具的畫面是否有改變。這里就不給大家演示了。

添加uni-ui擴(kuò)展組件

在我們開發(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 [email protected]

由于現(xiàn)在的node版本都是大于16的，所以，我們根據(jù)uniapp官方的建議，安裝 v8.x 的版本。

最后我們安裝uni-ui，如下：

pnpm i @dcloudio/uni-ui

uni-ui安裝完成后，我們?cè)倥渲? easycom ， easycom 的好處是，可以自動(dòng)引入uni-ui組件，無需我們手動(dòng) import ，這對(duì)于我們開發(fā)項(xiàng)目來說非常的方便，我們打開 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è)谔砑? easycom 的時(shí)候，發(fā)現(xiàn) pages.json 文件中的注釋是有錯(cuò)誤提示的，我們想讓Json文件中可以有注釋，至少 pages.json 和 manifest.json 兩個(gè)文件這種可以有注釋，這個(gè)我們需要在 VSCode 中配置一下，打開 文件->首選項(xiàng)->設(shè)置 ，如圖：

然后我們?cè)? 文本編輯器 中找到 文件 ，再在 Associations 中添加項(xiàng)，如下：

然后我們回到 pages.json 和 manifest.json 這兩個(gè)文件看一下，注釋就不報(bào)錯(cuò)了。

VSCode插件安裝

到現(xiàn)在為止，我們的uniapp項(xiàng)目已經(jīng)搭建起來了，而且已經(jīng)可以正常運(yùn)行了，兩個(gè)比較重要的json文件中，注釋文字也不報(bào)錯(cuò)了。但這離我們正常開發(fā)還差很多，我們?cè)谑褂胾niapp組件的時(shí)候，沒有提示，這使得我們編寫程序很不方便，我們可以安裝幾個(gè)uniapp插件解決這些問題。我們?cè)? VSCode 的擴(kuò)展商店中搜索一下uniapp，這里需要安裝3個(gè)插件：

• uniapp小程序擴(kuò)展
• uni-create-view
• uni-helper

安裝完之后，我們?cè)诰帉戫撁鏁r(shí)，會(huì)有提示：

在新建頁面時(shí)，會(huì)有uniapp相關(guān)的選項(xiàng)：

這些對(duì)于我們實(shí)際開發(fā)是非常由幫助的。

安裝uniapp的types

我們可以看到vue文件中，uniapp的組件并沒有變綠，說明ts是沒有生效的，我們先把uniapp的類型文件安裝一下，如下：

pnpm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types

我們?cè)谑褂胮npm安裝時(shí)，會(huì)報(bào)錯(cuò)，我們根據(jù)uni-helper的官方文檔中的提示，將 shamefully-hoist 為 true 。這個(gè)需要我們找到家目錄下的 .npmrc 文件，如圖：

然后在文件中增加：

registry=http://registry.npm.taobao.org
shamefully-hoist=true

然后，我們?cè)賵?zhí)行pnpm命令安裝類型文件。安裝完成后，在項(xiàng)目根目錄下，打開 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)：

報(bào)錯(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ò)了。然后我們打開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)簽變綠了，而且沒有報(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"]
}

最后

到這里，我們的uniapp項(xiàng)目就搭建完成了，而且是使用我們非常熟悉的 VSCode ，項(xiàng)目中還是用了 Vue3 ， Typescript ， Vite ，該裝的插件也已經(jīng)裝上了，鼠標(biāo)懸停會(huì)給我們組件的提示，大大提高了我們的開發(fā)效率。OK了，去開發(fā)我們的項(xiàng)目應(yīng)用吧~~~