uni-app 是公司常用的一個(gè)框架，隨著 vue3 的普及，好多公司的項(xiàng)目都已經(jīng)開(kāi)始使用 vue3 + uni-app + vite 開(kāi)發(fā)項(xiàng)目，順手記錄和分享一下我在這過(guò)程中遇到的問(wèn)題。

一、npx 與 npm 區(qū)別

npm 都很熟，可是與 npm 如此相似的 npx 是干嘛的呢？我們?yōu)樯跻榻B npx ?

由于 uni-app 官方提供創(chuàng)建命令使用的是 npx，所以我們先來(lái)了解下 npx 是干什么的？它與 npm 的區(qū)別。

npx 是 npm 的高級(jí)版本，它從 npm v5.2 版本開(kāi)始引入的，與 npm 綁定在一起，無(wú)需額外安裝，具有更大的功能。npx 是 npm exec 的別名，如果沒(méi)有時(shí)，可以手動(dòng)：npm install -g npx 進(jìn)行安裝。

區(qū)別：

• npm 只能通過(guò) package.json 里定義然后執(zhí)行命令，npx 可以直接執(zhí)行 node_module 包中的命令。
• npx 可以指定 node 、命令的版本，解決不同項(xiàng)目使用不同版本的命令問(wèn)題。
• 臨時(shí)安裝可執(zhí)行依賴(lài)包，不用全局安裝，也不用擔(dān)心長(zhǎng)期的污染。

二、使用 Vue3/Vite 版創(chuàng)建項(xiàng)目

1、創(chuàng)建 js 開(kāi)發(fā)的項(xiàng)目：

npx degit dcloudio/uni-preset-vue#vite my-vue3-js

執(zhí)行命令后會(huì)自動(dòng)創(chuàng)建項(xiàng)目，然后執(zhí)行：

cd my-vue3-js  // 進(jìn)入my-vue3-js項(xiàng)目

執(zhí)行：

npm install

依賴(lài)下載完成之后，就可以使用命令：

npm run dev:h5

啟動(dòng)網(wǎng)頁(yè)服務(wù)。至此，項(xiàng)目就創(chuàng)建完成，并可進(jìn)行預(yù)覽：

2、創(chuàng)建以 typeScript 開(kāi)發(fā)的項(xiàng)目。

創(chuàng)建命令：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

回車(chē)開(kāi)始創(chuàng)建的時(shí)候會(huì)報(bào)錯(cuò)：could not fetch remote
https://github.com/dcloudio/uni-prset-vue，由于網(wǎng)絡(luò)或者域名攔截引起的錯(cuò)誤。

可以直接打開(kāi) github 地址：https://github.com/dcloudio/uni-preset-vue。

或者 gitee 下載地址：https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip。

下載 zip 壓縮包。

解壓之后，運(yùn)行：

npm install

安裝依賴(lài)完成之后，可以使用：

npm run dev:h5

就可以正常運(yùn)行項(xiàng)目了。

如果不熟悉 uni-app 項(xiàng)目的同學(xué)，可以自己在官網(wǎng)看看它的運(yùn)行命令都有哪些以及它們的意義。

官方創(chuàng)建文檔地址：

https://uniapp.dcloud.io/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app。

三、項(xiàng)目結(jié)構(gòu)及作用

以 uni-app + vue3 + vite + ts 項(xiàng)目為例，項(xiàng)目結(jié)構(gòu)目錄如圖：

• index.html 首頁(yè)入口文件。
• package.json 項(xiàng)目配置文件。
• tsconfig.json typescript 配置文件。
• vite.config.ts vite 的配置文件。

src 存放開(kāi)發(fā)資源文件，基本要做的事情都在這個(gè)目錄內(nèi)，里面又包含了幾個(gè)目錄文件：

• pages 存放所有頁(yè)面文件，我們創(chuàng)建的頁(yè)面組件都放入該文件夾。
• static 存放靜態(tài)資源的文件夾。
• App.vue 頁(yè)面入口文件，所有頁(yè)面都在 App.vue 下進(jìn)行切換。
• env.d.ts 第三方模塊的類(lèi)型聲明文件。
• main.ts 項(xiàng)目入口文件，因?yàn)槭褂?ts 語(yǔ)法，所以后綴是 .ts。
• mainfest.json 應(yīng)用配置文件，用于指定應(yīng)用名稱(chēng)、圖標(biāo)、權(quán)限等。
• pages.json 全局配置文件，可以配置頁(yè)面文件路徑、窗口樣式、原生的導(dǎo)航欄、底部tab欄等。
• uni.scss 是uni-app的樣式包，在其他文件中可以快速引用樣式包內(nèi)的樣式。