Vitesse H5

screenshot of Vitesse H5
vite
vue
scss
unocss

A H5 Template(Vite + Vue) inspired by Vitesse.

Overview

The Vitesse-H5 template is designed for mobile web app development and offers several features and tools to enhance the development process. It is built with Vue 3, Vite 3, pnpm, and ESBuild, making it fast and efficient. The template includes features such as file-based routing, automatic component importing, state management via Pinia, a layout system, support for UnoCSS and Iconify for styling and icons, internationalization support, markdown support, and more. It also includes pre-packed UI frameworks and plugins for enhanced functionality. The template supports TypeScript and provides options for unit testing, static site generation, and deployment on Netlify.

Features

  • Vue 3, Vite 3, pnpm, ESBuild - Fast and efficient tools for mobile web app development.
  • File based routing - Easy navigation and organization of pages.
  • Components auto importing - Automatic importing of components for improved development workflow.
  • State Management via Pinia - Intuitive and flexible store management for Vue using the composition API.
  • Layout system - Provides a system for creating layouts for web app interfaces.
  • UnoCSS - An instant on-demand atomic CSS engine for styling.
  • I18n ready - Internationalization support for multi-language apps.
  • Markdown Support - Allows the use of Markdown for content creation.
  • APIs auto importing - Automatic importing of APIs, including the Composition API, for simplified usage.
  • Static-site generation (SSG) via vite-ssg - Generates a static version of the app for improved performance.
  • Critical CSS via critters - Optimizes critical CSS for faster initial page load.
  • TypeScript - Supports TypeScript for type-safe development.
  • Unit Testing with Vitest on GitHub Actions - Enables unit testing with the Vitest framework using GitHub Actions.
  • Deploy on Netlify, zero-config - Allows for easy deployment on Netlify without the need for additional configuration.

Summary

The Vitesse-H5 template is a comprehensive solution for developing mobile web apps with speed and efficiency. It offers a range of features and tools that enhance the development process, including fast tools like Vue 3 and Vite 3, automatic component importing, state management, and a layout system. It also includes support for UnoCSS, Iconify, internationalization, markdown, and more. The template supports TypeScript and offers options for unit testing, static site generation, and deployment on Netlify. With its easy installation process and feature-rich structure, Vitesse-H5 provides a reliable foundation for mobile web app development.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

unocss
UnoCSS

UnoCSS is an instant, on-demand atomic CSS engine that generates utility classes at build time. It's highly customizable, extremely fast, and compatible with Tailwind CSS utilities while offering additional features like attributify mode and pure CSS icons.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.