以下是一个使用Vue 3、TypeScript、Pinia、Vant 4和Vite创建的简单商城H5项目的基本目录结构和main.ts文件示例：
project-name/
|-- public/
|-- src/
| |-- assets/
| | |-- logo.png
| |-- components/
| | |-- MyComponent.vue
| |-- store/
| | |-- index.ts
| | |-- cart.ts
| |-- styles/
| | |-- base.scss
| |-- App.vue
| |-- main.ts
|-- vite.config.ts
|-- tsconfig.json
|-- babel.config.js
|-- postcss.config.js
|-- package.json
|-- index.html
src/main.ts 示例：
import { createApp } from 'vue';
import App from './App.vue';
import { store } from './store';
import Vant from 'vant';
import 'vant/lib/index.css';
const app = createApp(App);
app.use(store);
app.use(Vant);
app.mount('#app');
src/store/index.ts 示例：
import { defineStore } from 'pinia';
import { store } from './cart';
// 这里可以定义更多的store...
export const useStore = defineStore({
id: 'main',
state: () => ({
// 状态定义
}),
actions: {
// 方法定义
}
});
src/store/cart.ts 示例：
import { defineStore } from 'pinia';
export const useCartStore = defineStore({
id: 'cart',
state: () => ({
items: []
// 购物车状态定义
}),
actions: {
addToCart(item) {
// 添加商品到购物车的方法
}
// 其他购物车相关方法
}
});
vite.config.ts 示例（需要安装对应插件）：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 其他配置
});
tsconfig.json 示例（部分配置）：
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"noEmit": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
package.json 示例（部分依赖）：
{
"name": "project-name",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies"