Merge pull request #63 from JeremyYu-cn/feat-upgrade-vue3

Feat: upgrade vite and vue to the latest version

package.json

@@ -31,7 +31,8 @@
     "qr-code-styling": "^1.6.0-rc.1",
     "selecto": "^1.13.0",
     "throttle-debounce": "^3.0.1",
-    "vue": "3.2.22",
+    "vite-plugin-compression": "^0.5.1",
+    "vue": "3.4.19",
     "vue-router": "^4.0.0-0",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.0-0"
@@ -41,29 +42,17 @@
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
-    "@vitejs/plugin-vue": "1.9.3",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.1.4",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.3.1",
-    "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.3",
-    "esbuild-loader": "^2.13.1",
     "eslint": "^7.29.0",
     "eslint-config-alloy": "~4.1.0",
     "eslint-plugin-vue": "^7.12.1",
     "less": "^4.1.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.2.2",
     "unplugin-element-plus": "^0.7.1",
-    "vite": "2.6.4",
-    "vite-plugin-compression": "^0.3.0",
-    "vue-cli-plugin-norm": "~1.2.2",
-    "vue-eslint-parser": "^7.6.0",
-    "vue-tsc": "0.3.0"
+    "vite": "^5.1.4",
+    "vue-tsc": "^1.8.27"
   },
   "browserslist": [
     "> 1%",

src/components/business/qrcode/index.vue

@@ -2,35 +2,38 @@
  * @Author: ShawnPhang
  * @Date: 2022-03-16 09:15:52
  * @Description:  
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-01-31 15:43:10
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @Date: 2024-03-04 09:50:00
 -->
 <template>
   <div ref="qrCodeDom" class="qrcode__wrap"></div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref, watch, nextTick } from 'vue'
-import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, Extension } from 'qr-code-styling'
+<script lang="ts" setup>
+import { onMounted, ref, watch, nextTick, defineProps } from 'vue'
+import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, } from 'qr-code-styling'
 import { debounce } from 'throttle-debounce'
 
-export default defineComponent({
-  props: {
-    width: {
-      default: 300,
-    },
-    height: {
-      default: 300,
-    },
-    image: {},
-    value: {},
+type TProps = {
+  width?: number
+  height?: number
+  image?: string
+  value?: string
   dotsOptions: {
-      default: () => {
-        return {}
-      },
-    },
-  },
-  setup(props) {
+    color: string,
+    type: DotType,
+  }
+}
+
+const props = withDefaults(defineProps<TProps>(), {
+  width: 300,
+  height: 300,
+  dotsOptions: () => ({
+    color: '#41b583',
+    type: 'rounded',
+  })
+})
+
 let options = {}
 watch(
   () => [props.width, props.height, props.dotsOptions],
@@ -62,8 +65,8 @@ export default defineComponent({
       color: '#ffffff',
     },
     dotsOptions: {
-          color: '#41b583',
-          type: 'rounded' as DotType,
+      // color: '#41b583',
+      // type: 'rounded' as DotType,
       ...props.dotsOptions,
     },
     cornersSquareOptions: {
@@ -89,7 +92,8 @@ export default defineComponent({
   if (props.value) {
     qrCode.update(options)
     await nextTick()
-        qrCodeDom.value.firstChild.style = 'width: 100%;' // 强制其适应缩放
+    if (!qrCodeDom.value || !qrCodeDom.value.firstChild) return
+    (qrCodeDom.value.firstChild as HTMLElement).setAttribute('style', "width: 100%;") // 强制其适应缩放
   }
 })
 
@@ -101,9 +105,4 @@ export default defineComponent({
   qrCode.append(qrCodeDom.value)
 })
 
-    return {
-      qrCodeDom,
-    }
-  },
-})
 </script>

src/components/modules/index.ts

@@ -15,7 +15,8 @@ const exclude = ['settings', 'layout']
 const regex = RegExp('.*^(?!.*?(' + exclude.join('|') + ')).*\\.vue$')
 
 // const requireComponent = require.context('.', true, /\.vue$/) // 找到components文件夹下以.vue命名的文件
-const requireComponent = import.meta.globEager('./**/*.vue')
+
+const requireComponent = import.meta.glob('./**/*.vue', { eager: true })
 
 function guide(Vue: Type.Object) {
   for (const fileName in requireComponent) {

src/types/env.d.ts

@@ -26,11 +26,11 @@ interface ImportMeta {
     // readonly env: ImportMetaEnv
     
   
-    glob(pattern: string): Record<
+    glob(pattern: string, { eager: boolean }): Record<
       string,
-      () => Promise<{
+      {
         [key: string]: any
-      }>
+      }
     >
   
     globEager(pattern: string): Record<