VueVite启动器

vite-vue-js-starter-template — Vue 启动器模板

作者 ElanYoung

基于 Vite 6、Vue 3 与 JavaScript 的前端启动模板，集成 Vue Router、Pinia、TDesign、Less、Axios，并配置 ESLint、Stylelint、Prettier、Husky 等代码规范工具。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

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

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

使用 Vite 6 作为构建工具，搭配 Vue 3 与 JavaScript

02

集成 Vue Router 与 Pinia，分别处理路由与状态管理

03

引入 TDesign 组件库与 Less 样式预处理

04

通过 unplugin-auto-import 与 unplugin-icons 实现 API 自动导入和图标按需安装

05

内置 ESLint、Prettier、Stylelint、Husky、Lint-Staged、Commitizen、Commitlint 等代码与提交规范工具

06

提供 GitHub Template 与本地克隆两种使用方式，并附使用检查清单

模板详细介绍

这是一个面向 Vue 3 与 JavaScript 项目的前端启动模板，使用 Vite 作为构建工具。模板内置 Vue Router 用于路由管理、Pinia 用于状态管理、TDesign 作为 UI 组件库、Less 作为 CSS 预处理语言、Axios 用于 HTTP 请求。同时提供 API 自动导入与图标按需自动安装的插件配置。

在工程规范方面，模板集成了 EditorConfig、ESLint、Prettier、Stylelint，并通过 Husky 与 Lint-Staged 管理 Git 钩子，使用 Commitizen 与 Commitlint 约束提交信息。开发工具推荐使用 pnpm 包管理器与 VS Code 插件（Vite、Volar、EditorConfig、ESLint、Prettier、StyleLint）。

README 中提供了一份使用清单，提示使用者在使用模板后修改 LICENSE 中的作者名、App.vue 中的标题、vite.config.js 中的 hostname、public 中的 favicon，并移除包含资助信息的 .github 文件夹、清理 README 与路由。模板要求 Node 版本不低于 18，开发时运行 npm run dev 并访问 http://localhost:3000，构建使用 npm run build。

VueVite启动器

适合你的项目吗？

适用场景

  • 需要快速搭建 Vue 3 + JavaScript 前端项目基础结构
  • 希望项目默认带有路由、状态管理、UI 组件库与 HTTP 请求封装
  • 需要在项目初期就引入 ESLint、Prettier、Stylelint 等代码规范与 Git 提交约束
  • 希望通过 GitHub Template 功能创建新仓库并保留干净的 Git 历史

适合人群

  • 使用 Vue 3 与 JavaScript 开发前端项目的开发者
  • 偏好 Vite 构建工具并需要开箱即用配置的团队
  • 希望统一代码风格与提交规范的多人协作项目
  • 需要以模板为基础快速启动新项目原型或内部工具

上手与定制指南

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

  1. 1

    需要 Node.js 版本不低于 18。

  2. 2

    推荐使用 pnpm 作为包管理器，也可使用 npm 安装依赖。

  3. 3

    开发时运行 npm run dev 并访问 http://localhost:3000，构建使用 npm run build。

  4. 4

    使用模板后需按 README 检查清单修改 LICENSE 作者名、App.vue 标题、vite.config.js 中的 hostname、public 中的 favicon，并移除 .github 文件夹、清理 README 与路由。

  5. 5

    Windows 用户建议先执行 git config --global core.autocrlf input 关闭换行符转换。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 使用模板后需修改 LICENSE 中的作者名，即保留原版权声明的同时替换为使用者自己的署名。
  • 使用模板后应移除包含资助信息的 .github 文件夹。
  • 运行该模板要求 Node.js 版本不低于 18。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Change the author name in `LICENSE`

README 原文

Remove the `.github` folder which contains the funding info

README 原文

Vite5 Vue3 JavaScript Starter Template requires Node >= 18.00

README 原文
https://github.com/ElanYoung/vite-vue-js-starter-template/blob/master/LICENSEhttps://github.com/ElanYoung/vite-vue-js-starter-template/blob/master/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

记录的仓库更新时间
2025-05-28
截图检查日期
2026-10-02

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 1a26e3044c87c8143717df1be2573ca1fdc552b51142fd7e21864a68dfa0287f

2026-10-02T11:39:29.380Z

来源文件 / 仓库
<h1 align="center"><a href="https://github.com/ElanYoung/vite-vue-js-starter-template" target="_blank">Vite 6 🚀 - Vue 3  Starter Template</a></h1>

