TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建

以下是搭建一个使用TypeScript、Vite 4、Vue 3、Pinia、Vant 和 Axios 的H5项目的步骤：

1. 初始化项目：

npm create vite@latest my-app --template vue-ts

2. 进入项目目录并安装依赖：

cd my-app
npm install

3. 安装Vant：

npm install vant

4. 安装Axios：

npm install axios

5. 安装Pinia：

npm install pinia

6. 配置Vite：

在vite.config.ts中引入并配置插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
  plugins: [vue()]
})

7. 配置TypeScript：

在tsconfig.json中配置对Vant的类型支持：

{
  "compilerOptions": {
    "types": ["vant/types/vant"]
  }
}

8. 在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')

9. 配置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')

至此，项目的基本环境搭建完成。可以根据具体需求添加更多的配置和功能。