### IDE Setup Examples

Source: https://vite.icebreaker.top/guide/cli

Shows examples of using the `ide setup` command with different root directories.

```bash
wv ide setup .
wv ide setup ./dist/dev
```

--------------------------------

### WEAPP CLI Help Examples

Source: https://vite.icebreaker.top/packages/weapp-ide-cli

Examples of how to get help for specific WEAPP CLI commands.

```bash
weapp help navigate
```

```bash
weapp navigate --help
```

```bash
weapp compare --help
```

```bash
weapp compare --baseline .screenshots/baseline/home.png --max-diff-pixels 100 --json
```

--------------------------------

### Vue 3 (Web) Script Setup Example

Source: https://vite.icebreaker.top/wevu/vue-sfc/vue3-vs-weapp-sfc

Standard Vue 3 script setup for web applications, using 'vue' for reactivity.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import MyCard from './MyCard.vue'

const count = ref(0)
</script>

<template>
  <MyCard :count="count" @click="count++" />
</template>
```

--------------------------------

### Weapp-vite + Wevu (Mini Program) Script Setup Example

Source: https://vite.icebreaker.top/wevu/vue-sfc/vue3-vs-weapp-sfc

Example of script setup in Weapp-vite for mini-programs, using 'wevu' for reactivity. The compiler automatically generates `usingComponents` based on imports and template usage.

```vue
<script setup lang="ts">
import { ref } from 'wevu'
import MyCard from './MyCard.vue'

// 编译期会根据 import + 模板使用自动生成 usingComponents
const count = ref(0)
</script>

<template>
  <MyCard :count="count" @click="count++" />
</template>
```

--------------------------------

### Initialize Weapp-vite Project Interactively

Source: https://vite.icebreaker.top/packages/create-weapp-vite

Use this command to start a new mini program project with create-weapp-vite. It will prompt for AI skills installation and generate AGENTS.md.

```bash
pnpm create weapp-vite
# or npx create-weapp-vite
```

--------------------------------

### Setup Context

Source: https://vite.icebreaker.top/wevu/vue3-compat

Enhanced context object received in the `setup()` function.

```APIDOC
## Setup Context

The `setup()` function receives an enhanced context object, including Vue 3's `emit`/`expose`/`attrs` plus mini-program runtime fields.

### Context Fields

*   `props`: Component properties (from mini-program).
*   `emit`: Dispatches events via mini-program's `triggerEvent(eventName, detail?, options?)`.
*   `expose`: Exposes public methods (always present).
*   `attrs`: Attributes (always present; an empty object in mini-program scenarios).
*   `runtime`: wevu runtime instance.
*   `state`: Reactive state.
*   `proxy`: Public instance proxy.
*   `bindModel`: Helper for two-way binding.
*   `watch`: Helper for watching.
*   `instance`: Internal mini-program instance.
```

--------------------------------

### IDE Info and Ticket Operations Examples

Source: https://vite.icebreaker.top/guide/cli

Examples demonstrating how to use `ide info`, `ide test-accounts`, `ide ticket`, `ide ticket:set`, and `ide ticket:refresh` commands.

```bash
wv ide info
```

```bash
wv ide test-accounts --open
```

```bash
wv ide ticket
```

```bash
wv ide ticket:set --ticket your-ticket
```

```bash
wv ide ticket:refresh
```

--------------------------------

### Start Vite Development Server for Mini Programs

Source: https://vite.icebreaker.top/guide/cli

Starts a development server for mini-programs. Use the `-p weapp` flag to specify the platform.

```bash
wv dev -p weapp
```

--------------------------------

### WEAPP CLI Configuration Example

Source: https://vite.icebreaker.top/packages/weapp-ide-cli

A JSON configuration file example for the WEAPP CLI, specifying the CLI path and locale.

```json
{
  "cliPath": "/Applications/wechatwebdevtools.app/Contents/MacOS/cli",
  "locale": "zh"
}
```

--------------------------------

### Basic Component Example

Source: https://vite.icebreaker.top/wevu/vue3-compat

Example demonstrating the usage of basic components and lifecycle hooks.

```javascript
import { computed, defineComponent, onMounted, ref } from 'wevu'

