### Install Project Dependencies

Source: https://github.com/uni-helper/vitesse-uni-app-docs/blob/main/getting-started/installation.md

Install the necessary project dependencies using your preferred package manager (pnpm, yarn, npm, or bun). This step ensures all required libraries are downloaded and configured.

```bash
pnpm install
```

```bash
npx rimraf pnpm-lock.yaml
yarn install
```

```bash
npx rimraf pnpm-lock.yaml
npm install
```

```bash
npx rimraf pnpm-lock.yaml
bun install
```

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

### Start Development Server (H5 Mode)

Source: https://github.com/uni-helper/vitesse-uni-app-docs/blob/main/getting-started/installation.md

Launch the development server for the H5 platform. This command allows you to preview your application in a web browser during development.

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
npm dev
```

```bash
bun dev
```

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

### Create Uni-App Project with Vitesse Template

Source: https://github.com/uni-helper/vitesse-uni-app-docs/blob/main/getting-started/installation.md

Initialize a new Uni-App project using the Vitesse template. Choose from different methods like `pnpm create`, `degit`, or `giget` to clone the template and set up your project structure.

```bash
pnpm create uni <project-name> -t vitesse
```

```bash
pnpx degit uni-helper/vitesse-uni-app <project-name>
```

```bash
pnpx giget gh:uni-helper/vitesse-uni-app <project-name>
```

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

### Start Cross-Platform Development Server

Source: https://github.com/uni-helper/vitesse-uni-app-docs/blob/main/getting-started/installation.md

Initiate the development server for specific target platforms (e.g., iOS, Android, WeChat MiniProgram) by appending the platform identifier to the `dev` command.

```bash
pnpm dev:<platform>
```

```bash
yarn dev:<platform>
```

```bash
npm dev:<platform>
```

```bash
bun dev:<platform>
```

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

### Open Project Folder in VS Code

Source: https://github.com/uni-helper/vitesse-uni-app-docs/blob/main/getting-started/installation.md

After creating your project, use this command to open the project directory in Visual Studio Code for development.

```bash
code <project-name>
```

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

### Vue Pages Convention-based Routing Example

Source: https://github.com/uni-helper/vitesse-uni-app-docs/blob/main/getting-started/views.md

演示了如何通过 `@uni-helper/vite-plugin-uni-pages` 插件实现约定式路由。`src/pages` 目录下的每个 `.vue` 文件都自动映射为一个路由，简化了页面创建和路由配置过程。

```vue
<template>
  <div>
    <h1>欢迎使用 vitess-uni-app </h1>
    <AppAlert>
      这个组件会自动导入
    </AppAlert>
  </div>
</template>
```

```vue
<template>
  <section>
    <p>通过 `/pages/about` 来访问这个页面</p>
  </section>
</template>
```

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

### Vue Components Auto-Registration Example

Source: https://github.com/uni-helper/vitesse-uni-app-docs/blob/main/getting-started/views.md

展示了如何利用 `@uni-helper/vite-plugin-uni-components` 插件实现组件的全局自动注册。只需将组件放置在 `src/components` 目录下，即可在任何页面中直接使用，无需显式导入。

```vue
<template>
  <div>
    <h1>欢迎使用 vitess-uni-app </h1>
    <AppAlert>
      这个组件会自动导入
    </AppAlert>
  </div>
</template>
```

```vue
<template>
  <span>
    <slot />
  </span>
</template>
```

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

### Vue Layouts and Custom Layouts Example

Source: https://github.com/uni-helper/vitesse-uni-app-docs/blob/main/getting-started/views.md

展示了如何使用 `@uni-helper/vite-plugin-uni-layouts` 插件来管理页面布局。默认布局定义在 `src/layouts/default.vue`，页面可以通过 `route` 代码块指定自定义布局。

```vue
<template>
  <div>
    <AppHeader />
    <!-- src/pages/index.vue 和 src/pages/about.vue 内容展示 -->
    <slot />
    <AppFooter />
  </div>
</template>
```

```vue
<template>
  <div>
    <h1>欢迎使用 vitess-uni-app </h1>
    <AppAlert>
      这个组件会自动导入
    </AppAlert>
  </div>
</template>
```

```vue
<template>
  <section>
    <p>通过 `/pages/about` 来访问这个页面</p>
  </section>
</template>
```

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

### Vue Page Custom Layout Configuration

Source: https://github.com/uni-helper/vitesse-uni-app-docs/blob/main/getting-started/views.md

演示了如何在页面文件中通过 `<route>` 代码块配置自定义布局。此示例指定了 `index.vue` 页面使用名为 `custom` 的布局。

```json
{
  "layout": "custom"
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.