2020-08-10 02:43:04 +08:00
< h1 align = 'center' > < samp > Vitesse< / samp > < / h1 >
< p align = 'center' >
< samp > Opinionated < a href = "https://github.com/vitejs/vite" > Vite< / a > Starter Template< / samp >
< / p >
< p align = 'center' >
< sup > < em > Mocking up web app with < b > ⚡️ < / b > < / em > < / sup >
< / p >
< br >
< p align = 'center' >
2020-08-10 15:42:19 +08:00
< a href = "https://vitesse.netlify.app/" > Live Demo< / a >
2020-08-10 02:43:04 +08:00
< / p >
< br >
2020-08-12 16:23:04 +08:00
## Features
- ⚡️ Vue3, Vite, pnpm, ESBuild - born with fastness
- 🗂 File based routing
- 🎨 TailwindCSS with dark mode out-of-box
- 😃 Use icons from any icon sets, with no compromise
- 🌍 i18n ready
- 🦾 TypeScript, of course
- ☁️ Deploy on Netlify, zero config
< br >
2020-08-10 02:43:04 +08:00
## Pre-packed
### UI Frameworks
- [Tailwind CSS ](https://tailwindcss.com/ )
- [tailwindcss-dark-mode ](https://github.com/ChanceArthur/tailwindcss-dark-mode )
2020-08-10 19:24:52 +08:00
### Icons
- [Iconify ](https://iconify.design ) - use icons from any icon sets [🔍Icônes ](https://icones.netlify.app/ )
- [PurgeIcons ](https://github.com/antfu/purge-icons ) - bundles only the icons that you use
2020-08-10 02:43:04 +08:00
### Router
- [Vue Router ](https://github.com/vuejs/vue-router )
2020-08-10 13:37:49 +08:00
- [Voie ](https://github.com/vamplate/vite-plugin-voie ) - file system based routing
2020-08-10 02:43:04 +08:00
### Utils
2020-08-12 16:23:04 +08:00
- [vue-i18n ](https://github.com/intlify/vue-i18n-next ) - internationalization
2020-08-10 19:24:52 +08:00
- [VueUse ](https://github.com/antfu/vueuse ) - collection of useful composition APIs
2020-08-10 02:43:04 +08:00
2020-08-12 16:23:04 +08:00
### Coding Style
2020-08-10 02:43:04 +08:00
- Use Composition API with [`<script setup>` SFC ](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md )
2020-08-12 16:23:04 +08:00
- [ESLint ](https://eslint.org/ ) with [@antfu/eslint-config-vue ](https://github.com/antfu/eslint-config ), single colons, no semi.
2020-08-10 02:43:04 +08:00
### Dev tools
2020-08-12 23:46:12 +08:00
- [TypeScript ](https://www.typescriptlang.org/ )
2020-08-10 19:24:52 +08:00
- [pnpm ](https://pnpm.js.org/ ) - fast, disk space efficient package manager
2020-08-12 23:46:12 +08:00
- [Netlify ](https://www.netlify.com/ ) - deploy
2020-08-10 11:17:26 +08:00
- [VS Code Extensions ](./.vscode/extensions.json )
2020-08-12 23:46:12 +08:00
- [Iconify IntelliSense ](https://marketplace.visualstudio.com/items?itemName=antfu.iconify )
- [i18n Ally ](https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally )
- [Tailwind CSS IntelliSense ](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss )
- [Vetur ](https://marketplace.visualstudio.com/items?itemName=octref.vetur )
- [ESLint ](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint )
2020-08-10 02:43:04 +08:00
2020-08-10 11:17:26 +08:00
## Try it now!
2020-08-12 23:46:12 +08:00
### Github Template
2020-08-10 11:17:26 +08:00
[Create a repo from this template on Github ](https://github.com/antfu/vitesse/generate ).
2020-08-13 02:38:04 +08:00
### Clone to local
2020-08-12 23:46:12 +08:00
2020-08-13 02:38:04 +08:00
If you prefer do to it manually with cleaner git history
2020-08-10 02:43:04 +08:00
```bash
2020-08-10 11:17:26 +08:00
npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
2020-08-10 10:38:38 +08:00
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
2020-08-10 02:43:04 +08:00
```
## Why
2020-08-10 11:17:26 +08:00
I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the idea simply comes true in a very short time.
So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks.