defineComponent({
  data: () => ({ count: 0 }),

  setup(props, { emit }) {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)

    onMounted(() => {
      console.log('Component mounted')
    })

    function increment() {
      count.value++
      emit('update', count.value)
    }

    return { count, doubled, increment }
  },
})
```

--------------------------------

### Watch and WatchEffect Example

Source: https://vite.icebreaker.top/wevu/vue3-compat

Example demonstrating the usage of `watch` and `watchEffect`.

```javascript
import { ref, watch, watchEffect } from 'wevu'

defineComponent({
  setup() {
    const count = ref(0)

    watchEffect(() => {
      console.log('Count changed:', count.value)
    })

    watch(count, (newValue, oldValue) => {
      console.log(`Count: ${oldValue} -> ${newValue}`)
    })

    // watch/watchEffect return a callable stop handle, and also support pause/resume
    const { pause, resume, stop } = watch(count, () => {
      console.log('count changed')
    })
    pause()
    resume()
    stop()

    return { count }
  },
})
```

--------------------------------

### MCP Service Management Examples

Source: https://vite.icebreaker.top/guide/cli

Examples for managing MCP services, including transport configuration, initialization, printing previews, and doctor checks.

```bash
wv mcp
```

```bash
wv mcp --transport streamable-http --host 127.0.0.1 --port 3088 --endpoint /mcp
```

```bash
wv mcp print codex
```

```bash
wv mcp init codex -y
```

```bash
wv mcp init codex --transport http --url http://127.0.0.1:3088/mcp
```

```bash
wv mcp doctor codex
```

--------------------------------

### Install Weapp-vite Skills

Source: https://vite.icebreaker.top/blog/release6

Install necessary skills for Weapp-vite development, including best practices for Vue SFCs and Wevu.

```bash
npx skills add sonofmagic/skills
```

--------------------------------

### Setup IDE Locally

Source: https://vite.icebreaker.top/guide/cli

The `ide setup` command pre-warms the local configuration for the WeChat Developer Tools without immediately opening the IDE. This is useful for preparing the environment in automation scripts or before manually opening the IDE.

```bash
wv ide setup [root]
```

--------------------------------

### Initialize and Use wevu/router

Source: https://vite.icebreaker.top/wevu/router

Demonstrates the basic setup for creating a router instance and then retrieving it for navigation. Recommended to call createRouter() once at the application entry or a higher setup scope, and useRouter() in subsequent business code.

```typescript
import { createRouter, useRouter } from 'wevu/router'

// Call createRouter() once at the application entry or a higher setup scope
createRouter()

// In business code, just get the instance
const router = useRouter()

await router.push('/pages/home/index')
await router.replace('/pages/profile/index?tab=security')
await router.back(1)
```

--------------------------------

### Start Vite Development Server for Web (H5)

Source: https://vite.icebreaker.top/guide/cli

Starts a development server for H5 (web) applications. Specify the host using the `--host` flag.

```bash
wv dev -p h5 --host 0.0.0.0
```

--------------------------------

### Local Build Scope Example

Source: https://vite.icebreaker.top/guide/cli

Examples demonstrating how to use the '--scope' parameter for partial builds in 'dev' and 'build' commands. This is useful for debugging specific parts of a project.

```bash
wv dev --scope main,packages/order
```

```bash
wv build --scope packages/order
```

```bash
wv build --scope main,packages/order --analyze
```

--------------------------------

### Analyze Command Examples

Source: https://vite.icebreaker.top/guide/cli

Provides examples of using the `analyze` command with different options for outputting results, checking budgets, and profiling HMR.

```bash
wv analyze --json --output reports/analyze.json
wv analyze --markdown --output reports/analyze.md
wv analyze --report pr --output reports/analyze-pr.md
wv analyze --budget-check
wv analyze --hmr-profile .tmp/weapp-vite-hmr-profile.jsonl --json
wv analyze --platform h5 --json
```

--------------------------------

### Create Wevu App and Install Plugin

Source: https://vite.icebreaker.top/wevu/runtime

Demonstrates creating a Wevu application instance and installing a plugin to add global properties. The plugin injects a $log method into the global properties, accessible via the instance proxy.

```typescript
import { createApp } from 'wevu'

