mirror of
https://github.com/lstoeferle/vite-vue2-starter
synced 2025-02-23 21:22:18 +08:00
lstoeferle
GitHub
commit
320c7d345d
72
README.md
72
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
|
||||
|
||||
## 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
|
||||
|
||||
1. Install dependencies
|
||||
```bash
|
||||
npm install
|
||||
npx degit lstoeferle/vite-vue2-windicss-starter my-vite-vue2-app
|
||||
cd my-vite-vue2-app
|
||||
npm i
|
||||
```
|
||||
2. Start dev server
|
||||
|
||||
# Usage
|
||||
|
||||
## Development
|
||||
|
||||
Just run and visit [http://localhost:8080](http://localhost:8080)
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
3. Visit the page
|
||||
<a href="http://localhost:8080" target="_blank">http://localhost:8080</a>
|
||||
|
||||
## 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 ♥️
|
||||
20
package-lock.json
generated
20
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div id="app">
|
||||
<Navbar />
|
||||
<main id="app">
|
||||
<router-view />
|
||||
<RouterView />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user