Merge pull request #5 from lstoeferle/feat/live-demo

feat: live demo
2025-02-23 05:02:19 +08:00 · 2021-03-02 07:36:58 +01:00 · 2021-03-02 07:36:58 +01:00 · 320c7d345d
commit 320c7d345d
parent e8845561d3 b62ce2f2bb
8 changed files with 89 additions and 49 deletions
--- a/README.md
+++ b/README.md
@ -1,15 +1,24 @@
-# 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">
+  Create a Vue 2 application bundled by the lightning fast build tool <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 +26,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 ♥️
--- a/package-lock.json
+++ b/package-lock.json
@ -5,7 +5,6 @@
  "requires": true,
  "packages": {
    "": {
-      "name": "vite-vue2-example",
      "version": "1.0.0",
      "license": "MIT",
      "dependencies": {
@ -18,6 +17,7 @@
        "vue-router": "3.5.1"
      },
      "devDependencies": {
+        "@iconify/json": "1.1.310",
        "@typescript-eslint/eslint-plugin": "4.15.2",
        "@typescript-eslint/parser": "4.15.2",
        "@vue/eslint-config-prettier": "6.0.0",
@ -458,11 +458,10 @@
      }
    },
    "node_modules/@iconify/json": {
-      "version": "1.1.309",
-      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.309.tgz",
-      "integrity": "sha512-L9556ireR0vOEcrIc54AJpwhts+T4YKArkB5NkxQCMk5b4Rc9+DviglggXByaR2ryqyRZT1/cv1AD/xJtQBQ6g==",
-      "dev": true,
-      "peer": true
+      "version": "1.1.310",
+      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.310.tgz",
+      "integrity": "sha512-gLCuqulJPC2ly3upqPILOA1nV2fYfb99Dx64hLvneUb0r22opL+TfMfl352AjSZTFMGKV6ve8pNSAOS5gvY3vg==",
+      "dev": true
    },
    "node_modules/@iconify/json-tools": {
      "version": "1.0.10",
@ -5344,11 +5343,10 @@
      }
    },
    "@iconify/json": {
-      "version": "1.1.309",
-      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.309.tgz",
-      "integrity": "sha512-L9556ireR0vOEcrIc54AJpwhts+T4YKArkB5NkxQCMk5b4Rc9+DviglggXByaR2ryqyRZT1/cv1AD/xJtQBQ6g==",
-      "dev": true,
-      "peer": true
+      "version": "1.1.310",
+      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.310.tgz",
+      "integrity": "sha512-gLCuqulJPC2ly3upqPILOA1nV2fYfb99Dx64hLvneUb0r22opL+TfMfl352AjSZTFMGKV6ve8pNSAOS5gvY3vg==",
+      "dev": true
    },
    "@iconify/json-tools": {
      "version": "1.0.10",
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
    "vue-router": "3.5.1"
  },
  "devDependencies": {
+    "@iconify/json": "1.1.310",
    "@typescript-eslint/eslint-plugin": "4.15.2",
    "@typescript-eslint/parser": "4.15.2",
    "@vue/eslint-config-prettier": "6.0.0",
--- a/src/App.vue
+++ b/src/App.vue
@ -2,7 +2,7 @@
  <div id="app">
    <Navbar />
    <main id="app">
-      <router-view />
+      <RouterView />
    </main>
  </div>
 </template>
--- a/src/components/Feature.vue
+++ b/src/components/Feature.vue
@ -16,7 +16,7 @@
        class="inline-flex items-center mt-3 text-green-500"
      >
        Learn More
-        <mdi-arrow-right class="ml-1" />
+        <MdiArrowRight class="ml-1" />
      </a>
    </div>
  </div>
--- a/src/components/Hero.vue
+++ b/src/components/Hero.vue
@ -22,9 +22,9 @@
          <ButtonPrimary> Vue docs </ButtonPrimary>
        </a>

-        <router-link :to="{ name: 'About' }">
+        <RouterLink :to="{ name: 'About' }">
          <ButtonSecondary> About </ButtonSecondary>
-        </router-link>
+        </RouterLink>
      </div>
    </div>
  </section>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@ -3,7 +3,7 @@
    <div
      class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row"
    >
-      <router-link
+      <RouterLink
        :to="{ name: 'Home' }"
        class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0"
      >
@ -11,11 +11,11 @@
        <span class="ml-3 text-xl dark:text-white">
          {{ appName }}
        </span>
-      </router-link>
+      </RouterLink>
      <nav
        class="flex flex-wrap items-center justify-center text-base md:ml-auto"
      >
-        <router-link
+        <RouterLink
          v-for="(route, index) in routes"
          :key="index"
          class="mr-5 font-semibold cursor-pointer"
@ -28,29 +28,28 @@
          :to="{ name: route.name }"
        >
          {{ route.name }}
-        </router-link>
-        <router-link
+        </RouterLink>
+        <RouterLink
          class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
          to="/aliens"
        >
-          <mdi-alien />
-        </router-link>
+          <MdiAlien />
+        </RouterLink>
        <a
          href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
          target="_blank"
          class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
        >
-          <mdi-github />
+          <MdiGithub />
        </a>
        <button
          @click="toggle"
          class="flex items-center justify-center w-9 h-9 focus:outline-none"
        >
-          <mdi-white-balance-sunny class="text-yellow-500" v-if="isDark" />
-          <mdi-moon-waning-crescent class="text-gray-800" v-else />
+          <MdiWhiteBalanceSunny class="text-yellow-500" v-if="isDark" />
+          <MdiMoonWaningCrescent class="text-gray-800" v-else />
        </button>
      </nav>
-      <div></div>
    </div>
  </header>
 </template>
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@ -16,9 +16,9 @@
          Oops, looks like you got kidnapped by aliens.
        </p>
        <div class="flex justify-center">
-          <router-link :to="{ name: 'Home' }">
+          <RouterLink :to="{ name: 'Home' }">
            <ButtonPrimary> Bring me back Home </ButtonPrimary>
-          </router-link>
+          </RouterLink>
        </div>
      </div>
    </div>