chore: update readme

This commit is contained in:
Anthony Fu 2020-08-21 00:06:21 +08:00
parent 0b16e04767
commit d781bf523e
3 changed files with 47 additions and 59 deletions

View File

@ -16,7 +16,7 @@
## Features
- ⚡️ Vue3, Vite, pnpm, ESBuild - born with fastness
- ⚡️ [Vue3](https://github.com/vuejs/vue-next), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.js.org/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness
- 🗂 [File based routing](./src/pages)
@ -26,7 +26,7 @@
- 😃 [Use icons from any icon sets, with no compromise](./src/components)
- 🌍 i18n ready
- 🌍 [i18n ready](./locales)
- 🦾 TypeScript, of course
@ -87,8 +87,45 @@ cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
```
## Checklist
When you setup your clones, try follow the checklist to update info properly
- [ ] Rename `name` field in `package.json`
- [ ] Change the author name in `LICENSE`
- [ ] Change the title in `index.html`
- [ ] Change the favicon in `public`
- [ ] Remove the `.github` folder which contains the funding info
- [ ] Clean up the READMEs and remove routes
And, enjoy :)
## Usage
### Development
Just run and visit http://localhost:3000
```bash
pnpm dev
```
### Build
To build the App, run
```bash
pnpm build
```
And you will see the genrated file in `dist` that ready to be served.
### Deploy on Netlify
Go to [Netlify](https://app.netlify.com/start) and select you clone, `OK` along the way, and your App will be live in a minute.
## Why
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.
I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within 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.

7
locales/README.md Normal file
View File

@ -0,0 +1,7 @@
## i18n
This directory is to serve your locale translation files. Modify them to the locales you want, you might need to update `src/messages.ts` as well.
For more details, check out [`vue-i18n`](https://github.com/intlify/vue-i18n-next).
If you are using VS Code, [`i18n Ally`](https://github.com/antfu/i18n-ally) is recommended to make the better i18n experience.

View File

@ -1,56 +0,0 @@
<template>
<div
class="fixed top-0 bottom-0 left-0 right-0 z-40"
:class="value ? '': 'pointer-events-none'"
>
<div
class="bg-white bg-opacity-85 bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out"
:class="value ? '': 'opacity-0'"
@click="$emit('update:value', false)"
/>
<div
class="bg-white absolute transition-all duration-200 ease-out border-gray-200"
:class="positionClass"
:style="value ? {}: {transform}"
>
<slot />
</div>
</div>
</template>
<script setup="props" lang="ts">
import { computed } from 'vue'
declare const props: {
value?: boolean
direction?: 'bottom' | 'top' | 'left' | 'right'
}
const defaultDirection = 'bottom'
export const positionClass = computed(() => {
switch (props.direction || defaultDirection) {
case 'bottom':
return 'bottom-0 left-0 right-0 border-t'
case 'top':
return 'top-0 left-0 right-0 border-b'
case 'left':
return 'bottom-0 left-0 top-0 border-r'
case 'right':
return 'bottom-0 top-0 right-0 border-l'
}
})
export const transform = computed(() => {
switch (props.direction || defaultDirection) {
case 'bottom':
return 'translateY(100%)'
case 'top':
return 'translateY(-100%)'
case 'left':
return 'translateX(-100%)'
case 'right':
return 'translateX(100%)'
}
})
</script>