微信小程序电商实战 02：Taro 3 + Vue 3 + TypeScript + Pinia 脚手架搭建

2026年6月11日 10:10 CST 微信小程序TaroVue3TypeScriptPinia脚手架项目初始化

微信小程序电商实战 01 技术选型 | 02 脚手架搭建 ← 本文 | 03 NutUI 配置 | 04 云开发环境 | 05 商品模块 | 06 购物车与订单 | 07 微信支付 | 08 用户中心 | 09 性能优化 | 10 上线部署

# Taro 3 脚手架搭建 ## 初始化 ### taro init - 选 Vue 3 + TypeScript + Vite - 编译目标：weapp ### 目录结构 - src/pages 页面 - src/components 组件 - src/stores Pinia - src/utils 工具函数 - src/api 云函数调用 ## 关键配置 ### config/index.ts - alias 路径别名 - copy 静态资源 ### app.config.ts - pages 路由注册 - tabBar 底部导航 - window 全局样式 ## Pinia 集成 ### 安装与注册 - main.ts 挂载 - stores/ 目录分模块 ### 电商核心 Store - useCartStore 购物车 - useUserStore 用户登录态 - useOrderStore 订单 ## 环境变量 ### .env.development - 云函数环境 ID（开发） ### .env.production - 云函数环境 ID（生产） ## 工具链 ### ESLint + Vue 规则 ### Vite 别名插件 ### TypeScript 路径配置

一、前置准备

确保本机已安装：

node -v    # 需要 18.x LTS
pnpm -v    # 需要 8.x+

如果还没装 pnpm：

npm install -g pnpm

二、初始化 Taro 项目

# 安装 Taro CLI
pnpm add -g @tarojs/cli

# 初始化项目（交互式选择）
taro init wxshop

初始化时的选项选择：

问题	选择
框架	Vue3
是否使用 TypeScript	是
CSS 预处理器	SCSS
构建工具	Vite
模板	默认模板

cd wxshop
pnpm install

三、项目目录结构

初始化后按电商场景调整目录：

wxshop/
├── config/
│   ├── index.ts          # Taro 主配置（别名、插件）
│   ├── dev.ts            # 开发环境配置
│   └── prod.ts           # 生产环境配置
├── src/
│   ├── app.ts            # 应用入口
│   ├── app.config.ts     # 页面路由 + tabBar
│   ├── app.scss          # 全局样式
│   ├── pages/
│   │   ├── index/        # 首页（商品列表）
│   │   ├── product/      # 商品详情
│   │   ├── cart/         # 购物车
│   │   ├── order/        # 订单列表 & 详情
│   │   └── user/         # 用户中心
│   ├── components/       # 公共组件
│   ├── stores/           # Pinia Store
│   │   ├── cart.ts
│   │   ├── user.ts
│   │   └── order.ts
│   ├── api/              # 云函数调用封装
│   ├── utils/            # 工具函数
│   └── types/            # TypeScript 类型定义
├── .env.development
├── .env.production
└── project.config.json   # 微信开发者工具配置

四、配置路径别名

修改 config/index.ts，加入 @ 别名：

// config/index.ts
import path from 'path'

const config = {
  // ... 其他配置
  alias: {
    '@': path.resolve(__dirname, '..', 'src'),
  },
}
export default config

同步修改 tsconfig.json，让 TypeScript 识别别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

配置后可以用 import { useCartStore } from '@/stores/cart' 替代相对路径。

五、配置 tabBar 和页面路由

src/app.config.ts 是小程序路由和全局配置的核心文件：

// src/app.config.ts
export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/product/index',
    'pages/cart/index',
    'pages/order/index',
    'pages/user/index',
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: '商城',
    navigationBarTextStyle: 'black',
  },
  tabBar: {
    color: '#999',
    selectedColor: '#E31D1A',  // 电商红
    backgroundColor: '#fff',
    borderStyle: 'black',
    list: [
      { pagePath: 'pages/index/index',  text: '首页',   iconPath: 'assets/tab/home.png',  selectedIconPath: 'assets/tab/home-active.png' },
      { pagePath: 'pages/cart/index',   text: '购物车', iconPath: 'assets/tab/cart.png',  selectedIconPath: 'assets/tab/cart-active.png' },
      { pagePath: 'pages/order/index',  text: '订单',   iconPath: 'assets/tab/order.png', selectedIconPath: 'assets/tab/order-active.png' },
      { pagePath: 'pages/user/index',   text: '我的',   iconPath: 'assets/tab/user.png',  selectedIconPath: 'assets/tab/user-active.png' },
    ],
  },
})

六、集成 Pinia

安装

pnpm add pinia

在 app.ts 中挂载

// src/app.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './app.vue'

const pinia = createPinia()

const app = createApp(App)
app.use(pinia)

export default app

注意：这里是 Taro 项目，与 uni-app 不同，不需要在 createApp() 里显式 return pinia。直接 app.use(pinia) 即可。

创建购物车 Store（示例）

// src/stores/cart.ts
import { defineStore } from 'pinia'

interface CartItem {
  id: string
  name: string
  price: number
  quantity: number
  skuId: string
  image: string
}

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] as CartItem[],
  }),
  getters: {
    totalCount: (state) => state.items.reduce((sum, i) => sum + i.quantity, 0),
    totalPrice: (state) => state.items.reduce((sum, i) => sum + i.price * i.quantity, 0),
  },
  actions: {
    addItem(item: CartItem) {
      const existing = this.items.find(i => i.skuId === item.skuId)
      if (existing) {
        existing.quantity += item.quantity
      } else {
        this.items.push(item)
      }
    },
    removeItem(skuId: string) {
      this.items = this.items.filter(i => i.skuId !== skuId)
    },
    clearCart() {
      this.items = []
    },
  },
})

七、环境变量配置

Taro + Vite 使用 .env 文件管理环境变量，变量名必须以 VITE_ 开头才会暴露给前端代码：

# .env.development
VITE_CLOUD_ENV=your-dev-env-id
VITE_BASE_URL=http://localhost:3000

# .env.production
VITE_CLOUD_ENV=your-prod-env-id
VITE_BASE_URL=https://api.yourdomain.com

在代码中使用：

const envId = import.meta.env.VITE_CLOUD_ENV

八、配置 project.config.json

project.config.json 是微信开发者工具读取的配置文件，初始化时已自动生成，需要填入你的 AppID：

{
  "appid": "你的小程序 AppID",
  "projectname": "wxshop",
  "compileType": "miniprogram",
  "setting": {
    "urlCheck": false,
    "es6": false,
    "enhance": true,
    "postcss": false,
    "preloadBackgroundData": false,
    "minified": true
  },
  "condition": {}
}

urlCheck: false 在开发阶段关掭域名白名单检查，上线前记得改回 true。

九、首次运行

# 编译并监听（微信小程序）
pnpm dev:weapp

编译产物输出到 dist/ 目录。打开微信开发者工具，选择「导入项目」，目录指向项目根目录（不是 dist/），AppID 填你注册的小程序 ID，即可预览。

flowchart LR A[pnpm dev:weapp] --> B[Vite 编译] B --> C[dist/ 目录] C --> D[微信开发者工具<br/>导入项目] D --> E[模拟器预览] D --> F[真机调试]

十、ESLint 配置（可选但推荐）

pnpm add -D eslint @vue/eslint-config-typescript eslint-plugin-vue

// .eslintrc.cjs
module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript',
  ],
  rules: {
    'vue/multi-word-component-names': 'off',
  },
}