jokecode/vitecamp

A zero-config Vue3 Starter template includes Vite3、Vue3 and TypeScript

Live Demo

English | 简体中文

Features

• ⚡️ Vue 3, Vite 3, pnpm, ESBuild - fast and faster !
• 💪 Typescript - of course! necessary
• 🎉 Element Plus ready - UI Library based on Vue.js 3
• 🔥 Axios - Http Library based on Promise
• 💡 Vue Router 4 - The official router for Vue.js
• 📦 Components auto importing - Automatically register components on demand without import
• 📥 Auto import APIs - Automatically import APIs
• 🍍 State Management via Pinia - The Vue Store that you will enjoy using
• 🎨 Windi CSS - next generation utility-first CSS framework
• 😃 icones - Powerful Icon Library, Use icons from any icon sets
• 🌍 I18n ready - Want to translate? Yes, you can!
• 👩‍🎨 NProgress - Page loading progress feedback
• 😃 SVG Support - Support the use of SVG images as components
• 📑 Markdown Support - Markdown as components / components in Markdown
• 🔑 Complete code style specification and code submission specification
• ☁️ Deploy on Netlify, zero-config

Pre-packed

UI Frameworks

• Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bunch of additional features
  • Windi CSS Typography
• Element Plus - A powerful Vue.js 3 UI Library

Icons

• 🔍Icônes - use icons from any icon sets
  • unplugin-icons - Automatically introduce the icons you need on demand

Plugins

• Vue Router 4 - The official router for Vue.js
• Pinia - The Vue Store that you will enjoy using
• Axios - Http Library based on Promise
• unplugin-vue-components - components auto import
• unplugin-auto-import - Automatically import APIs
• vite-plugin-windicss - Windi CSS Integration
• vite-plugin-vue-markdown - Markdown as components / components in Markdown
  • markdown-it-prism - Prism for syntax highlighting
  • prism-theme-vars - customizable Prism.js theme using CSS variables
  • markdown-it-link-attributes - Uniformly set the hyperlink jump mode in markdown
• Vue I18n - Internationalization
  • vite-plugin-vue-i18n - Vite plugin for Vue I18n
• vite-plugin-fonts - Vite's font loader
• VueUse - Collection of useful composition APIs
• vite-svg-loader - Support the use of SVG images as components

Coding Style

• ESLint with Airbnb Style

Dev tools

• TypeScript
• Netlify - zero-config deployment
• VS Code Extensions
  • Volar -Vue 3 IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • Windi CSS Intellisense - IDE support for Windi CSS
  • ESLint - Code quality and rule checking
  • Prettier - Code formatter - Focus on code formatting and beautifying code
  • EditorConfig for VS Code - Coding style check

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

git clone https://github.com/nekobc1998923/vitecamp.git my-vitecamp-app
cd my-vitecamp-app
pnpm i

Checklist

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

• Change the author name in LICENSE
• Change the author name in package.json
• Change the title in .env
• Change the favicon in public
• Clean up the README and remove routes

And then , you can enjoy coding fun :)

Usage

Development

Just run and visit http://localhost:8080

pnpm run dev

Build

To build the App, run

pnpm run build

And you will see the generated file in dist that ready to be served.

Thanks

This template has some features inspired by Vitesse ❤