feat: use unplugin-auto-import instead of vue-global-api

This commit is contained in:
Anthony Fu 2021-08-24 15:19:20 +08:00
parent 88908230da
commit 130b285ad9
14 changed files with 974 additions and 1063 deletions

View File

@ -1,6 +1,5 @@
{
"extends": [
"@antfu",
"vue-global-api"
"@antfu"
]
}

4
.gitignore vendored
View File

@ -5,7 +5,7 @@
dist
dist-ssr
node_modules
# intellij stuff
.idea/
# logs
*.log
components.d.ts
auto-imports.d.ts

View File

@ -67,6 +67,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
- [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - layouts for pages
- [Pinia](https://pinia.esm.dev) - Intuitive, type safe, light and flexible Store for Vue using the composition api
- [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components) - components auto import
- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
- [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
- [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - WindiCSS support
- [`vite-plugin-md`](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
@ -76,7 +77,6 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
- [`vite-plugin-vue-i18n`](https://github.com/intlify/vite-plugin-vue-i18n) - Vite plugin for Vue I18n
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
- [`@vueuse/head`](https://github.com/vueuse/head) - manipulate document head reactively
- [`vue-global-api`](https://github.com/antfu/vue-global-api) - Use Vue Composition API globally
### Coding Style

19
components.d.ts vendored
View File

@ -1,19 +0,0 @@
// generated by vite-plugin-components
// read more https://github.com/vuejs/vue-next/pull/3399
declare module 'vue' {
export interface GlobalComponents {
CarbonCampsite: typeof import('virtual:vite-icons/carbon/campsite')['default']
CarbonDicomOverlay: typeof import('virtual:vite-icons/carbon/dicom-overlay')['default']
CarbonLanguage: typeof import('virtual:vite-icons/carbon/language')['default']
CarbonLogoGithub: typeof import('virtual:vite-icons/carbon/logo-github')['default']
CarbonMoon: typeof import('virtual:vite-icons/carbon/moon')['default']
CarbonPedestrian: typeof import('virtual:vite-icons/carbon/pedestrian')['default']
CarbonSun: typeof import('virtual:vite-icons/carbon/sun')['default']
CarbonWarning: typeof import('virtual:vite-icons/carbon/warning')['default']
Footer: typeof import('./src/components/Footer.vue')['default']
README: typeof import('./src/components/README.md')['default']
}
}
export { }

View File

@ -10,39 +10,39 @@
"@vueuse/core": "^6.0.0",
"@vueuse/head": "^0.6.0",
"nprogress": "^0.2.0",
"pinia": "^2.0.0-0",
"pinia": "^2.0.0-rc.6",
"prism-theme-vars": "^0.2.2",
"vue": "^3.2.2",
"vue": "^3.2.4",
"vue-demi": "^0.11.3",
"vue-global-api": "^0.4.1",
"vue-i18n": "^9.1.7",
"vue-router": "^4.0.11"
},
"devDependencies": {
"@antfu/eslint-config": "^0.7.0",
"@iconify/json": "^1.1.387",
"@iconify/json": "^1.1.392",
"@intlify/vite-plugin-vue-i18n": "^2.4.0",
"@types/nprogress": "^0.2.0",
"@vitejs/plugin-vue": "^1.4.0",
"@vue/compiler-sfc": "^3.2.2",
"@vue/server-renderer": "^3.2.2",
"@vue/compiler-sfc": "^3.2.4",
"@vue/server-renderer": "^3.2.4",
"critters": "^0.0.10",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"https-localhost": "^4.6.5",
"markdown-it-link-attributes": "^3.0.0",
"markdown-it-prism": "^2.1.8",
"pnpm": "^6.13.0",
"markdown-it-prism": "^2.2.0",
"pnpm": "^6.14.3",
"typescript": "^4.3.5",
"vite": "^2.4.4",
"unplugin-auto-import": "^0.0.6",
"vite": "^2.5.0",
"vite-plugin-components": "^0.13.2",
"vite-plugin-icons": "^0.6.5",
"vite-plugin-md": "^0.10.0",
"vite-plugin-pages": "^0.17.3",
"vite-plugin-pwa": "^0.10.0",
"vite-plugin-md": "^0.11.0",
"vite-plugin-pages": "^0.17.4",
"vite-plugin-pwa": "^0.11.0",
"vite-plugin-vue-layouts": "^0.3.1",
"vite-plugin-windicss": "^1.2.7",
"vite-ssg": "^0.14.5",
"vue-tsc": "^0.2.3"
"vite-plugin-windicss": "^1.2.8",
"vite-ssg": "^0.14.6",
"vue-tsc": "^0.3.0"
}
}

File diff suppressed because it is too large Load Diff

View File

@ -17,7 +17,7 @@ const toggleLocales = () => {
<carbon-campsite />
</router-link>
<button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark">
<button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
<carbon-moon v-if="isDark" />
<carbon-sun v-else />
</button>

View File

@ -1,7 +1,4 @@
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const router = useRouter()
const { t } = useI18n()
</script>

View File

@ -1,4 +1,4 @@
import { useDark, useToggle } from '@vueuse/core'
// import { useDark, useToggle } from '@vueuse/core'
export const isDark = useDark()
export const toggleDark = useToggle(isDark)

View File

@ -1,5 +1,4 @@
// register vue composition api globally
import 'vue-global-api'
import { ViteSSG } from 'vite-ssg'
import generatedRoutes from 'virtual:generated-pages'
import { setupLayouts } from 'virtual:generated-layouts'

View File

@ -1,6 +1,4 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

View File

@ -1,12 +1,10 @@
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '~/stores/user'
const props = defineProps<{ name: string }>()
const router = useRouter()
const { t } = useI18n()
const user = useUserStore()
const { t } = useI18n()
watchEffect(() => {
user.setNewName(props.name)

View File

@ -1,6 +1,4 @@
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '~/stores/user'
const user = useUserStore()

View File

@ -7,6 +7,7 @@ import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
import ViteComponents from 'vite-plugin-components'
import Markdown from 'vite-plugin-md'
import WindiCSS from 'vite-plugin-windicss'
import AutoImport from 'unplugin-auto-import/vite'
import { VitePWA } from 'vite-plugin-pwa'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import Prism from 'markdown-it-prism'
@ -34,6 +35,17 @@ export default defineConfig({
// https://github.com/JohnCampionJr/vite-plugin-vue-layouts
Layouts(),
// https://github.com/antfu/unplugin-auto-import
AutoImport({
imports: [
'vue',
'vue-router',
'vue-i18n',
'@vueuse/head',
'@vueuse/core',
],
}),
// https://github.com/antfu/vite-plugin-components
ViteComponents({
// allow auto load markdown components under `./src/components/`