# uni-vvt

**Repository Path**: wolf6069/uni-vvt

## Basic Information

- **Project Name**: uni-vvt
- **Description**: uni-vvt 项目快速启动模板搭建指南（技术栈：Uniapp + Vue3 + Vite5 + TypeScript + uview-plus）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-10
- **Last Updated**: 2026-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-vvt 项目快速启动模板

新项目想找个基于uniapp+vite5+vue3+ts的纯净模板，各种找资料，也没有找到合适的模板，要么内容涵盖别的组件，我又懒得删；要么是uniapp的版本太低，不支持vite5。于是自己动手，基于uniapp+vite5+ts+vue3开发了一个快速启动模板，希望对大家有所帮助。
**uni-vvt**
uni是指uniapp，vvt是vite、vue3和uniapp的首字母。

**技术栈**：Uniapp + Vite5 + Vue3 + TypeScript + uview-plus

**项目名称**：uni-vvt

**用途**：多端应用（H5、小程序、App）快速开发启动模板，集成核心依赖与基础配置

# 一、环境准备

搭建前需确保本地已安装以下必要工具，版本建议符合要求以避免兼容性问题：

- **Node.js**：推荐 v18 及以上版本（需支持 ESNext 语法）

- **包管理器**：pnpm（推荐，也可使用 npm/yarn，命令对应调整即可）

- **工具**：用于 App 端编译、运行及调试（HBuilderX不是必须工具）


# 二、项目初始化

使用 uni-vvt 模板初始化项目，步骤如下：

```bash

# 1. 从代码仓库拉取到本地
git clone https://gitee.com/wolf6069/uni-vvt.git

# 2. 使用pnpm安装依赖
pnpm install

# 3. 使用vite开发模式运行项目
pnpm dev:h5
```


# 三、项目目录结构设计

采用模块化目录结构，便于团队协作和后期维护，核心目录如下：

```plaintext

uni-vvt/
├── src/                      # 源代码目录
│   ├── api/                  # 接口请求模块（按业务模块划分）
│   ├── components/           # 自定义公共组件（全局/业务组件）
│   ├── pages/                # 页面目录（按路由划分）
│   │   └── index/            # 首页模块（含 vue/ts/scss）
│   ├── static/               # 静态资源（图片、字体、图标等）
│   ├── store/                # 状态管理（Pinia/Vuex）
│   ├── styles/               # 全局样式（变量、重置样式等）
│   ├── types/                # TypeScript 类型定义（全局类型、接口）
│   ├── utils/                # 工具函数（格式化、存储、加密等）
│   ├── App.vue               # 应用入口组件
│   ├── main.ts               # 应用入口文件（初始化 Vue 实例）
│   ├── manifest.json         # Uniapp 项目配置（平台、权限等）
│   └── pages.json            # 路由及页面配置
├── index.html                # Vite 入口 HTML 文件
├── package.json              # 项目依赖及脚本配置
├── tsconfig.json             # TypeScript 编译配置
└── vite.config.ts            # Vite 构建配置
```

# 四、测试页面编写（验证模板可用性）

在首页编写简单测试代码，验证 uview-plus 组件及 TS 语法是否正常工作：

```vue

<template>
  <view class="container">
    <up-toast ref="uToastRef"></up-toast>
	<up-cell-group title-bg-color="rgb(243, 244, 246)">
		<up-cell
			:titleStyle="{fontWeight: 500}"
			:title="item.title"
			v-for="(item, index) in list"
			:key="index"
			isLink
			:icon="item.iconUrl"
			@click="showToast(item)"
		>
		</up-cell>
	</up-cell-group>
	
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';  
// 创建响应式数据  
const show = ref(false);  
const list = ref([  
  	{
		type: 'default',
		title: '默认主题',
		message: "锦瑟无端五十弦",
		iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/default.png'
	},
	{
		type: 'error',
		icon: false,
		title: '失败主题',
		message: "一弦一柱思华年",
		iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/error.png'
	},
	{
		type: 'success',
		title: '成功主题(带图标)',
		message: "庄生晓梦迷蝴蝶",
		iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/success.png'
	},
	{
		type: 'loading',
		title: '正在加载',
		message: "正在加载",
		iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/loading.png'
	},
	{
		type: 'default',
		title: '结束后跳转标签页',
		message: "此情可待成追忆",
		url: '/pages/componentsB/tag/tag',
		iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/jump.png'
	}
]);  
  
// 计算属性  
const getIcon = computed(() => {  
  return path => {  
    return 'https://cdn.uviewui.com/uview/example/' + path + '.png';  
  }  
});  
  
// 方法
const uToastRef = ref(null)
function showToast(params) {  
  uToastRef.value.show({  
    ...params,  
    complete() {  
      params.url && uni.navigateTo({  
        url: params.url  
      });  
    }  
  });  
}  

</script>
<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>
```

# 五、项目运行与调试

根据目标平台执行对应命令，启动开发服务并调试：

|目标平台|运行命令|调试说明|
|---|---|---|
|H5|pnpm dev:h5|启动后访问终端输出的 URL，在浏览器调试|
|微信小程序|pnpm dev:mp-weixin|编译后在微信开发者工具中导入 dist/dev/mp-weixin 目录|
|App（Android/iOS）|-|在 HBuilderX 中打开项目，连接设备后点击"运行"按钮|
|支付宝小程序|pnpm dev:mp-alipay|编译后在支付宝开发者工具中导入对应目录|


# 六、贡献者们

感谢给uni-vvt贡献过代码的开发者。

# 七、版本控制

该项目使用Git进行版本管理。您可以在repository参看当前版本。

# 八、作者



您也可以在贡献者名单中参看所有参与该项目的开发者。

# 九、版权说明
该项目签署了MIT License 授权许可，详情请参阅 LICENSE

# 十、鸣谢
感谢uniapp、uvew-plus等团队，提供各种各样的组件库，让我们能站在巨人的肩膀上，更快的开发项目。