将这个代码从vue2转到vue3怎么修改

将 Vue 2 项目迁移到 Vue 3 需要进行一些关键的改动和更新。以下是针对你提供的代码的一些主要修改建议：

### 1. 更新依赖
首先，需要在 `package.json` 中更新依赖项，将 `vue` 和相关插件从 Vue 2 版本升级到 Vue 3 版本。

{
  "dependencies": {
    "vue": "^3.0.0",
    "ant-design-vue": "^3.0.0", // 如果使用的是 Ant Design Vue
    "axios": "^0.21.1", // 如果使用 Axios
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

运行 `npm install` 或 `yarn` 来安装新的依赖。

### 2. 修改模板语法
Vue 3 对模板语法有一些变化，但大多数情况下是兼容的。你需要检查并调整一些特定的部分。

### 3. 组件选项 API 改变
Vue 3 引入了 Composition API，你可以选择继续使用 Options API，或者迁移为 Composition API。

#### 使用 Options API
如果你选择继续使用 Options API，大部分代码可以保持不变，只需做一些小的调整。

<template>
  <div class="all">
    <div class="left-column">
      <h2>欢迎使用智慧社区商城后台管理系统</h2>
      <img style="width: 300px; height: 300px;" src="@/assets/logo1.jpg" alt="Logo" />
      <p>万里学院大数据与软件工程学院提供技术支持</p>
      <p>基于Vue+springBoot技术实现</p>
    </div>
    <a-divider class="divider" type="vertical"></a-divider>
    <div class="right-column">
      <a-form :model="loginObject" style="margin-top: 35px;">
        <!-- 表单项 -->
        <a-form-item style="margin-left: 180px;" prop="companyCode">
          <svg class="login-icon" ...>
            ...
          </svg>
          <a-select v-model="loginObject.companyCode" show-search size="large" @select="getHallCode" option-filter-prop="children">
            <a-select-option v-for="item in companiesInfo" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 其他表单项类似处理 -->
      </a-form>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { login, getImage, getHallCode, getReadcard, gethallCode, getCompanies } from '../utils/api';
import md5 from 'md5';
import { encryption } from '@/utils/encryption/aesEncrypt';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const loginObject = ref({
      companyCode: '',
      username: '',
      password: '',
      hallCode: '',
      code: '',
      rememberMe: false,
    });
    const companiesInfo = ref([]);
    const hallCodeDataList = ref([]);
    const randCodeImage = ref('');
    const verifiedCode = ref('');
    const requestCodeSuccess = ref(false);
    const loginBtn = ref(false);
    const encryptedString = ref({ key: "1234567890adbcde", iv: "1234567890hjlkew" });

    const handleChangeCheckCode = (url) => {
      const currdatetime = new Date().getTime();
      url = '/' + currdatetime;
      getImage(url).then(res => {
        if (res.success) {
          randCodeImage.value = res.result;
          requestCodeSuccess.value = true;
          generateCode(res.result);
        } else {
          message.error(res.message);
          requestCodeSuccess.value = false;
        }
      }).catch(() => {
        requestCodeSuccess.value = false;
      });
    };

    const handleSubmit = async () => {
      try {
        const loginParams = {
          companyCode: loginObject.value.companyCode,
          username: loginObject.value.username,
          password: encryption(new Date().getTime() + md5(loginObject.value.password), encryptedString.value.key, encryptedString.value.iv),
          hallCode: loginObject.value.hallCode,
          remember_me: loginObject.value.rememberMe,
          timestamp: new Date().getTime(),
          captcha: loginObject.value.code,
          checkKey: new Date().getTime(),
        };
        loginBtn.value = true;
        const response = await login(loginParams);
        if (response.code === 200) {
          message.success('欢迎回来', 1);
          router.push("/photo");
        } else {
          console.error('登录失败', response.message);
        }
      } catch (error) {
        console.error('请求错误', error);
      } finally {
        loginBtn.value = false;
      }
    };

    onMounted(() => {
      localStorage.setItem('icCardModeLogin', 'http://127.0.0.1:16021');
      handleChangeCheckCode();
      getHallCodeList();
      getCompaniesInfo();
    });

    // 其他方法类似处理

    return {
      loginObject,
      companiesInfo,
      hallCodeDataList,
      randCodeImage,
      verifiedCode,
      requestCodeSuccess,
      loginBtn,
      handleChangeCheckCode,
      handleSubmit,
      // 其他返回值
    };
  },
};
</script>

<style scoped>
/* 样式部分无需大改 */
.all {
  display: flex;
  min-height: 780px;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #FBAB7E;
  background-image: linear-gradient(315deg, #FBAB7E 0%, #f9dc8e 100%);
  box-shadow: 2px 5px 5px 5px rgba(0, 0, 0, 0.1);
}

.left-column {
  width: 45%;
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15);
}

.right-column {
  width: 45%;
  height: 508px;
  text-align: left;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15);
}

.ant-select-selection {
  width: 330px;
  height: 40px;
}

.divider {
  height: 200px;
}

.left-column h2,
.right-column h2 {
  font-size: 26px;
  color: #555;
  font-weight: bold;
}

.login-form-forgot {
  margin-left: 150px;
}

.left-column p {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #777;
  margin-top: 30px;
}

.right-column .login-icon {
  position: absolute;
  left: -24px;
  top: 10px;
  z-index: 1000;
}

.right-column .login-icon2 {
  position: absolute;
  left: -24px;
  top: 0px;
  z-index: 1000;
}

.right-column .login-icon3 {
  position: absolute;
  left: -25px;
  top: -2px;
  z-index: 1000;
}

.right-column .login-icon4 {
  position: absolute;
  left: -25px;
  top: 10px;
  z-index: 1000;
}

.right-column .login-icon5 {
  position: absolute;
  left: -340px;
  top: 10px;
  z-index: 1000;
}

.captchImg {
  margin-left: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
}

a-button {
  font-size: 16px;
  padding: 5px 15px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

a-button[type="primary"] {
  background-color: #ff6b6b;
  border-color: #ff6b6b;
}

a-button:hover {
  transform: scale(1.05);
}
</style>

### 4. 处理其他组件和逻辑
对于其他组件和逻辑，也需要进行类似的迁移。确保所有依赖项都已更新，并且所有方法和属性都按 Vue 3 的规范进行了调整。

### 5. 测试
最后，进行全面的测试以确保所有功能正常工作。特别是表单验证、API 请求和状态管理等关键部分。

通过以上步骤，你应该能够成功将 Vue 2 项目迁移到 Vue 3。如果有任何具体的问题或错误，请随时提问。