prototype-vue3-frameworklisted

Create or repair a runnable Vue 3.4 + Ant Design Vue 4 mock demo framework for PSM prototype pages. Use when you need to initialize a Vue3 frontend demo project, copy the shared framework template, verify menu dynamic imports, or provide the target project for prototype-to-vue3 converted pages. Vue3 edition — same visual style, layout, naming conventions and design tokens as the Vue2 framework, with the runtime upgraded to Vue 3 / AntD Vue 4 / Vue Router 4 / Vuex 4.
xiaofengche123/prototype-validation-service · ★ 1 · Web & Frontend · score 69

Install: claude install-skill xiaofengche123/prototype-validation-service

# Prototype Vue Framework (Vue3 edition) Create a standalone mock Vue3 framework that converted prototype pages can run inside. The template includes login, shell layout, side menu, multi-tab routing, local mock menu data, and one sample page. It is the Vue3 upgrade of the Vue2 demo framework: identical look/feel, style tokens, directory layout and naming rules, with the stack upgraded to **Vue 3.4 + Ant Design Vue 4 + Vue Router 4 + Vuex 4**. ## Resources - Copy the full project template from `assets/framework-template/`. - Read `references/psm-ui-profile.md` when validating naming, menu shape, style tokens, AntD Vue 4 API usage, or red lines. - Read `references/visual-parity.md` when validating the prototype parity style layer. - Read `references/manual.md` only for extra examples or troubleshooting. ## Hard Rules - Vue page paths use English codes only: `src/views/<模块>/<子模块>/<编码>.vue`. - API files use lowercase code names: `src/views/<模块>/<子模块>/<编码小写>Api.js`. - `src/mock/data/menu.js` must keep `formEname == <编码> == .vue filename`. - `formLoadPath` must be `/views/<模块>/<子模块>/<编码>`. - Chinese appears in Vue only as display text such as `groupCname`, `formCname`, and titles. - Keep the primary color `#1565c0`; do not introduce `#0052d9`. - Use the Vue3 / Ant Design Vue 4 idioms (see `references/psm-ui-profile.md` §8 and the template's `README.md`): `createApp`, `v-model:value`, `<a-form>` + `<a-form-item name>`, table `#bodyCell` slot, `v-model:open` modals, `:deep()`,