Uni-app + Vue3 + TS +Vite 創建項目步驟
uni-app 是公司常用的一個框架，隨著 vue3 的普及，好多公司的項目都已經開始使用 vue3 + uni-app + vite 開發項目，順手記錄和分享一下我在這過程中遇到的問題。
一、npx 與 npm 區別
npm 都很熟，可是與 npm 如此相似的 npx 是干嘛的呢？我們為甚要介紹 npx ?
由于 uni-app 官方提供創建命令使用的是 npx，所以我們先來了解下 npx 是干什么的？它與 npm 的區別。
npx 是 npm 的高級版本，它從 npm v5.2 版本開始引入的，與 npm 綁定在一起，無需額外安裝，具有更大的功能。npx 是 npm exec 的別名，如果沒有時，可以手動：npm install -g npx 進行安裝。
區別：
- npm 只能通過 package.json 里定義然后執行命令，npx 可以直接執行 node_module 包中的命令。
- npx 可以指定 node 、命令的版本，解決不同項目使用不同版本的命令問題。
- 臨時安裝可執行依賴包，不用全局安裝，也不用擔心長期的污染。
二、使用 Vue3/Vite 版創建項目
1、創建 js 開發的項目：
npx degit dcloudio/uni-preset-vue#vite my-vue3-js
執行命令后會自動創建項目，然后執行：
cd my-vue3-js // 進入my-vue3-js項目
執行：
npm install
依賴下載完成之后，就可以使用命令：
npm run dev:h5
啟動網頁服務。至此，項目就創建完成，并可進行預覽：
2、創建以 typeScript 開發的項目。
創建命令：
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
回車開始創建的時候會報錯：could not fetch remote
https://github.com/dcloudio/uni-prset-vue，由于網絡或者域名攔截引起的錯誤。
可以直接打開 github 地址：https://github.com/dcloudio/uni-preset-vue。
或者 gitee 下載地址：https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip。
下載 zip 壓縮包。
解壓之后，運行：
npm install
安裝依賴完成之后，可以使用：
npm run dev:h5
就可以正常運行項目了。
如果不熟悉 uni-app 項目的同學，可以自己在官網看看它的運行命令都有哪些以及它們的意義。
官方創建文檔地址：
https://uniapp.dcloud.io/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app。
三、項目結構及作用
以 uni-app + vue3 + vite + ts 項目為例，項目結構目錄如圖：
- index.html 首頁入口文件。
- package.json 項目配置文件。
- tsconfig.json typescript 配置文件。
- vite.config.ts vite 的配置文件。
src 存放開發資源文件，基本要做的事情都在這個目錄內，里面又包含了幾個目錄文件：
- pages 存放所有頁面文件，我們創建的頁面組件都放入該文件夾。
- static 存放靜態資源的文件夾。
- App.vue 頁面入口文件，所有頁面都在 App.vue 下進行切換。
- env.d.ts 第三方模塊的類型聲明文件。
- main.ts 項目入口文件，因為使用 ts 語法，所以后綴是 .ts。
- mainfest.json 應用配置文件，用于指定應用名稱、圖標、權限等。
- pages.json 全局配置文件，可以配置頁面文件路徑、窗口樣式、原生的導航欄、底部tab欄等。
- uni.scss 是uni-app的樣式包，在其他文件中可以快速引用樣式包內的樣式。
