Skip to content

Commit

Permalink
🚩 Add example
Browse files Browse the repository at this point in the history
  • Loading branch information
ileostar committed Oct 12, 2023
1 parent c13db81 commit 649689e
Show file tree
Hide file tree
Showing 10 changed files with 144 additions and 67 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
克隆项目到本地:

``` bash
npx degit ileostar/vue-star 你的项目名称
npx degit ileostar/vitesse-star 你的项目名称 # If there is no npx, npm i -g npx first
```

进入项目目录:
Expand Down
6 changes: 6 additions & 0 deletions auto-imports.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ declare global {
const h: typeof import('vue')['h']
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
const inject: typeof import('vue')['inject']
const injectLocal: typeof import('@vueuse/core')['injectLocal']
const isDark: typeof import('./src/composables/dark')['isDark']
const isDefined: typeof import('@vueuse/core')['isDefined']
const isProxy: typeof import('vue')['isProxy']
Expand Down Expand Up @@ -76,6 +77,7 @@ declare global {
const onUpdated: typeof import('vue')['onUpdated']
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
const provide: typeof import('vue')['provide']
const provideLocal: typeof import('@vueuse/core')['provideLocal']
const reactify: typeof import('@vueuse/core')['reactify']
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
const reactive: typeof import('vue')['reactive']
Expand Down Expand Up @@ -344,6 +346,7 @@ declare module 'vue' {
readonly h: UnwrapRef<typeof import('vue')['h']>
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
readonly inject: UnwrapRef<typeof import('vue')['inject']>
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
readonly isDark: UnwrapRef<typeof import('./src/composables/dark')['isDark']>
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
Expand Down Expand Up @@ -379,6 +382,7 @@ declare module 'vue' {
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
readonly provide: UnwrapRef<typeof import('vue')['provide']>
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
Expand Down Expand Up @@ -641,6 +645,7 @@ declare module '@vue/runtime-core' {
readonly h: UnwrapRef<typeof import('vue')['h']>
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
readonly inject: UnwrapRef<typeof import('vue')['inject']>
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
readonly isDark: UnwrapRef<typeof import('./src/composables/dark')['isDark']>
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
Expand Down Expand Up @@ -676,6 +681,7 @@ declare module '@vue/runtime-core' {
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
readonly provide: UnwrapRef<typeof import('vue')['provide']>
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
Expand Down
5 changes: 5 additions & 0 deletions components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,13 @@ export {}

declare module 'vue' {
export interface GlobalComponents {
OButton: typeof import('onu-ui')['OButton']
OText: typeof import('onu-ui')['OText']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
TheFooter: typeof import('./src/components/TheFooter.vue')['default']
TheHeader: typeof import('./src/components/TheHeader.vue')['default']
TheInput: typeof import('./src/components/TheInput.vue')['default']
TheStudy: typeof import('./src/components/TheStudy.vue')['default']
}
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@antfu/eslint-config": "1.0.0-beta.21",
"@iconify-json/carbon": "^1.1.21",
"@iconify-json/mdi": "^1.1.54",
"@iconify-json/streamline-emojis": "^1.1.4",
"@ileostar/eslint-config": "^0.3.0",
"@types/node": "^20.8.4",
"@typescript-eslint/eslint-plugin": "^6.7.5",
Expand Down
9 changes: 9 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 19 additions & 0 deletions src/components/TheInput.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script setup lang="ts">
const modelValue = defineModel()
</script>

<template>
<input
id="input"
v-model="modelValue"
type="text"
v-bind="$attrs"
p="x-4 y-2"
w="200px"
mt-3
text="center"
bg="transparent"
border="~ rounded gray-200 dark:gray-700"
outline="none active:none"
>
</template>
53 changes: 53 additions & 0 deletions src/components/TheStudy.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<nav mt-6 inline-flex gap-2 text-xl>
<div flex="~ items-center" m-t-20 justify-center class="logo-link">
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo">
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="@/assets/vue.svg" class="logo vue" alt="Vue logo">
</a>
<a href="https://pinia.vuejs.org/zh/" target="_blank">
<img src="@/assets/pinia.svg" class="logo pinia" alt="Pinia logo">
</a>
<a href="https://alfred-skyblue.github.io/" target="_blank">
<img src="@/assets/unocss.svg" class="logo unocss" alt="UnoCss logo">
</a>
<a href="https://alova.js.org/zh-CN/" target="_blank">
<img src="@/assets/alova.svg" class="logo alova" alt="Alova logo">
</a>
<a href="https://cn.vitest.dev/" target="_blank">
<img src="@/assets/vitest.png" class="logo pinia" alt="Vitest logo">
</a>
</div>
</nav>
</template>

<style scoped>
.logo {
padding: 1em;
height: 6em;
transition: filter 300ms;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.pinia:hover {
filter: drop-shadow(0 0 2em #ffd552);
}
.logo.alova:hover {
filter: drop-shadow(0 0 2em #00b0ed);
}
.logo.unocss:hover {
filter: drop-shadow(0 0 2em #586c43);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
13 changes: 8 additions & 5 deletions src/pages/[...all].vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<template>
<div>
Not Found
</div>
</template>
<template>
<div>
<div i-streamline-emojis-magnifying-glass-tilted-left inline-block text-4xl />
<p>
Not Found
</p>
</div>
</template>
2 changes: 1 addition & 1 deletion src/pages/hi/[name].vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const router = useRouter()

<template>
<div>
<div i-carbon-pedestrian inline-block text-4xl />
<div i-streamline-emojis-confetti-ball inline-block text-4xl />
<p>
Hi, {{ props.name }}
</p>
Expand Down
101 changes: 41 additions & 60 deletions src/pages/index.vue
Original file line number Diff line number Diff line change
@@ -1,71 +1,52 @@
<script setup lang="ts">
defineOptions({
name: 'IndexPage',
})
const router = useRouter()
const indexStore = useIndexStore()
const { count, msg } = storeToRefs(indexStore)
const name = ref('')
const { msg } = storeToRefs(indexStore)
/**
* 跳转链接
* Navigates to the "hi" route with the value of the "name" input field
*
* @return {void}
*/
function go(): void {
if (name.value)
router.push(`/hi/${encodeURIComponent(name.value)}`)
}
</script>

<template>
<div flex="~ items-center" m-t-20 justify-center class="logo-link">
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo">
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="@/assets/vue.svg" class="logo vue" alt="Vue logo">
</a>
<a href="https://pinia.vuejs.org/zh/" target="_blank">
<img src="@/assets/pinia.svg" class="logo pinia" alt="Pinia logo">
</a>
<a href="https://alfred-skyblue.github.io/" target="_blank">
<img src="@/assets/unocss.svg" class="logo unocss" alt="UnoCss logo">
</a>
<a href="https://alova.js.org/zh-CN/" target="_blank">
<img src="@/assets/alova.svg" class="logo alova" alt="Alova logo">
</a>
<a href="https://cn.vitest.dev/" target="_blank">
<img src="@/assets/vitest.png" class="logo pinia" alt="Vitest logo">
</a>
</div>
<h2 m-3 text-7 font-bold>
{{ msg }}
<TheStudy />
<h2 m-3>
<o-text class="read-the-docs" font="bold" text-6 font-bold size="lg" gradient="linear-gradient(to right, #0c02ba, #00ff95)">
{{ msg }}
</o-text>
</h2>
<div class="card">
<button type="button" p="t-2 b-2 l-3 r-3" m-2 cursor-pointer border border-rd-3 font-100 @click="indexStore.updateCount">
count is {{ count }}
</button>
<p class="read-the-docs">
<p color-gray>
Click on the logos to learn more
</p>
<TheInput
v-model="name"
placeholder="What's your name?"
autocomplete="false"
@keydown.enter="go"
/>
<div>
<o-button

Check failure on line 42 in src/pages/index.vue

View workflow job for this annotation

GitHub Actions / build (18.x, ubuntu-latest)

Trailing spaces not allowed

Check failure on line 42 in src/pages/index.vue

View workflow job for this annotation

GitHub Actions / build (18.x, windows-latest)

Trailing spaces not allowed
type="info"
mt-2
:disabled="!name"
@click="go"
>

Check warning on line 47 in src/pages/index.vue

View workflow job for this annotation

GitHub Actions / build (18.x, ubuntu-latest)

Expected indentation of 6 spaces but found 8 spaces

Check warning on line 47 in src/pages/index.vue

View workflow job for this annotation

GitHub Actions / build (18.x, windows-latest)

Expected indentation of 6 spaces but found 8 spaces
Go
</o-button>
</div>
</div>
</template>

<style scoped>
.read-the-docs {
color: #888888;
}
.logo {
padding: 1.5em;
height: 8em;
transition: filter 300ms;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.pinia:hover {
filter: drop-shadow(0 0 2em #ffd552);
}
.logo.alova:hover {
filter: drop-shadow(0 0 2em #00b0ed);
}
.logo.unocss:hover {
filter: drop-shadow(0 0 2em #586c43);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

0 comments on commit 649689e

Please sign in to comment.