01-环境搭建与第一个小程序

🌿 Taro+Vue3 入门（一）：环境搭建与第一个小程序

系列导读：Taro 不仅支持 React，同样完美支持 Vue3。 如果你是 Vue 技术栈开发者，用 Taro+Vue3 写多端小程序是最自然的选择。

---

📊 为什么选 Taro + Vue3？

方案	框架	适合人群	学习成本
Taro + React	React + TS	React 技术栈	Vue 开发者高
Taro + Vue3	Vue3 + TS	Vue 技术栈	极低
UniApp	Vue3	Vue 技术栈	低（生态不同）
原生开发	各平台语法	单平台专精	每端都要学

---

🛠 1. 创建项目

# 安装 Taro CLI
npm install -g @tarojs/cli

# 创建 Vue3 项目
taro init my-vue3-app

# 选择：
# ➤ 框架：Vue3           ← 关键选择！
# ➤ CSS 预处理器：Sass
# ➤ 编译工具：Webpack5
# ➤ 包管理器：pnpm
# ➤ 模板：默认模板

cd my-vue3-app
npm install

运行

# 微信小程序
npm run dev:weapp

# H5 网页
npm run dev:h5

# 支付宝小程序
npm run dev:alipay

---

📁 2. 项目结构

my-vue3-app/
├── config/
│   └── index.ts               # 编译配置
├── src/
│   ├── app.ts                  # 应用入口
│   ├── app.config.ts           # 全局路由配置
│   ├── app.scss                # 全局样式
│   └── pages/
│       └── index/
│           ├── index.vue       # 📄 Vue 单文件组件！
│           ├── index.config.ts # 页面配置
│           └── index.scss
├── project.config.json
└── package.json

与 React 版最大区别：页面文件是 .vue 而不是 .tsx。

---

📝 3. 第一个页面

<!-- src/pages/index/index.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'

const count = ref(0)
const message = ref('欢迎使用 Taro + Vue3！')

function handleAdd() {
  count.value++
  Taro.showToast({ title: `点击了 ${count.value} 次`, icon: 'none' })
}

function handleNavigate() {
  Taro.navigateTo({ url: '/pages/list/index' })
}
</script>

<template>
  <view class="index">
    <image
      class="logo"
      src="https://taro-docs.jd.com/img/logo-taro.png"
      mode="aspectFit"
    />
    <text class="title">{{ message }}</text>
    <text class="subtitle">Vue3 + TypeScript + 多端 🚀</text>

    <view class="counter">
      <text class="count">{{ count }}</text>
      <button class="btn" @tap="handleAdd">点我 +1</button>
    </view>

    <button class="nav-btn" @tap="handleNavigate">
      跳转到列表页 →
    </button>
  </view>
</template>

<style lang="scss">
.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 32px;

  .logo { width: 160px; height: 160px; margin-bottom: 24px; }
  .title { font-size: 36px; font-weight: bold; color: #42b883; }
  .subtitle { font-size: 28px; color: #666; margin: 8px 0 48px; }

  .counter {
    text-align: center;
    .count { font-size: 80px; font-weight: bold; color: #42b883; display: block; }
    .btn {
      margin-top: 16px;
      background: #42b883;
      color: #fff;
      border-radius: 12px;
      font-size: 28px;
    }
  }

  .nav-btn {
    margin-top: 32px;
    background: transparent;
    color: #42b883;
    border: 2px solid #42b883;
    border-radius: 12px;
  }
}
</style>

---

🔍 4. Vue3 模板 vs React JSX 对比

概念	React (Taro)	Vue3 (Taro)
事件绑定	onClick={fn}	@tap="fn"
条件渲染	{flag && <View/>}	<view v-if="flag"/>
列表渲染	{list.map(i => ...)}	<view v-for="i in list"/>
双向绑定	手动 onChange	v-model
样式作用域	CSS Modules	<style scoped>
状态声明	useState()	ref() / reactive()

<!-- Vue3 写法更贴近 HTML，模板直观 -->
<template>
  <view v-for="item in list" :key="item.id" @tap="handleTap(item)">
    <text>{{ item.name }}</text>
    <text v-if="item.isVip" class="vip">VIP</text>
  </view>
</template>

---

✅ 本篇小结 Checklist

• 使用 Taro CLI 创建 Vue3 项目
• 理解 .vue 单文件组件三段结构
• 成功在微信小程序和 H5 上运行
• 理解 Vue3 模板语法与 React JSX 的差异

---

下一篇预告：《Vue3 基础速览 — 组合式 API 核心》

---

本文是「Taro+Vue3 入门」系列第 1 篇，共 10 篇。