const app = createApp({ data: () => ({}) })
app.use((runtime) => {
  runtime.config.globalProperties.$log = (...args: any[]) => console.log(...args)
})
```

--------------------------------

### Basic Component Definition with Setup

Source: https://vite.icebreaker.top/wevu/vue3-compat

A basic Wevu component using the setup function, demonstrating reactive state, computed properties, lifecycle hooks, and event emission.

```typescript
import { computed, defineComponent, onMounted, ref } from 'wevu'

defineComponent({
  data: () => ({ count: 0 }),

  setup(props, { emit }) {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)

    onMounted(() => {
      console.log('组件已挂载')
    })

    function increment() {
      count.value++
      emit('update', count.value)
    }

    return { count, doubled, increment }
  },
})
```

--------------------------------

### Page Directory Organization Example

Source: https://vite.icebreaker.top/handbook/project-structure

An example of how to organize files within a specific page directory, keeping related components and logic close to the page itself for better maintainability.

```txt
pages/order-detail/
    ├─ index.vue
    ├─ components/
    │  └─ goods-item.vue
    └─ useOrderDetail.ts
```

--------------------------------

### Migrate `this` context to `ctx/instance` in Vue SFC setup

Source: https://vite.icebreaker.top/wevu/migration/from-native-to-vue-sfc

Use `setup(props, { emit, instance })` in Wevu. Prefer `emit` for business logic and reactive state. Use `instance` for native capabilities when necessary. Avoid exposing `instance` to templates or external modules.

```typescript
import { defineComponent, ref } from 'wevu'

export default defineComponent({
  setup(_, { emit, instance }) {
    const count = ref(0)

    function onTap() {
      count.value += 1
      emit('change', count.value)
    }

    function queryRect() {
      return instance
        .createSelectorQuery()
        .select('.card')
        .boundingClientRect()
        .exec()
    }

    function patchPayload(payload: Record<string, any>) {
      return instance.setData(payload)
    }

    return { count, onTap, queryRect, patchPayload }
  },
})
```

--------------------------------

### Setup Context in Wevu

Source: https://vite.icebreaker.top/wevu/vue3-compat

Illustrates the enhanced setup context provided by Wevu, which includes Vue 3's emit, expose, and attrs, plus小程序-specific fields like runtime and state.

```typescript
defineComponent({
  setup(props, { emit, expose, attrs }) {
    // Vue 3 风格：props 作为第一个参数（当组件定义了 properties 时）
    // 额外的 context 字段：
    // - props: 组件 properties（来自小程序）
    // - emit: 通过小程序 triggerEvent(eventName, detail?, options?) 派发事件
    // - expose: 暴露公共方法（必定存在）
    // - attrs: attrs（必定存在；小程序场景为空对象）
    // - runtime: wevu 运行时实例
    // - state: 响应式状态
    // - proxy: 公开实例代理
    // - bindModel: 双向绑定辅助方法
    // - watch: watch 辅助方法
    // - instance: 小程序内部实例
  },
})
```

--------------------------------

### Installweapp-ide-cli

Source: https://vite.icebreaker.top/packages/weapp-ide-cli

Install theweapp-ide-cli globally using pnpm or npm. 'weapp' and 'weapp-ide-cli' are equivalent entry points.

```bash
pnpm add -g weapp-ide-cli
# 或 npm install -g weapp-ide-cli
```

--------------------------------

### Initialize Project Configuration

Source: https://vite.icebreaker.top/guide/cli

Initialize the project configuration using the `init` command.

```bash
wv init
```

--------------------------------

### Wevu Bidirectional Binding Usage Example

Source: https://vite.icebreaker.top/wevu/vue3-vs-wevu

Example of setting up and using Wevu's bindModel in a component's setup function.

```typescript
// 组件 setup
import { bindModel, ref } from 'wevu'

