VueVite启动器

vite-ts-tailwind-starter — Vue 启动器模板

作者 Uninen

一个基于 Vite、Vue 3、TypeScript 与 Tailwind CSS 的启动器模板，内置 Pinia、vue-router、自动导入、图标、代码检查与 Vitest/Playwright 测试和 GitHub Actions CI。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-04查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

Vue 3 + Pinia + vue-router 的完整前端结构

02

Tailwind CSS 搭配 typography 插件与 Iconify 图标 class

03

通过 unplugin-auto-import 实现自动导入

04

TypeScript、ESLint、Oxlint、Prettier、EditorConfig 与 VSCode 配置齐备

05

Vitest 组件测试与 Playwright 端到端测试，配合 GitHub Actions CI 与覆盖率报告

06

构建时注入应用版本与构建时间到 store.appMeta

模板详细介绍

该模板由 Uninen 维护，采用 MIT 许可，面向希望以 Vite + Vue 3 + TypeScript + Tailwind CSS 起步的项目。它把常用工程配置集中在一起：Vue 3 搭配 Pinia 状态管理和 vue-router 路由，通过 unplugin-auto-import 实现自动导入，Tailwind CSS 启用官方 typography 插件并支持以 class 形式调用 Iconify 图标。

工具链方面包含 TypeScript、ESLint、Oxlint、Prettier、EditorConfig 以及 VSCode 推荐设置；测试使用 Vitest 做组件测试、Playwright 做端到端测试，并通过 GitHub Actions 运行 CI/CD，在 PR 中提供代码覆盖率报告。项目根目录以 @ 作为别名，store 中可直接访问 router 实例，构建时会把 package.json 版本写入 VITE_APP_VERSION、把构建时间戳写入 VITE_APP_BUILD_EPOCH 并存入 store.appMeta。

模板自带示例组件与文档，重置方式为删除 HelloWorld 组件及其测试、清空 IndexPage.vue 内容、移除 base.css 中的演示样式。它提供的是工程起点，不包含后端、数据库或部署方案；演示图片、字体、图标等第三方素材需按各自许可单独核对。

VueVite启动器

适合你的项目吗？

适用场景

  • 快速搭建 Vue 3 + TypeScript 单页应用原型
  • 需要现成测试与 CI 配置的前端项目起步
  • 希望统一代码检查、格式化与编辑器配置的团队
  • 使用 Tailwind CSS 并需要图标与排版插件的界面开发

适合人群

  • 熟悉 Vue 3 与 TypeScript 的前端开发者
  • 需要开箱即用工程配置的个人或小团队项目
  • 希望以最小改动替换示例内容开始实际开发的使用者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    模板自带示例内容，重置需删除 src/components/HelloWorld.vue 及其测试、清空 @/pages/IndexPage.vue、移除 @/assets/base.css 中的演示样式

  2. 2

    代码采用 MIT 许可，分发时需保留版权与许可声明

  3. 3

    演示图片、字体、图标等第三方素材需按各自许可单独核对

  4. 4

    域名、托管、数据库等外部服务可能产生额外费用

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文
https://github.com/Uninen/vite-ts-tailwind-starter/blob/main/LICENSEhttps://github.com/Uninen/vite-ts-tailwind-starter/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-04。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 96 / 100
技术栈
Vue · Vite
网站类型
启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-10-04
截图检查日期
2026-10-04

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: df01b3d1cd7a0b582fa6e297c35ff1c6a3fa18716dd3ddd9fe617c1a148713a8

2026-10-04T03:49:09.853Z

来源文件 / 仓库
# Vite + Vue 3 + Typescript + Tailwind Starter

Oopinionated, **fully typed**, and **production-ready** project template for Vite.

The goal of this template is to be **practical** and **batteries included** starting point for both quick experiments and projects designed for production quality.

Includes plenty of **examples and documentation** of how to do things but **minimal cruft** to delete to get you going.

Please [check out the homepage](https://vite-ts-tailwind-starter.vercel.app/) for full docs. A [detailed changelog](./CHANGES.md) is available.

## Features

- **Vue 3** with [Pinia](https://pinia.vuejs.org/) store and [vue-router](https://router.vuejs.org/) routing
- **Automatic imports** via [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
- **Tailwind CSS** with the official `typography` plugin, plus **automatic icons** using [Iconify for Tailwind CSS](https://iconify.design/docs/usage/css/tailwind/tailwind4/)
- **Comprehensive tooling** configs for TypeScript, Eslint, Oxlint, Prettier, EditorConfig and recommended settings and configs for VSCode
- **Full testing setup** using Vitest (components) and Playwright (e2e) together with Github Actions for CI/CD including [code coverage reporting](https://github.com/Uninen/vite-ts-tailwind-starter/pull/279#issuecomment-2435516534) in PRs.

### Code Features / Opinions

- Project root aliased as `@` (`import { myUtilsThing } from @/utils/mylib`)
- Router instance available in the store: `this.router.push('/')`
- Any of 100000+ [Iconify icons](https://icon-sets.iconify.design/) available as Tailwind classes: `<span class="iconify mdi--home"></span>`
- Predefined and fully typed global variables:
  - `VITE_APP_VERSION` is read from `package.json` version at build time and stored to the store as `store.appMeta.version`
  - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time and stored to the store as `store.appMeta.buildTime`

### Very Fast (TM) To Reset

1. Delete `src/components/HelloWorld.vue` and `src/components/__tests__/HelloWorld.spec.ts`
2. Delete the content from `@/pages/IndexPage.vue`
3. Delete demo styles from `@/assets/base.css`
4. Profit!11

## Elsewhere

- Follow [@uninen on Twitter](https://twitter.com/uninen) or [unessa.net on Bluesky](https://bsky.app/profile/uninen.net)
- Read my continuously updating learnings from Vite / Vue / TypeScript and other Web development topics from my [Today I Learned site](https://til.unessa.net/)

## Contributing

Contributions are welcome! Please follow the [code of conduct](./CODE_OF_CONDUCT.md) when interacting with others.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

vitesse

vitesse

🏕 Opinionated Vite + Vue Starter Template

Vue · 启动器

vitesse-webext

vitesse-webext

⚡️ WebExtension Vite Starter Template

Vue · 启动器

laravel-vue-spa

laravel-vue-spa

A Laravel-Vue SPA starter kit.

Vue · 启动器

vue3-h5-template

vue3-h5-template

vue3-h5-template 是一个面向移动端 H5 项目的启动模板，基于 Vue3、Vite 和 Vant4 构建，同时集成了 TypeScript、Tailwindcss、Pinia、Vue-router 等常用…

Vue · 启动器

tov-template

tov-template

vite + vue3 + ts 开箱即用现代开发模板 | vite + vue3 + ts out-of-the-box modern development template

Vue · 启动器

shadcn-vue-landing-page

shadcn-vue-landing-page

New design 🎉 Vue + Shadcn-vue + TypeScript + Tailwind. Landing page template ease-to-use

Vue · 企业官网