在vscode搭建 uni-app 項目（Vue 3 + Vite + Pinia + uView Plus）
一、環境準備
1. 安裝 Node.js
確保已安裝 Node.js（需≥14版本），可通過以下命令檢查版本：
node -v
2. 安裝 VSCode
從 VSCode 官網 下載并安裝適合你操作系統的版本。
3. 安裝 uni-app 官方插件
在 VSCode 中打開擴展視圖（快捷鍵 Ctrl+Shift+X），搜索 “uni-app”，找到官方插件并安裝。
4. 安裝 Volar 插件
Volar 是 Vue 3 的官方語言服務，提供智能感知、語法檢查等功能。在擴展視圖中搜索 “Volar” 并安裝。
二、創建項目
1. 初始化項目
首先，確保你已經安裝了 Node.js 和 npm。然后，打開終端，使用以下命令創建一個新的 uni-app 項目：(個人node 版本 18.18.2)
注意： Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
npm init uni-app my-uniapp-project --template=vue3-vite-uni
2. 進入項目目錄
cd my-uniapp-project
3. 安裝依賴
運行以下命令安裝項目依賴：
npm install
4. 安裝 uView Plus
安裝 uView Plus UI 庫：
npm install uview-plus
5. 配置 uView Plus
在 main.js 中引入并配置 uView Plus：
// main.js
import { createSSRApp } from 'vue';
import App from './App.vue';
import uView from 'uview-plus';export function createApp() {const app = createSSRApp(App);app.use(uView);return {app,};
}
在 main.ts 中引入 uView Plus 的樣式：
// main.ts
import 'uview-plus/dist/style/index.scss';
6. 安裝 Pinia
安裝 Pinia 狀態管理庫：
npm install pinia
在 main.js 中引入并創建 Pinia 實例：
// main.js
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';
import uView from 'uview-plus';const app = createApp(App);
app.use(createPinia());
app.use(uView);
app.mount('#app');
7. 創建 Pinia Store
在 src/stores 目錄下創建一個新的 store 文件，例如 user.js：
// src/stores/user.js
import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({name: 'John Doe',}),actions: {setName(name) {this.name = name;},},
});
在組件中使用 store：
<template><view><text>{{ userName }}</text><u-button @click="changeName">Change Name</u-button></view>
</template><script setup>
import { useUserStore } from '../stores/user';const userStore = useUserStore();
const userName = computed(() => userStore.name);function changeName() {userStore.setName('Jane Doe');
}
</script>
8. 配置 Vite
在 vite.config.js 中配置 Vite 以支持 uni-app：
// vite.config.js
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';export default defineConfig({plugins: [uni()],
});
9. 配置package.json
這里需要適配h5、微信小程序、以及app或者其他各種小程序
配置以下命令在package.json：
{"scripts": {"dev": "uni dev","dev:h5": "uni dev -p h5","dev:mp-weixin": "uni dev -p mp-weixin","build:h5": "uni build -p h5","build:mp-weixin": "uni build -p mp-weixin","build:mp-baidu": "uni build -p mp-baidu","build:mp-jd": "uni build -p mp-jd","build:mp-kuaishou": "uni build -p mp-kuaishou","build:mp-lark": "uni build -p mp-lark","build:mp-qq": "uni build -p mp-qq","build:mp-toutiao": "uni build -p mp-toutiao"}
}
以及對應的依賴項在dependencies中
"@dcloudio/uni-app": "3.0.0-4040520250104002","@dcloudio/uni-app-harmony": "3.0.0-4040520250104002","@dcloudio/uni-app-plus": "3.0.0-4040520250104002","@dcloudio/uni-components": "3.0.0-4040520250104002","@dcloudio/uni-h5": "3.0.0-4040520250104002","@dcloudio/uni-mp-alipay": "3.0.0-4040520250104002","@dcloudio/uni-mp-baidu": "3.0.0-4040520250104002","@dcloudio/uni-mp-jd": "3.0.0-4040520250104002","@dcloudio/uni-mp-kuaishou": "3.0.0-4040520250104002","@dcloudio/uni-mp-lark": "3.0.0-4040520250104002","@dcloudio/uni-mp-qq": "3.0.0-4040520250104002","@dcloudio/uni-mp-toutiao": "3.0.0-4040520250104002","@dcloudio/uni-mp-weixin": "3.0.0-4040520250104002",
10.安裝對應依賴并 運行項目
使用以下命令運行項目：
npm install
npm run dev:h5 // 運行 H5 平臺
npm run dev:mp-weixin // 運行微信小程序這將啟動開發服務器，并在瀏覽器中打開項目。
11. 條件編譯
uni-app 支持條件編譯，允許你根據不同平臺編寫特定的代碼。例如：
// #ifdef H5
console.log('This code will only run on H5 platform');
// #endif// #ifdef MP-WEIXIN
console.log('This code will only run on WeChat Mini Program');
// #endif// #ifdef APP-PLUS
console.log('This code will only run on App platform');
// #endif
這樣你可以根據需要在 請求攔截 或者 路徑處理 時區分不同的運行環境
12. 構建項目
要構建項目，使用以下命令：
npm run build:h5 // 對應的命令
這將生成一個構建后的文件夾，其中包含可以部署的靜態文件。
未完待續。。。
)
)