export default {
  setup() {
    const username = ref('')

    // 创建 model 绑定
    const usernameModel = bindModel(this, 'username')

    // 生成小程序事件绑定
    const inputBinding = usernameModel.model({
      event: 'input',
      valueProp: 'value'
    })
    // → { value: 'Bob', onInput: fn }

    return {
      username,
      inputBinding
    }
  }
}
```

--------------------------------

### Define Component with Callback Prop in Wevu

Source: https://vite.icebreaker.top/wevu/component

Example of defining a component with a callback prop using the setup function. The callback is returned from setup and can be used in the template.

```typescript
defineComponent({
  props: {
    callback: Function,
  },
  setup() {
    function callback(value: string) {
      console.log(value)
    }

    return { callback }
  },
})
```

--------------------------------

### Quick Start: Runtime Screenshot withweapp-ide-cli

Source: https://vite.icebreaker.top/packages/weapp-ide-cli

Capture a runtime screenshot of a specific page within a project. Ensure the output path is correctly specified.

```bash
weapp screenshot --project ./dist/build/mp-weixin --page pages/index/index --output .tmp/index.png --json
```

--------------------------------

### Get Setup Context and Native Instance

Source: https://vite.icebreaker.top/wevu/api/setup-context

Demonstrates obtaining the current setup context and native instance within a Vue component. Useful for emitting events, triggering native events, and binding component models. Supports both TypeScript and JavaScript.

```vue
<script setup lang="ts">
import { getCurrentSetupContext, provide, ref, useBindModel, useNativeInstance } from 'wevu'

const visible = ref(false)
const model = useBindModel({
  prop: 'modelValue',
  event: 'update:modelValue',
})

provide('featureFlag', 'ctx-instance-demo')

function open() {
  const ctx = getCurrentSetupContext()
  const instance = useNativeInstance()
  visible.value = true
  model.setValue?.(true)
  ctx?.emit('open', { ok: true })
  instance.triggerEvent?.('opened', { ts: Date.now() })
}
</script>

<template>
  <view id="target" @tap="open">
    open: {{ visible }}
  </view>
</template>
```

```vue
<script setup>
import { getCurrentSetupContext, provide, ref, useBindModel, useNativeInstance } from 'wevu'

const visible = ref(false)
const model = useBindModel({
  prop: 'modelValue',
  event: 'update:modelValue',
})

provide('featureFlag', 'ctx-instance-demo')

function open() {
  const ctx = getCurrentSetupContext()
  const instance = useNativeInstance()
  visible.value = true
  model.setValue?.(true)
  ctx?.emit('open', { ok: true })
  instance.triggerEvent?.('opened', { ts: Date.now() })
}
</script>

<template>
  <view id="target" @tap="open">
    open: {{ visible }}
  </view>
</template>
```

--------------------------------

### Init Command

Source: https://vite.icebreaker.top/guide/cli

Initializes project configuration.

```APIDOC
## `init`

Initializes project configuration.

### Usage
```bash
wv init
```
```

--------------------------------

### Define Component JSON Configuration

Source: https://vite.icebreaker.top/wevu/vue-sfc/config

Use defineComponentJson in a Vue SFC's <script setup> to configure component.json at build time. This example sets style isolation and options.

```vue
<script setup lang="ts">
defineComponentJson(() => ({
  styleIsolation: 'isolated',
  options: { virtualHost: true },
  externalClasses: ['macro-card-class'],
}))
</script>
```

--------------------------------

### Vue SFC Page Migration Example (After)

Source: https://vite.icebreaker.top/wevu/migration/from-native-to-vue-sfc

The equivalent of the native page, migrated to a Vue SFC using Wevu. It utilizes `<script setup>`, `ref`, and Wevu's `onLoad` hook for lifecycle management.

```vue
<script setup lang="ts">
import { onLoad, ref } from 'wevu'
import { fetchGoodsList } from '../../../services/good/fetchGoods'

definePageJson(() => ({
  navigationBarTitleText: '活动商品',
  usingComponents: {
    'goods-list': '/components/goods-list/index',
  },
}))

