docs: refactored README and added live-demo link

README.md

@@ -1,15 +1,25 @@
-# Vite ⚡ - Vue 2 starter template
+<h1 align="center">Vite ⚡ - Vue 2 starter template</h1>
 
-This starter template will help you to easily create a Vue2 application bundled by the lightning fast build tool called [Vite](https://github.com/vitejs/vite). Besides Vite this template also provides:
+<p align="center">
+  This starter template will help you to easily create a Vue 2 application bundled by the lightning fast build tool called 
+  <a href="https://github.com/vitejs/vite">Vite</a>
+</p>
 
+<p align="center">
+ <a href="https://vite-vue2-starter.netlify.app">Live Demo</a>
+</p>
 
-* Typescript support
-* Vue Router
-* Vue Composition-API
-* VueUse
-* WindiCSS (TailwindCSS) + Dark Mode
+# 🔥 Features
 
-## :package: Vite plugins
+* ⚡️ [Vite 2](https://github.com/vitejs/vite), [Vue 2](https://github.com/vuejs/vue) and [Composition-API](https://github.com/vuejs/composition-api)
+* 🚦 [Vue-Router](https://github.com/vuejs/vue-router)
+* 📦 [Components auto importing](https://github.com/antfu/vite-plugin-components)
+* 🎨 [Windi CSS](https://github.com/windicss/vite-plugin-windicss) - on-demand Tailwind CSS with speed and dark mode
+* 😃 [Icons as Vue components](https://github.com/antfu/vite-plugin-icons) - powered by [Iconify](https://github.com/iconify/iconify)
+* 🧰 [VueUse](https://github.com/vueuse/vueuse) - collection of essential Vue Composition Utilities 
+* 🔍 ESLint + Prettier 
+* 🦾 Typescript
+# 📦 Vite plugins
 
 * [`vite-plugin-vue2`](https://github.com/underfin/vite-plugin-vue2) -
   Vue 2 support for Vite
@@ -17,20 +27,53 @@ This starter template will help you to easily create a Vue2 application bundled
   On demand components auto importing for Vite
 * [`vite-plugin-windicss`](https://github.com/windicss/vite-plugin-windicss) -
   WindiCSS/TailwindCSS for Vite
-* [`vite-plugin-icoms`](https://github.com/antfu/vite-plugin-icons) -  
+* [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) -
   Access thousands of icons as Vue components in Vite 
 
-## :rocket: Getting started
+# 🚀 Getting started
 
-1.  Install dependencies  
-    ```bash
-    npm install
-    ```
-2.  Start dev server
-    ```bash
-    npm run dev
-    ```
-3.  Visit the page  
-    <a href="http://localhost:8080" target="_blank">http://localhost:8080</a>
+## GitHub Template
 
-    
+[Create a repo from this template on GitHub](https://github.com/lstoeferle/vite-vue2-windicss-starter/generate)
+
+When you use this template, try follow the checklist to update your info properly
+
+- [ ] Rename `name` field in `package.json`
+- [ ] Change the author name in `LICENSE`
+- [ ] Change the app name in `.env`
+- [ ] Change the favicon in `public`
+- [ ] Clean up the README(s) and remove routes
+
+## Clone 
+
+If you prefer to do it manually with a cleaner git history
+
+```bash
+npx degit lstoeferle/vite-vue2-windicss-starter my-vite-vue2-app
+cd my-vite-vue2-app
+npm i
+```
+
+# Usage
+
+## Development
+
+Just run and visit [http://localhost:8080](http://localhost:8080)
+
+```bash
+npm run dev
+```
+
+## Build 
+
+To build the App, run
+
+```bash
+npm run build
+```
+
+And you will see the generated files in `dist`, which are ready to be served.
+
+## Why
+
+Vue 3 is awesome, but we should not forget about supporting Vue 2 ♥️