AstroViteHTML企业官网启动器

astro-vanilla-ts — Astro 企业官网模板

作者 doinel1a

基于 Astro 与 TypeScript 的前端启动模板,预配置 TailwindCSS、SASS、ESLint、Prettier、Husky、Commitlint 与 Playwright,用于快速搭建网站、单页应用或落地页。

看看你的网站会是什么样

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

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

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

以 Astro 为核心,配合 TypeScript 与 Vite 构建

02

内置 TailwindCSS,并支持 SASS 与 SCSS

03

集成 ESLint、Prettier、Husky 与 Commitlint 等代码规范工具

04

包含 Playwright 测试相关依赖

05

通过 .browserslistrc 配置浏览器兼容范围,默认覆盖 last 3 versions、> 0.2%、not dead

06

提供 npm、pnpm、yarn 三种包管理器的命令写法

模板详细介绍

这是一个面向前端开发者的开发启动模板,仓库定位是省去每次新项目从零配置开发环境的步骤。技术栈以 Astro 为核心,配合 TypeScript 与 Vite,样式层提供 TailwindCSS 以及 SASS/SCSS 支持,工程化方面内置 ESLint、Prettier、Husky、Commitlint 和 Playwright。模板同时被归类为企业官网与启动器,可用于网站、SPA 或落地页的初始骨架。

使用方式上,README 提供两种获取途径:在 GitHub 点击 Use this template 或 Fork,也可通过 git clone 克隆到本地并重命名项目目录。依赖安装与脚本命令同时给出 npm、pnpm、yarn 三套写法,涵盖 install、dev、build、preview 四类操作。运行前需要 Node.js 运行时,pnpm 与 yarn 属于可选的替代包管理器。

浏览器兼容由 .browserslistrc 控制,默认配置为 last 3 versions、> 0.2%、not dead,README 称其覆盖约 92.3% 的浏览器,并提示支持版本越多,JS 与 CSS 打包体积越大。贡献流程要求提交遵循 conventional commit 格式,并需先阅读行为准则文档。代码采用 MIT 许可,但 README 明确说明所有徽标与商标归各自所有者,演示中涉及的第三方素材需单独核对许可。

AstroViteHTML企业官网启动器

适合你的项目吗?

适用场景

  • 需要快速开始一个新的 Astro 网站或落地页项目
  • 搭建单页应用(SPA)的前端骨架
  • 为企业官网类项目准备带代码规范与测试工具的初始工程
  • 希望复用统一的 ESLint、Prettier、Husky、Commitlint 配置

适合人群

  • 熟悉 Node.js 与前端构建工具的前端开发者
  • 计划使用 Astro 与 TypeScript 开展新项目的团队
  • 需要在项目初期就引入代码检查与提交规范约束的开发者

上手与定制指南

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

  1. 1

    需要预先安装 Node.js 运行时,pnpm 与 yarn 为可选替代包管理器

  2. 2

    可通过 GitHub 的 Use this template 或 Fork 获取,也可用 git clone 克隆后重命名目录

  3. 3

    安装依赖与启动命令按所选包管理器执行,如 npm install、npm run dev、npm run build、npm run preview

  4. 4

    浏览器兼容范围在 ./.browserslistrc 中调整,扩大支持范围会增加 JS 与 CSS 打包体积

  5. 5

    提交需遵循 conventional commit 格式,参与贡献前应阅读仓库的行为准则文档

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • README 明确说明所有徽标与商标归各自所有者所有,不属于 MIT 许可范围,商用或再分发时需自行确认这些第三方标识的使用授权。
  • 除徽标与商标外的代码以 MIT 许可发布,可自由使用、修改、分发,但须保留原始版权声明与许可声明。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

All logos and trademarks are the property of their respective owners.

README 原文

Everything else is distributed under the **MIT License** .

