專案結構

my-vue3-project
├─ .env   						//預設環境變數
├─ .env.development  			//開發環境變數
├─ .eslintrc-auto-import.json	//（autoimport變數，eslint設定）由auto-import外掛生成
├─ .eslintrc.js 				//eslint組態檔
├─ .gitignore
├─ auto-imports.d.ts			//（autoimport變數，ts宣告檔案）由auto-import外掛生成
├─ index.html
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ src
│  ├─ App.vue
│  ├─ components
│  ├─ main.js
│  ├─ manifest.json				//uniapp專案組態檔
│  ├─ pages
│  │  └─ index
│  │     └─ IndexView.vue
│  ├─ pages.json 	 			//頁面組態檔
│  ├─ services 					// 請求後端服務目錄
│  │  ├─ api.js  				// 後端api
│  │  └─ http.js				//請求
│  ├─ shime-uni.d.ts
│  ├─ static					//靜態檔案目錄
│  │  └─ logo.png
│  ├─ store	 					//pinia全域性狀態庫
│  │  └─ useUserStore.js
│  ├─ uni.scss
│  └─ utils						//公共的工具方法
└─ vite.config.js

建立歷程

專案建立^[1]

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

Vue3/Vite 版要求 node 版本^14.18.0 || >=16.0.0
如果使用 HBuilderX（3.6.7 以下版本）執行 Vue3/Vite 建立的最新的 cli 工程，需要在 HBuilderX 執行設定最底部設定 node 路徑為自己本機高版本 node 路徑（注意需要重啟 HBuilderX 才可以生效）
HBuilderX Mac 版本選單欄左上角 HBuilderX->偏好設定->執行設定->node 路徑
HBuilderX Windows 版本選單欄工具->設定->執行設定->node 路徑

專案依賴安裝

Eslint

Eslint 的相關設定可參考文章：Web 專案如何設定 Eslint
注意：在設定完 Eslint 之後，在專案中使用 uni 的時候會報 uni 未被定義的錯，需在.eslintrc.js 中加上以下程式碼

globals: {
  uni: true;
}

vite.config.js 中 eslintPlugin 設定

import eslintPlugin from 'vite-plugin-eslint'
export default defineConfig({
  plugins: [
  	eslintPlugin({
      cache: true,
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue', 'src/*.nvue'],
      failOnError: false // eslint報錯不影響執行
    }),
  ]

Pinia^[2]

安裝

注意：在這個專案中安裝的 vue 版本是：3.2.47，pinia：3.1 及以上版本需要依賴 vue：3.3 及以上版本才能執行成功。

@REM npm 安裝
npm i [email protected]
@REM node 安裝
yarn add [email protected]

安裝依賴時出現如下報錯可嘗試通過參考文章解決：npm 安裝依賴時出現 Peer Dependencies 衝突報錯

While resolving: [email protected]
Found: [email protected]
node_modules/vue
  peer vue@"^3.2.25" from @vitejs/[email protected]
  node_modules/@vitejs/plugin-vue
    ...

Conflicting peer dependency: [email protected]
node_modules/vue
  peer vue@">= 2.5 < 2.7" from @vue/[email protected]
  node_modules/@vue/composition-api
    peerOptional @vue/composition-api@"^1.4.0" from [email protected]
    node_modules/pinia
      pinia@"2.0.34" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Luch-Request^[3]

uniapp 原生的 uni.request 使用比較麻煩，它並非使用 Promise 的形式也不支援請求攔截和相應攔截的設定，而 luch-request 基於 Promise 物件實現更簡單的 request 使用方式，支援請求和響應攔截

支援全域性掛載
支援多個全域性設定範例
支援自定義驗證器
支援檔案上傳/下載
支援 task 操作
支援自定義引數
支援多攔截器
對引數的處理比 uni.request 更強

安裝

npm install luch-request -S

Sass 支援^[4]

安裝

npm i sass sass-loader -D

unplugin-auto-import^[5]

unplugin-auto-import 是為 Vite、Webpack、Rollup 和 esbuild 按需自動匯入 API，同時支援 TypeScript。
使用它在 vue3 專案中使用預設匯入的 api 就不需要 import，可以通過預設自動匯入模組，增強開發體驗

安裝

npm i -D unplugin-auto-import

在 Vite.config.js 中加入如下設定

import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
  plugins: [
    AutoImport({
      // 需要自動引入的檔案
      include: [
        /\.[j]sx?$/,
        /\.vue$/,
        /\.vue\?vue/,
        /\.nvue$/,
        /\.nvue\?nvue/,
        /\.md$/,
      ],
      // 全域性自動引入api預設
      imports: [
        // 外掛預設支援匯入的api
        "vue",
        // 'vue-router',
        "pinia",
        "uni-app",
        // 自定義匯入的api
      ],
      // eslint設定
      eslintrc: {
        enabled: true, // Default `false`
        filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },
      dts: "./auto-imports.d.ts",
      // dts:false
    }),
  ],
});

生成 eslint 組態檔並使用

通過執行命令npm run dev:h5 執行專案，執行成功時專案根目錄會生成auto-imports.d.ts和.eslintrc-auto-import.json兩個檔案，然後在.eslintrc.js 檔案中的 extends 屬性中，引入該檔案

extends: [
  'standard',
  'plugin:vue/vue3-essential',
  './.eslintrc-auto-import.json'
]

注意：引入後需重新執行專案才能生效

新增預設和開發環境變數檔案

在專案根目錄新增.env 和.env.development 檔案，以設定環境變數
詳細設定教學可參照官網：Vite 環境變數和模式

設定 UI 庫 uni-ui^[6]

安裝

npm i @dcloudio/uni-ui

設定

vite.config.js

注意 cli 專案預設是不編譯 node_modules 下的元件的，導致條件編譯等功能失效，導致元件異常需要在 vite.config.js 增加 @dcloudio/uni-ui 包的編譯即可正常

transpileDependencies: ["@dcloudio/uni-ui"];

pages.json

正常來說這樣子引入的話，使用元件時，需要在頁面處 import 才可以使用，然而可以通過 npm+easycom 的形式來全域性引入元件。在 pages.json 中加入如下程式碼，即可在使用元件而不需在頁面處 import。

"easycom": {
	"autoscan": true,
	"custom": {
		"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
	}
}

專案到這裡就結束了，這裡提供該專案的 github 地址，方便拉取直接使用

這個專案中 master 分支中使用的 Eslint 風格為 Standard，而 prettier 分支使用的風格為 Prettier

https://github.com/luxigaola/my-uniapp-project

如何使用Vite建立Vue3的uniapp專案