# vue-uniapp-template

**Repository Path**: youlaiorg/vue-uniapp-template

## Basic Information

- **Project Name**: vue-uniapp-template
- **Description**: 基于 Uni-App、Vue3 和 TypeScript 构建的灵活跨平台移动端模板，使用 VSCode 和 CLI 高效开发模式。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://app.youlai.tech/
- **GVP Project**: No

## Statistics

- **Stars**: 105
- **Forks**: 66
- **Created**: 2024-09-17
- **Last Updated**: 2025-08-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app, Vue, vite, TypeScript

## README

## 项目介绍

基于 uni-app + Vue 3 + TypeScript 移动端跨平台开发模板，集成了 ESLint、Prettier、Stylelint、Husky 和 Commitlint 等工具，确保代码规范与质量。

## 项目截图

![](https://www.youlai.tech/storage/blog/2025/04/30/app.jpg)

## 项目文档

[从0到1构建 UniApp + Vue3 + TypeScript 移动端跨平台开源脚手架](https://juejin.cn/post/7448963032993038376)

## 项目启动

安装依赖

```
pnpm install
```

h5启动

```
pnpm run dev:h5
```

访问 [http://localhost:4096](http://localhost:4096)

## 组件结构

项目组件分为以下几类：

- **基础组件**：`src/components` 下的通用组件
- **业务组件**：`src/components/business` 下的业务相关组件
  - `WechatProfile.vue`: 微信小程序环境下的头像、昵称和性别选择组件

使用业务组件：

```vue
<template>
  <WechatProfile v-model="profileData" @change="onProfileChange" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { WechatProfile } from "@/components/business";

const profileData = ref({
  avatar: "",
  nickname: "",
  gender: 1,
});

const onProfileChange = (data) => {
  console.log("个人资料变更:", data);
};
</script>
```