README 原文
https://github.com/doinel1a/astro-vanilla-ts/blob/main/LICENSEhttps://github.com/doinel1a/astro-vanilla-ts/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 8e1e999c9d88f115cafce2ae9b7d05aa56a0bee342b34f5d124a0e12a8f9daff

2026-10-01T01:54:21.406Z

来源文件 / 仓库
[node]: https://nodejs.org/en
[pnpm]: https://pnpm.io/installation
[yarn]: https://yarnpkg.com/getting-started/install
[demo]: https://astro-vanilla-ts.d1a.app
[license]: https://github.com/doinel1a/astro-vanilla-ts/blob/main/LICENSE
[code-of-conduct]: https://github.com/doinel1a/astro-vanilla-ts/blob/main/CODE_OF_CONDUCT.md
[issues]: https://github.com/doinel1a/astro-vanilla-ts/issues
[pulls]: https://github.com/doinel1a/astro-vanilla-ts/pulls
[browserslist]: https://browsersl.ist/#q=last+3+versions%2C%3E+0.2%25%2C+not+dead
[graphviz]: https://www.graphviz.org/download
[commitlint]: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
[react-icon]: https://skillicons.dev/icons?i=react
[ts-icon]: https://skillicons.dev/icons?i=ts
[js-icon]: https://skillicons.dev/icons?i=js
[tailwind-icon]: https://skillicons.dev/icons?i=tailwind
[chrome-icon]: https://github.com/alrra/browser-logos/blob/main/src/chrome/chrome_64x64.png
[firefox-icon]: https://github.com/alrra/browser-logos/blob/main/src/firefox/firefox_64x64.png
[edge-icon]: https://github.com/alrra/browser-logos/blob/main/src/edge/edge_64x64.png
[opera-icon]: https://github.com/alrra/browser-logos/blob/main/src/opera/opera_64x64.png
[safari-icon]: https://github.com/alrra/browser-logos/blob/main/src/safari/safari_64x64.png

# Astro Vanilla TypeScript — Template

This development starter template is the ultimate solution to help you getting started on your project in no time, without the hassle of setting up and configuring your development environment from scratch each time you start working.
This repository is ideal for front-end developers who want to build modern, fast and reliable web applications with the latest cutting edge technologies such as **Astro**, **TypeScript**, **TailwindCSS**, **ESLint**, **Prettier**, **Husky** and much more!

---

**[Demo][demo]**   **|**   **[Bug (label: bug)][issues]**   **|**   **[Feature (label: enhancement)][issues]**

---

## :bookmark: Table of contents

