feat: migrate to vue 2.7

This commit is contained in:
René Herrmann 2022-07-06 16:31:30 +02:00 committed by GitHub
parent d4047e7473
commit 4bcbe41a39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 815 additions and 1554 deletions

View File

@ -11,21 +11,18 @@
## Features
* ⚡️ [Vite](https://github.com/vitejs/vite), [Vue 2](https://github.com/vuejs/vue) - lightning fast
* 🔥 [Composition-API](https://github.com/vuejs/composition-api) with [\<script setup\>](https://github.com/antfu/unplugin-vue2-script-setup) syntax support
* 📦 [Components auto importing](https://github.com/antfu/unplugin-vue-components)
* 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly
* 🚦 [Vue-Router](https://github.com/vuejs/vue-router)
* 🎨 [Windi CSS](https://github.com/windicss/vite-plugin-windicss) - next generation utility-first CSS framework
* 😃 [Use icons from any icon sets, with no compromise](https://github.com/antfu/unplugin-icons)
* 🧰 [VueUse](https://github.com/vueuse/vueuse) - Collection of essential Vue Composition Utilities
* 🦾 Typescript, of corse
* 🦾 Typescript, of course
## Vite plugins
* [`vite-plugin-vue2`](https://github.com/underfin/vite-plugin-vue2) -
* [`@vitejs/plugin-vue2`](https://github.com/vitejs/vite-plugin-vue2) -
Vue 2 support for Vite
* [`unplugin-vue2-script-setup`](https://github.com/antfu/unplugin-vue2-script-setup) -
syntax support for `<script setup>`
* [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) -
importing Vue components on-demand
* [`unplugin-unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) -

View File

@ -8,26 +8,24 @@
"lint:fix": "eslint \"**/*.{vue,ts,js}\" --fix"
},
"dependencies": {
"@vue/composition-api": "^1.6.1",
"@vueuse/core": "^8.5.0",
"core-js": "^3.21.1",
"vue": "^2.6.14",
"vue": "^2.7.0",
"vue-router": "^3.5.3"
},
"devDependencies": {
"@antfu/eslint-config": "^0.18.8",
"@iconify/json": "^2.1.14",
"@vue/runtime-dom": "^3.2.31",
"@vitejs/plugin-vue2": "^1.1.2",
"eslint": "^8.10.0",
"husky": "^7.0.4",
"typescript": "^4.6.2",
"unplugin-auto-import": "^0.6.4",
"unplugin-icons": "^0.13.3",
"unplugin-vue-components": "^0.18.0",
"unplugin-vue2-script-setup": "^0.10.0",
"unplugin-auto-import": "^0.9.1",
"unplugin-icons": "^0.14.4",
"unplugin-vue-components": "^0.21.0",
"vite": "^2.8.6",
"vite-plugin-vue2": "^1.9.3",
"vite-plugin-windicss": "^1.8.3",
"vue-template-compiler": "^2.6.14"
"vue-template-compiler": "^2.7.0",
"vue-template-es2015-compiler": "^1.9.1"
}
}

57
src/auto-imports.d.ts vendored
View File

@ -1,102 +1,64 @@
// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
export {}
declare global {
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
const computed: typeof import('@vue/composition-api')['computed']
const computedAsync: typeof import('@vueuse/core')['computedAsync']
const computedEager: typeof import('@vueuse/core')['computedEager']
const computedInject: typeof import('@vueuse/core')['computedInject']
const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
const controlledRef: typeof import('@vueuse/core')['controlledRef']
const createApp: typeof import('@vue/composition-api')['createApp']
const createEventHook: typeof import('@vueuse/core')['createEventHook']
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
const customRef: typeof import('@vue/composition-api')['customRef']
const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
const defineAsyncComponent: typeof import('@vue/composition-api')['defineAsyncComponent']
const defineComponent: typeof import('@vue/composition-api')['defineComponent']
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
const effectScope: typeof import('@vue/composition-api')['effectScope']
const EffectScope: typeof import('@vue/composition-api')['EffectScope']
const extendRef: typeof import('@vueuse/core')['extendRef']
const getCurrentInstance: typeof import('@vue/composition-api')['getCurrentInstance']
const getCurrentScope: typeof import('@vue/composition-api')['getCurrentScope']
const h: typeof import('@vue/composition-api')['h']
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
const inject: typeof import('@vue/composition-api')['inject']
const isDefined: typeof import('@vueuse/core')['isDefined']
const isReadonly: typeof import('@vue/composition-api')['isReadonly']
const isRef: typeof import('@vue/composition-api')['isRef']
const logicAnd: typeof import('@vueuse/core')['logicAnd']
const logicNot: typeof import('@vueuse/core')['logicNot']
const logicOr: typeof import('@vueuse/core')['logicOr']
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
const markRaw: typeof import('@vue/composition-api')['markRaw']
const nextTick: typeof import('@vue/composition-api')['nextTick']
const onActivated: typeof import('@vue/composition-api')['onActivated']
const onBeforeMount: typeof import('@vue/composition-api')['onBeforeMount']
const onBeforeUnmount: typeof import('@vue/composition-api')['onBeforeUnmount']
const onBeforeUpdate: typeof import('@vue/composition-api')['onBeforeUpdate']
const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
const onDeactivated: typeof import('@vue/composition-api')['onDeactivated']
const onErrorCaptured: typeof import('@vue/composition-api')['onErrorCaptured']
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
const onLongPress: typeof import('@vueuse/core')['onLongPress']
const onMounted: typeof import('@vue/composition-api')['onMounted']
const onScopeDispose: typeof import('@vue/composition-api')['onScopeDispose']
const onServerPrefetch: typeof import('@vue/composition-api')['onServerPrefetch']
const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
const onUnmounted: typeof import('@vue/composition-api')['onUnmounted']
const onUpdated: typeof import('@vue/composition-api')['onUpdated']
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
const provide: typeof import('@vue/composition-api')['provide']
const reactify: typeof import('@vueuse/core')['reactify']
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
const reactive: typeof import('@vue/composition-api')['reactive']
const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
const reactivePick: typeof import('@vueuse/core')['reactivePick']
const readonly: typeof import('@vue/composition-api')['readonly']
const ref: typeof import('@vue/composition-api')['ref']
const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
const refDebounced: typeof import('@vueuse/core')['refDebounced']
const refDefault: typeof import('@vueuse/core')['refDefault']
const refThrottled: typeof import('@vueuse/core')['refThrottled']
const refWithControl: typeof import('@vueuse/core')['refWithControl']
const shallowReactive: typeof import('@vue/composition-api')['shallowReactive']
const shallowReadonly: typeof import('@vue/composition-api')['shallowReadonly']
const shallowRef: typeof import('@vue/composition-api')['shallowRef']
const syncRef: typeof import('@vueuse/core')['syncRef']
const syncRefs: typeof import('@vueuse/core')['syncRefs']
const templateRef: typeof import('@vueuse/core')['templateRef']
const throttledRef: typeof import('@vueuse/core')['throttledRef']
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
const toRaw: typeof import('@vue/composition-api')['toRaw']
const toReactive: typeof import('@vueuse/core')['toReactive']
const toRef: typeof import('@vue/composition-api')['toRef']
const toRefs: typeof import('@vue/composition-api')['toRefs']
const triggerRef: typeof import('@vue/composition-api')['triggerRef']
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
const unref: typeof import('@vue/composition-api')['unref']
const unrefElement: typeof import('@vueuse/core')['unrefElement']
const until: typeof import('@vueuse/core')['until']
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
const useAttrs: typeof import('@vue/composition-api')['useAttrs']
const useBase64: typeof import('@vueuse/core')['useBase64']
const useBattery: typeof import('@vueuse/core')['useBattery']
const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
@ -106,15 +68,14 @@ declare global {
const useColorMode: typeof import('@vueuse/core')['useColorMode']
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
const useCounter: typeof import('@vueuse/core')['useCounter']
const useCssModule: typeof import('@vue/composition-api')['useCssModule']
const useCssVar: typeof import('@vueuse/core')['useCssVar']
const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
const useCycleList: typeof import('@vueuse/core')['useCycleList']
const useDark: typeof import('@vueuse/core')['useDark']
const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
const useDebounce: typeof import('@vueuse/core')['useDebounce']
const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
@ -122,6 +83,7 @@ declare global {
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
const useDraggable: typeof import('@vueuse/core')['useDraggable']
const useDropZone: typeof import('@vueuse/core')['useDropZone']
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
const useElementHover: typeof import('@vueuse/core')['useElementHover']
@ -141,6 +103,7 @@ declare global {
const useGamepad: typeof import('@vueuse/core')['useGamepad']
const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
const useIdle: typeof import('@vueuse/core')['useIdle']
const useImage: typeof import('@vueuse/core')['useImage']
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
const useInterval: typeof import('@vueuse/core')['useInterval']
@ -182,7 +145,6 @@ declare global {
const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
const useShare: typeof import('@vueuse/core')['useShare']
const useSlots: typeof import('@vue/composition-api')['useSlots']
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
const useStorage: typeof import('@vueuse/core')['useStorage']
@ -192,8 +154,8 @@ declare global {
const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
const useThrottle: typeof import('@vueuse/core')['useThrottle']
const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
const useTimeout: typeof import('@vueuse/core')['useTimeout']
const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
@ -204,10 +166,10 @@ declare global {
const useTransition: typeof import('@vueuse/core')['useTransition']
const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
const useVibrate: typeof import('@vueuse/core')['useVibrate']
const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
const useVModel: typeof import('@vueuse/core')['useVModel']
const useVModels: typeof import('@vueuse/core')['useVModels']
const useVibrate: typeof import('@vueuse/core')['useVibrate']
const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
@ -216,10 +178,8 @@ declare global {
const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
const watch: typeof import('@vue/composition-api')['watch']
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
const watchEffect: typeof import('@vue/composition-api')['watchEffect']
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
const watchOnce: typeof import('@vueuse/core')['watchOnce']
const watchPausable: typeof import('@vueuse/core')['watchPausable']
@ -227,4 +187,3 @@ declare global {
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
const whenever: typeof import('@vueuse/core')['whenever']
}
export {}

12
src/components.d.ts vendored
View File

@ -1,8 +1,11 @@
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/vue-next/pull/3399
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
declare module 'vue' {
export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
ButtonPrimary: typeof import('./components/shared/ButtonPrimary.vue')['default']
ButtonSecondary: typeof import('./components/shared/ButtonSecondary.vue')['default']
@ -17,7 +20,8 @@ declare module 'vue' {
MdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']
MdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
Navbar: typeof import('./components/Navbar.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}
export { }
}

View File

@ -16,16 +16,9 @@
<div class="flex flex-wrap -m-2">
<div class="w-full p-2 md:w-1/2 lg:w-1/3">
<Feature
title="⚡️ vite-plugin-vue2"
title="⚡️ @vitejs/plugin-vue2"
text="Vue 2 support for Vite"
url="https://github.com/underfin/vite-plugin-vue2"
/>
</div>
<div class="w-full p-2 md:w-1/2 lg:w-1/3">
<Feature
title="🔥 unplugin-vue2-script-setup"
text="Syntax support for the new script setup"
url="https://github.com/antfu/unplugin-vue2-script-setup"
url="https://github.com/vitejs/vite-plugin-vue2"
/>
</div>
<div class="w-full p-2 md:w-1/2 lg:w-1/3">

View File

@ -55,6 +55,7 @@
</template>
<script setup lang="ts">
import { computed, getCurrentInstance } from 'vue'
import { routes } from '@/router'
// Import config from .env

View File

@ -1,19 +1,15 @@
import Vue from 'vue'
import { createApp, h } from 'vue-demi'
import VueCompositionApi from '@vue/composition-api'
import App from '@/App.vue'
import 'windi.css'
import router from '@/router'
Vue.use(VueCompositionApi)
Vue.config.productionTip = false
Vue.config.devtools = true
const app = createApp({
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: () => h(App),
render: h => h(App),
})
app.mount('#app')

View File

@ -12,7 +12,6 @@
"sourceMap": true,
"baseUrl": ".",
"types": [
"unplugin-vue2-script-setup/types",
"@vueuse/core"
],
"paths": {
@ -37,6 +36,6 @@
"node_modules"
],
"vueCompilerOptions": {
"experimentalCompatMode": 2
"target": 2.7
}
}

View File

@ -1,11 +1,10 @@
import path from 'path'
import { defineConfig } from 'vite'
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
import vue from '@vitejs/plugin-vue2'
import WindiCSS from 'vite-plugin-windicss'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import ScriptSetup from 'unplugin-vue2-script-setup/vite'
import AutoImport from 'unplugin-auto-import/vite'
const config = defineConfig({
@ -13,7 +12,6 @@ const config = defineConfig({
alias: {
'@': `${path.resolve(__dirname, 'src')}`,
},
dedupe: ['vue-demi'],
},
build: {
@ -21,8 +19,7 @@ const config = defineConfig({
},
plugins: [
Vue2(),
ScriptSetup(),
vue(),
WindiCSS(),
Components({
resolvers: [
@ -35,7 +32,6 @@ const config = defineConfig({
Icons(),
AutoImport({
imports: [
'@vue/composition-api',
'@vueuse/core',
],
dts: 'src/auto-imports.d.ts',

2242
yarn.lock

File diff suppressed because it is too large Load Diff