const goods = ref<any[]>([])
const couponId = ref<number>(0)

onLoad(async (query) => {
  couponId.value = Number(query?.id ?? 0)
  await getGoodsList(couponId.value)
})

async function getGoodsList(id: number) {
  const list = await fetchGoodsList(id)
  goods.value = Array.isArray(list) ? list : []
}
</script>

<template>
  <goods-list :goods-list="goods" />
</template>
```

--------------------------------

### Quick Start: Open Project withweapp-ide-cli

Source: https://vite.icebreaker.top/packages/weapp-ide-cli

Use the 'weapp open' command to open the current directory project or a specified project in the WeChat IDE.

```bash
# 打开当前目录项目
weapp open -p

# 打开指定项目
weapp open --project ./dist/build/mp-weixin
```

--------------------------------

### Install Project Dependencies

Source: https://vite.icebreaker.top/guide

Install project dependencies using various package managers.

```sh
pnpm i
```

```sh
yarn
```

```sh
npm i
```

```sh
bun i
```

--------------------------------

### Start Development Server

Source: https://vite.icebreaker.top/guide

Run the development server and optionally open the WeChat DevTools.

```sh
pnpm dev
pnpm dev --open # 已开启服务端口时自动打开微信开发者工具
```

```sh
yarn dev --open # 已开启服务端口时自动打开微信开发者工具
```

```sh
npm run dev -- --open # 已开启服务端口时自动打开微信开发者工具
```

```sh
bun dev --open # 已开启服务端口时自动打开微信开发者工具
```

--------------------------------

### Install rolldown-require

Source: https://vite.icebreaker.top/packages/rolldown-require

Install rolldown-require and its peer dependency rolldown using pnpm, npm, yarn, or bun.

```sh
pnpm add rolldown-require rolldown -D
    # or npm / yarn / bun
```

--------------------------------

### Install Weapp-vite and Vite Dependencies

Source: https://vite.icebreaker.top/guide/manual-integration

Install Weapp-vite, Vite, TypeScript, and Node types as development dependencies. Use pnpm, npm, yarn, or bun. Consider installing additional packages like Tailwind CSS, Less, or Vue Runtime if needed.

```sh
pnpm add -D weapp-vite vite typescript @types/node sass
```

--------------------------------

### Component Configuration with JSON

Source: https://vite.icebreaker.top/guide/json-enhance

This example shows a basic component configuration using a standard JSON file. It's the simplest form and serves as a baseline for comparison with script-driven approaches.

```json
{
  "usingComponents": {
    "custom-button": "../components/custom-button/index"
  },
  "navigationBarTitleText": "Index"
}
```

--------------------------------

### IDE Logs Examples

Source: https://vite.icebreaker.top/guide/cli

Illustrates different ways to use the `ide logs` command, including opening the IDE simultaneously and specifying the output directory and platform.

```bash
wv ide logs
wv ide logs --open
wv ide logs ./dist/dev -p weapp
```

--------------------------------

### Install wevu/fetch

Source: https://vite.icebreaker.top/wevu/fetch

Install wevu/fetch as a dev dependency in a Weapp-vite project. For other build scenarios, adjust dependency placement as needed.

```sh
pnpm add -D wevu
```

--------------------------------

### Component Configuration with JSONC

Source: https://vite.icebreaker.top/guide/json-enhance

This example demonstrates using JSONC (JSON with Comments) for component configuration. It allows for comments, which can improve readability and explain specific configuration choices.

```jsonc
{
  // Using components
  "usingComponents": {
    "custom-button": "../components/custom-button/index"
  },
  "navigationBarTitleText": "Index"
}
```

--------------------------------

### Install AI Skills Manually

Source: https://vite.icebreaker.top/packages/create-weapp-vite

If you skipped the AI skills installation during project creation, you can add them manually using this command.

```bash
npx skills add sonofmagic/skills
```

--------------------------------

### Prepare Vite Configuration Files

Source: https://vite.icebreaker.top/guide/cli

Prepares the necessary configuration files for Vite, specifically for `.weapp-vite` support.

```bash
wv prepare
```