- :computer: [Getting started](#computer-getting-started "Go to 'Getting started' section")
- :battery: [Features](#battery-features "Go to 'Features' section")
- :globe_with_meridians: [Browsers support](#globe_with_meridians-browsers-support "Go to 'Browsers support' section")
- :busts_in_silhouette: [Contribute](#busts_in_silhouette-contribute "Go to 'Contribute' section")
- :bookmark_tabs: [License](#bookmark_tabs-license "Go to 'License' section")
- :gem: [Acknowledgements](#gem-acknowledgements "Go to 'Acknowledgements' section")

---

## :computer: Getting started

### Prerequisites:

- JavaScript runtime **[node.js][node]**;
- **(OPTIONAL)** Alternative package manager:
  - **[pnpm][pnpm]** <br /> or
  - **[yarn][yarn]**

### Start developing:

- Get the repository:
  - click **"Use this template"** &nbsp; or &nbsp; **"Fork"** button <br /> alternately
  - **clone** the repository through your terminal: <br />
    ```bash
    git clone https://github.com/doinel1a/astro-vanilla-ts YOUR-PROJECT-NAME
    ```
- Open your terminal or code editor to the path your project is located, and run:

  |                                                  | **npm**           | **pnpm**       | **yarn**       |
  | ------------------------------------------------ | ----------------- | -------------- | -------------- |
  | To **install** the dependencies                  | `npm install`     | `pnpm install` | `yarn install` |
  | To **run** the **development server**            | `npm run dev`     | `pnpm dev`     | `yarn dev`     |
  | To **build** your app **for production**         | `npm run build`   | `pnpm build`   | `yarn build`   |
  | To **preview** your **production optimized app** | `npm run preview` | `pnpm preview` | `yarn preview` |

[Back to :arrow_up:](#astro-vanilla-typescript--template "Back to 'Table of contents' section")

---

## :battery: Features

This repository comes 🔋 packed with:

- **Astro**;
- **TypeScript**;
- **TailwindCSS**;
- **SASS** & **SCSS**;
- **ESLint**;
- **Prettier**;
- **Husky**;
- **Commitlint**;
- **Playwright**;

[Back to :arrow_up:](#astro-vanilla-typescript--template "Back to 'Table of contents' section")

---

## :globe_with_meridians: Browsers support

The provided configuration ensures **92.3%** coverage for all browsers, in particular of the following:

|            Chrome             |             Firefox              |             Edge             |        Opera         | Safari                       |
| :---------------------------: | :------------------------------: | :--------------------------: | :------------------: | ---------------------------- |
| ![Google Chrome][chrome-icon] | ![Mozilla Firefox][firefox-icon] | ![Microsoft Edge][edge-icon] | ![Opera][opera-icon] | ![Apple Safari][safari-icon] |

**\*** In order to support a wider percentage of browsers, update the `./.browserslistrc` configuration file:

1. `last 3 versions`: browser version;
2. `> 0.2%`: browser usage statistics;
3. `not dead`: whether the browser is officially supported;

Update the configuration [here][browserslist] and check in real-time the **global browsers support**.

**\* The more versions to support, larger JS and CSS bundles size will be.**

[Back to :arrow_up:](#astro-vanilla-typescript--template "Back to 'Table of contents' section")

---

## :busts_in_silhouette: Contribute

Contributions are what make the open source community such an amazing place to learn, inspire, and create.  
Any contribution is greatly appreciated: big or small, it can be documentation updates, adding new features or something bigger.  
Please check the [**contributing guide**][code-of-conduct] for details on how to help out and keep in mind that all commits must follow the **[conventional commit format][commitlint]**.

### How to contribute:

1.  **[Get started](#computer-getting-started "Go to 'Getting started' section");**
2.  **For a new feature:**
    1.  Create a new branch: `git checkout -b feat/NEW-FEATURE`;
    2.  Add your changes to the staging area: `git add PATH/TO/FILENAME.EXTENSION`;
    3.  Commit your changes: `git commit -m "feat: NEW FEATURE"`;
    4.  Push your new branch: `git push origin feat/NEW-FEATURE`;
3.  **For a bug fix:**
    1.  Create a new branch: `git checkout -b fix/BUG-FIX`;
    2.  Add your changes to the staging area: `git add PATH/TO/FILENAME.EXTENSION`;
    3.  Commit your changes: `git commit -m "fix: BUG FIX"`;
    4.  Push your new branch: `git push origin fix/BUG-FIX`;
4.  **Open a new [pull request][pulls];**

[Back to :arrow_up:](#astro-vanilla-typescript--template "Back to 'Table of contents' section")

---

## :bookmark_tabs: License

All logos and trademarks are the property of their respective owners.  
Everything else is distributed under the **MIT License** .  
See the [LICENSE][license] file for more informations.

[Back to :arrow_up:](#astro-vanilla-typescript--template "Back to 'Table of contents' section")

---

## :gem: Acknowledgements

Special thanks to:

- [alrra](https://github.com/alrra) for [browser-logos](https://github.com/alrra/browser-logos);
- [tandpfun](https://github.com/tandpfun) for [skill-icons](https://github.com/tandpfun/skill-icons);

[Back to :arrow_up:](#astro-vanilla-typescript--template "Back to 'Table of contents' section")
反馈内容错误

看看同类模板

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