当前位置：首页 > news >正文

活到老学到老之vue-vben-admin项目添加简单页面

news 2025/8/22 6:47:41

我用的是web-antd子项目。

在src/router/routes/modules目录下添加路由文件，例如，xxx.ts

import type { RouteRecordRaw } from 'vue-router';import { $t } from '@/locales';const routes: RouteRecordRaw[] = [{meta: {icon: 'mdi:file-download', // 可自选图标title: $t('page.xxx.title'), // 多语言 key，可在 locales 配置中定义order: 1100,},name: 'xxx',path: '/xxx',component: () => import('#/views/xxx/index.vue'),},
];export default routes;

在src/views目录下创建目录xxx，在src/views/xxx目录下创建index.vue

<script setup lang="ts">
import { ref } from 'vue';import { Alert, Button, Card, Input, message } from 'ant-design-vue';import PageWrapper from '#/components/Page/PageWrapper.vue';const aabUrl = ref('');
const apkUrl = ref('');
const errorMessage = ref('');
const loading = ref(false);const handleSubmit = async () => {if (!aabUrl.value) {message.warning('请输入 yyy 链接');return;}loading.value = true;errorMessage.value = '';apkUrl.value = '';// 先用假数据联调 UIawait new Promise((r) => setTimeout(r, 500));apkUrl.value = 'https://example.com/test.apk';message.success('解析成功！');loading.value = false;
};
</script><template><PageWrapper title="yyy 解析下载"><div class="p-4"><Card><div style="margin-bottom: 16px"><Inputv-model:value="zzz"placeholder="粘贴 yyy 下载链接"style="width: 400px; margin-right: 10px"/><Button type="primary" :loading="loading" @click="handleSubmit">提交</Button></div><Alert v-if="kkkUrl" type="success" message="kkk 解析成功，点击下载："><template #description><a :href="kkkUrl" target="_blank">点击下载 KKK</a></template></Alert><Alertv-if="errorMessage"type="error":message="errorMessage"show-icon/></Card></div></PageWrapper>
</template><style scoped>
/* 可选样式 */
</style>

在src目录下创建components/Page/PageWrapper.vue，页面装饰器

<script setup lang="ts">
// 可以为空或包含 props，如 title
</script><template><div class="page-wrapper"><slot></slot></div>
</template><style scoped>
.page-wrapper {padding: 16px;
}
</style>

配置多语言：

在src/locales/langs/zh-CN/page.json中添加：

{"auth": {"login": "登录","register": "注册","codeLogin": "验证码登录","qrcodeLogin": "二维码登录","forgetPassword": "忘记密码"},"dashboard": {"title": "概览","analytics": "分析页","workspace": "工作台"},"xxx": {"title": "yyy 下载","submit": "提交","placeholder": "粘贴 yyy 下载链接","success": "解析成功, KKK 准备就绪","error": "解析失败，请检查链接是否有效"}
}

在src/locales/langs/en-US/page.json中添加：

{"auth": {"codeLogin": "Code Login","forgetPassword": "Forget Password","login": "Login","qrcodeLogin": "Qr Code Login","register": "Register"},"dashboard": {"analytics": "Analytics","title": "Dashboard","workspace": "Workspace"},"xxx": {"title": "yyy Download","submit": "Submit","placeholder": "download link","success": "analysis success","error": "analysis fail, please check the link is valid"}
}

重启项目

h20:02:31Shortcutspress r + enter to restart the server                               20:02:31press u + enter to show server url                                  20:02:31press o + enter to open in browser                                  20:02:31press c + enter to clear console                                    20:02:31press q + enter to quit