mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-11 13:50:59 +00:00
build(frontend): Phase 2 — scaffold Vite + Vue 3 + AD-Vue 4
Adds a frontend/ directory that lives alongside the legacy web/html/ Vue 2 templates during the migration. Vite builds into ../web/dist/ so the Go binary will be able to embed the result via embed.FS once Phase 4 starts moving real pages over. - package.json pins Vue 3.5, Ant Design Vue 4.2, Vite 6, vue-i18n 10 - vite.config.js: dev server on :5173 with API proxy to the Go panel on :2053; build output to ../web/dist/ - src/App.vue is currently a smoke-test placeholder — delete once the first real page (login) lands in Phase 4 - node_modules and dist are already ignored at repo root To verify locally: cd frontend && npm install && npm run dev Pages will be migrated one at a time on the vue3-migration branch. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const message = ref('Vue 3 + Ant Design Vue 4 scaffold is alive');
|
||||
const count = ref(0);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout class="layout">
|
||||
<a-layout-header class="header">
|
||||
<h1>3x-ui (vue3-migration scaffold)</h1>
|
||||
</a-layout-header>
|
||||
<a-layout-content class="content">
|
||||
<a-space direction="vertical" :size="16" style="width: 100%">
|
||||
<a-alert :message="message" type="success" show-icon />
|
||||
<a-card title="Smoke test">
|
||||
<p>If you see this card with a styled button below, the toolchain works.</p>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="count++">Clicked {{ count }} times</a-button>
|
||||
<a-button @click="count = 0">Reset</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-space>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.header {
|
||||
background: #001529;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.header h1 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
.content {
|
||||
padding: 24px;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
import { createApp } from 'vue';
|
||||
import Antd from 'ant-design-vue';
|
||||
import 'ant-design-vue/dist/reset.css';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(Antd);
|
||||
app.mount('#app');
|
||||
Reference in New Issue
Block a user