支持 Vue 3.2.x 语法升级为，script setup

src/views/login/index.vue

@@ -50,7 +50,7 @@
                 <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
               </div>
               <div class="flex-initial order-last">
-                <a href="javascript:;">忘记密码</a>
+                <a href="javascript:">忘记密码</a>
               </div>
             </div>
           </n-form-item>
@@ -65,21 +65,21 @@
                 <span>其它登录方式</span>
               </div>
               <div class="flex-initial mx-2">
-                <a href="javascript:;">
+                <a href="javascript:">
                   <n-icon size="24" color="#2d8cf0">
                     <LogoGithub />
                   </n-icon>
                 </a>
               </div>
               <div class="flex-initial mx-2">
-                <a href="javascript:;">
+                <a href="javascript:">
                   <n-icon size="24" color="#2d8cf0">
                     <LogoFacebook />
                   </n-icon>
                 </a>
               </div>
               <div class="flex-initial" style="margin-left: auto">
-                <a href="javascript:;">注册账号</a>
+                <a href="javascript:">注册账号</a>
               </div>
             </div>
           </n-form-item>
@@ -89,95 +89,83 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref } from 'vue';
-  import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useUserStore } from '@/store/modules/user';
   import { useMessage } from 'naive-ui';
   import { ResultEnum } from '@/enums/httpEnum';
   import logo from '@/assets/images/logo.png';
+  import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
 
   interface FormState {
     username: string;
     password: string;
   }
 
-  export default defineComponent({
-    components: { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook },
-    setup() {
-      const formRef = ref();
-      const message = useMessage();
-      const state = reactive({
-        loading: false,
-        autoLogin: true,
-        formInline: {
-          username: 'admin',
-          password: '123456',
-          isCaptcha: false,
-        },
-      });
-      const rules = {
-        username: { required: true, message: '请输入用户名', trigger: 'blur' },
-        password: { required: true, message: '请输入密码', trigger: 'blur' },
-        isCaptcha: {
-          required: true,
-          type: 'boolean',
-          trigger: 'change',
-          message: '请点击按钮进行验证码校验',
-          validator: (_, value) => value === true,
-        },
-      };
-      const userStore = useUserStore();
+  const formRef = ref();
+  const message = useMessage();
+  const loading = ref(false);
+  const autoLogin = ref(true);
 
-      const router = useRouter();
-      const route = useRoute();
-      const handleSubmit = (e) => {
-        e.preventDefault();
-        formRef.value.validate(async (errors) => {
-          if (!errors) {
-            const { username, password } = state.formInline;
-            message.loading('登录中...');
-            state.loading = true;
-
-            const params: FormState = {
-              username,
-              password,
-            };
-
-            const { code, message: msg } = await userStore.login(params);
-
-            if (code == ResultEnum.SUCCESS) {
-              const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
-              message.success('登录成功！');
-              router.replace(toPath).then((_) => {
-                if (route.name == 'login') {
-                  router.replace('/');
-                }
-              });
-            } else {
-              message.info(msg || '登录失败');
-            }
-          } else {
-            message.error('请填写完整信息，并且进行验证码校验');
-          }
-        });
-      };
-
-      function onAuthCode() {
-        state.formInline.isCaptcha = true;
-      }
-
-      return {
-        ...toRefs(state),
-        formRef,
-        rules,
-        logo,
-        handleSubmit,
-        onAuthCode,
-      };
-    },
+  const formInline = reactive({
+    username: 'admin',
+    password: '123456',
+    isCaptcha: false,
   });
+
+  const rules = {
+    username: { required: true, message: '请输入用户名', trigger: 'blur' },
+    password: { required: true, message: '请输入密码', trigger: 'blur' },
+    isCaptcha: {
+      required: true,
+      type: 'boolean',
+      trigger: 'change',
+      message: '请点击按钮进行验证码校验',
+      validator: (_, value) => value === true,
+    },
+  };
+
+  const userStore = useUserStore();
+
+  const router = useRouter();
+  const route = useRoute();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    formRef.value.validate(async (errors) => {
+      if (!errors) {
+        const { username, password } = formInline;
+        message.loading('登录中...');
+        loading.value = true;
+
+        const params: FormState = {
+          username,
+          password,
+        };
+
+        const { code, message: msg } = await userStore.login(params);
+
+        if (code == ResultEnum.SUCCESS) {
+          const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
+          message.success('登录成功！');
+          router.replace(toPath).then((_) => {
+            if (route.name == 'login') {
+              router.replace('/');
+            }
+          });
+        } else {
+          message.info(msg || '登录失败');
+        }
+      } else {
+        message.error('请填写完整信息，并且进行验证码校验');
+      }
+    });
+  };
+
+  const onAuthCode = () => {
+    formInline.isCaptcha = true;
+  }
 </script>
 
 <style lang="less" scoped>