以下是搭建一个使用TypeScript、Vite 4、Vue 3、Pinia、Vant 和 Axios 的H5项目的步骤：
- 初始化项目：
npm create vite@latest my-app --template vue-ts- 进入项目目录并安装依赖：
cd my-app
npm install- 安装Vant：
npm install vant- 安装Axios：
npm install axios- 安装Pinia：
npm install pinia- 配置Vite：
在vite.config.ts中引入并配置插件：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()]
})- 配置TypeScript：
在tsconfig.json中配置对Vant的类型支持：
{
"compilerOptions": {
"types": ["vant/types/vant"]
}
}- 在
main.ts中配置Vant和Axios：
import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import axios from 'axios'
const app = createApp(App)
app.use(Vant)
// 配置axios全局配置，如基地址等
axios.defaults.baseURL = 'https://api.example.com'
app.provide('axios', axios)
app.mount('#app')- 配置Pinia：
在src目录下创建store.ts：
import { defineStore } from 'pinia'
import { store } from './index'
export const useMainStore = defineStore({
id: 'main',
state: () => {
return { counter: 0 }
},
actions: {
increment() {
this.counter++
}
}
})在src/store/index.ts中安装并导出Pinia：
import { createPinia } from 'pinia'
export const store = createPinia()在main.ts中安装Pinia：
import { createApp } from 'vue'
import { store } from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')至此，项目的基本环境搭建完成。可以根据具体需求添加更多的配置和功能。