mirror of
https://github.com/lstoeferle/vite-vue2-starter
synced 2025-02-23 05:02:19 +08:00
feat: migrate to vue 2.7
This commit is contained in:
parent
d4047e7473
commit
4bcbe41a39
@ -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) -
|
||||
|
16
package.json
16
package.json
@ -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
57
src/auto-imports.d.ts
vendored
@ -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
12
src/components.d.ts
vendored
@ -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 { }
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -55,6 +55,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, getCurrentInstance } from 'vue'
|
||||
import { routes } from '@/router'
|
||||
|
||||
// Import config from .env
|
||||
|
12
src/main.ts
12
src/main.ts
@ -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')
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
@ -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',
|
||||
|
Loading…
Reference in New Issue
Block a user