VueVite启动器

starter-vite-vue3 — Vue 启动器模板

作者 starter-collective

基于 Vite 与 Vue 3 的单页应用启动模板，内置文件路由、UnoCSS、Axios、I18n 与 API 自动导入。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

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

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

基于 Vite 与 Vue 3 的 SPA 启动模板，集成 TypeScript、Pinia 与 UnoCSS

02

文件路由与布局系统：src/pages 与 src/layouts 目录自动生成路由和布局

03

组件、API 与 src 目录模块自动导入，网络请求基于 Axios 封装

04

I18n 就绪，locales 目录翻译文件支持自动导入

05

使用 UnoCSS 图标预设，可通过 class 引用任意图标集

06

使用 Vitest 进行单元测试，附带 CI 工作流与 Netlify 零配置部署说明

模板详细介绍

这是一个面向单页应用（SPA）的 Vue 3 启动模板，使用 Vite 作为构建工具，并集成 TypeScript、Pinia 与 UnoCSS。模板提供基于文件的路由与布局系统，页面放在 src/pages、布局放在 src/layouts 即可自动生效；组件、API 与 src 目录下的模块支持自动导入，网络请求基于 Axios 封装。国际化方面，locales 目录下的翻译文件可自动导入，并支持多语言切换。图标通过 UnoCSS 的图标预设以 class 方式使用，可引用不同图标集。测试使用 Vitest，仓库附带 CI 工作流，并给出 Netlify 零配置部署方式，也说明可用其他部署方式。

使用前需要留意：模板要求使用 pnpm 安装依赖，开发服务器默认运行在 9865 端口；从模板创建项目后，README 建议修改 src/locales/*.json 与 .env 中的浏览器标题，并替换 public 下的 favicon 与 logo。仓库采用 MIT 许可，免费范围限于该版本代码本身；演示图片、字体、图标等第三方素材以及域名、托管等外部服务需另行核对或可能产生费用。

VueVite启动器

适合你的项目吗？

适用场景

  • 快速搭建 Vue 3 单页应用的项目骨架
  • 需要文件路由、自动导入与国际化支持的中后台或工具类前端项目
  • 希望以 UnoCSS 原子化样式和图标方案开发界面的项目
  • 需要单元测试与持续集成配置起步的前端工程

适合人群

  • 熟悉 Vue 3 与 Vite 的前端开发者
  • 希望减少路由、导入与国际化配置工作量的团队
  • 使用 pnpm 作为包管理器的项目
  • 需要以 MIT 许可免费使用并自行部署的前端项目

上手与定制指南

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

  1. 1

    通过 GitHub 模板创建仓库或使用 degit 拉取干净副本，然后执行 pnpm i 安装依赖

  2. 2

    开发服务器默认运行在 http://localhost:9865，构建产物输出到 dist 目录

  3. 3

    从模板创建项目后，按 README 清单修改 src/locales/*.json 与 .env 中的浏览器标题，并替换 public 下的 favicon 与 logo

  4. 4

    演示图片、字体、图标等第三方素材需按各自许可核对，域名、托管等外部服务可能另行收费

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 使用该模板需先安装 pnpm 包管理器（可通过 npm install -g pnpm 全局安装），否则无法按 README 说明安装依赖与运行项目。
  • 开发服务器默认运行在 9865 端口，而非常见的 5173 等端口，本地调试时需访问 http://localhost:9865。
  • 从模板创建项目后，需按清单手动修改 src/locales/*.json 与 .env 中的浏览器标题，并替换 public 下的 favicon 与 logo，模板不会自动完成这些定制。
  • README 以 Netlify 作为零配置部署示例，使用该平台需注册 Netlify 账号；域名、托管等外部服务可能产生费用，需自行核对。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

README 原文

Just run and visit http://localhost:9865.

README 原文

Change the browser title in `src/locales/*.json` and `.env`.

README 原文

Deploy on [Netlify](https://app.netlify.com/) with zero-config, supports other deployment methods as well.

README 原文
https://github.com/starter-collective/starter-vite-vue3/blob/main/LICENSEhttps://github.com/starter-collective/starter-vite-vue3/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 909430540dee8aa12e68a520ee343212baf46311575efd4b05685c05b88a10c7

2026-10-04T02:24:57.943Z

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

[![GitHub Release Version](https://img.shields.io/github/v/release/starter-collective/starter-vite-vue3?label=Release&color=%42b883)](https://github.com/starter-collective/starter-vite-vue3/releases)
[![Build Status](https://github.com/starter-collective/starter-vite-vue3/actions/workflows/ci.yml/badge.svg?branch=main&color=%42b883)](https://github.com/starter-collective/starter-vite-vue3/actions/workflows/ci.yml)
[![Netlify Status](https://api.netlify.com/api/v1/badges/6b182d34-7d30-4206-aad9-9789d1c8ed11/deploy-status)](https://app.netlify.com/sites/starter-vite-vue3/deploys)

Vite + Vue 3 SPA Starter Template, supports I18n, UnoCSS, Axios, File Routing and API auto-import.

- [Live Demo](https://starter-vite-vue3.netlify.app/)
- [Play on Stackblitz](https://stackblitz.com/github/starter-collective/starter-vite-vue3)

## Features

- [Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [UnoCSS](https://github.com/antfu/unocss), [Pinia](https://pinia.vuejs.org/), [TypeScript](https://www.typescriptlang.org/) - The latest web develop stack.
- File-based [routing](./src/pages) and [layout](./src/layouts) system, it's automatic.
- [Components](https://github.com/antfu/unplugin-vue-components), [API](https://github.com/antfu/unplugin-auto-import) and `src` directories are auto importing.
- Out-of-the-box network requests, based on [Axios](https://axios-http.com/).
- Use [SVG icons](https://github.com/antfu/unocss/tree/main/packages/preset-icons) from any icon sets with classes.
- [I18n](./locales) ready, and supports automatic import of translated files.
- Unit Testing with [Vitest](https://github.com/vitest-dev/vitest).
- Deploy on [Netlify](https://app.netlify.com/) with zero-config, supports other deployment methods as well.

## Usage

[Create a repo](https://github.com/starter-collective/starter-vite-vue3/generate) from this template on GitHub.

```bash
git clone <git remote url>
```

Install dependencies.

```bash
cd starter-vite-vue3 # Or your project directory

pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
```

Just run and visit http://localhost:9865.

```bash
pnpm dev
```

To build the App, you can run:

```bash
pnpm build
```

You will then see the `dist` folder generated for publishing, which you can preview locally with the following command.

```bash
pnpm preview
```

## Clean Template

If you prefer to do it manually with the cleaner git history:

```bash
npx degit starter-collective/starter-vite-vue3 starter-vite-vue3

cd starter-vite-vue3

pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
```

When you use this template, try follow the checklist to update your info properly:

- [ ] Change the browser title in `src/locales/*.json` and `.env`.
- [ ] Change the favicon and logo icon in `public`.

## License

[MIT License](./LICENSE) © 2024-PRESENT [Kieran Wang](https://github.com/kieranwv/)
反馈内容错误

看看同类模板

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

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 · 企业官网