<p align="center">
  <a href="https://nodejs.org/en/about/releases/">
    <img src="https://img.shields.io/node/v/vite.svg" alt="node compatility" />
  </a>
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-3.5.15-brightgreen.svg" alt="vue" />
  </a>
  <a href="https://cn.vitejs.dev" rel="nofollow">
    <img src="https://img.shields.io/badge/vite-6.3.5-3963bc.svg" alt="vite" style="max-width:100%;" />
  </a>
  <a href="https://github.com/vuejs/router">
    <img src="https://img.shields.io/badge/vue--router-4.5.1-brightgreen.svg" alt="vue-router" />
  </a>
  <a href="https://github.com/vuejs/pinia">
    <img src="https://img.shields.io/badge/pinia-3.0.2-brightgreen.svg" alt="pinia" />
  </a>
  <a href="https://doc.starimmortal.com">
    <img alt="author" src="https://img.shields.io/badge/author-ElanYoung-blue.svg" />
  </a>
  <a href="https://github.com/ElanYoung/vite-vue-js-starter-template/blob/master/LICENSE">
    <img alt="LICENSE" src="https://img.shields.io/github/license/ElanYoung/vite-vue-js-starter-template.svg" />
  </a>
</p>

<p align='center'>
  <b>Vite6</b> + <b>Vue3</b> + <b>JavaScript</b> + <b>Vue Router</b> + <b>Pinia</b> + <b>TDesign</b> + <b>Less</b> + <b>Axios</b> + <b>ESLint + Stylelint + Prettier</b>
</p>

<p align='center'>
  <a href="https://elanyoung.github.io/vite-vue-js-starter-template">Live Demo</a>
</p>

<p align="center">
  <span>English | <a href="./README.zh-CN.md">简体中文</a></span>
</p>

## Features

+ ⚡️ [Vite 6](https://github.com/vitejs/vite) - born with fastness
+ 🖖 [Vue 3](https://github.com/vuejs/core) - Composition API and `<script setup>`
+ 🚦 [Vue Router](https://github.com/vuejs/router) - The official router for Vue.js.
+ 📦 [Pinia](https://github.com/vuejs/pinia) - Intuitive, type safe and flexible Store for Vue
+ 💻 [TDesign](https://github.com/Tencent/tdesign-vue-next) - Vue Next for Web
+ 🎨 [Less](https://github.com/less/less.js) - It's CSS, with just a little more
+ 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - Use Composition API and others directly
+ 😃 [Icons auto install](https://github.com/unplugin/unplugin-icons) - Access thousands of icons as components on-demand universally.
+ 🔗 [Axios](https://github.com/axios/axios) - Promise based HTTP client for the browser and node.js
+ 🧰 [Husky](https://typicode.github.io/husky/#/) + [Lint-Staged](https://github.com/okonet/lint-staged) - Git Hook Tools
+ 🛡️ [EditorConfig](http://editorconfig.org) + [ESLint](http://eslint.org) + [Prettier](https://prettier.io) + [Stylelint](https://stylelint.io) - Code Standards
+ 🔨 [Commitizen](https://cz-git.qbb.sh/zh) + [Commitlint](https://commitlint.js.org) - Submit Standards

## Coding Style

+ Use Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227)
+ [ESLint](https://eslint.org)
+ [Prettier](https://prettier.io)
+ [Stylelint](https://stylelint.io)

## Development Tools

+ [pnpm](https://pnpm.io/) - fast, disk space efficient package manager
+ [Visual Stuido Code Extensions](./.vscode/extensions.json)
  + [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - Fire up Vite server automatically
  + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 3 `<script setup>` IDE support
  + [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - A solution for unifying code formats
  + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Find and fix problems in your JavaScript code
  + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - An opinionated code formatter
  + [StyleLint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

## Try it now!

> Vite5 Vue3 JavaScript Starter Template requires Node >= 18.00

### GitHub Template

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

### Clone to local

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

```bash
# [optional] if you are using Windows, you need to close the end-of-line conversion
git config --global core.autocrlf input

# clone repository
git clone https://github.com/ElanYoung/vite-vue-js-starter-template

# open folder vite-vue-js-starter-template
cd vite-vue-js-starter-template

# install packages
npm i
```

## Checklist

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

- [ ] Change the author name in `LICENSE`
- [ ] Change the title in `App.vue`
- [ ] Change the hostname in `vite.config.js`
- [ ] Change the favicon in `public`
- [ ] Remove the `.github` folder which contains the funding info
- [ ] Clean up the READMEs and remove routes

## Usage

### Development

> Just run and visit http://localhost:3000

```bash
## install dependencies
npm install

## set up
npm run dev
```

### Build

```bash
## build
npm run build
```

## Achievement

🎉 Added to the [Awesome Vite.Js](https://github.com/vitejs/awesome-vite#vue-3)

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2022 ElanYoung
反馈内容错误

看看同类模板

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

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