Version-aware references, local fixtures and the small contracts shared by the three projects.
The workbench#
Keep the generations separate#
| Work | Framework and tools | Read here |
|---|---|---|
| Reader | Vue 2.7, Router 3, Vuex 3, Vant 2, Axios, Less | Vue 2 guide · Router 3 · Vuex 3 |
| Editorial desk | Vue 3, Vite, Router 4, Pinia, Element Plus, Axios, Sass | Vue introduction · Pinia · Element Plus |
| Consultation | Vue 3 + TypeScript, Vant 4, VueUse, Vitest, happy-dom, ESLint | Typed Vue · Vitest · VueUse |
These are compatibility families, not a floating instruction to install every package at its latest version. Commit the resolved lockfile. Vue 2 is archived: use its matching Router, Vuex and Vant generations. For Vue 3, create-vue offers a Vite-based project and TypeScript / ESLint options; select JavaScript for the dashboard, TypeScript for the consultation service.
Use the official Vue 2 installation guide for the initial browser-based exercises and its SFC tooling guide when extracting components. The Vue 3 quick start owns current installation instructions. Keep the two projects in separate folders so that dependency versions cannot silently cross the migration boundary.
Fixture material you can use now#
Download the article and consultation fixtures. The JSON contains invented article records, channels, accounts, doctors and consultation states. It is source material, not a running backend. Copy it into your application and implement a local request adapter; backend development is not part of the assessment.
Download a deterministic request adapter. This dependency-free module demonstrates delay, forced 401, failure and empty results through the same asynchronous boundary. Use it while sketching, then put the adapter behind your Axios request layer. Extend its small contract for your project’s operations rather than claiming these sample endpoints constitute a complete service.
Shared article model#
interface Article {
id: string
channelId: string
title: string
body: string
publishedAt: string
}The reader and editorial desk share article IDs and channel IDs. A saved collection stores IDs, not a second copy of every article. Recommended and latest feeds can sort the same fixture differently. Registration and account updates should alter your local fixture state; avatar upload can store a local preview, and password reset can simulate a success or failure response.
Request contract#
Use a result envelope containing a business code and data. A transport error, an expired session and a successful empty list are three different outcomes. Choose a stable error shape once in the request layer.
{ "code": "OK", "data": { "items": [], "nextPage": null } }For the consultation project, model department, doctor, patient, consultation, message and order IDs separately. Validate fixture input before treating it as a typed record. A paid order has a simulated receipt ID; a failed order has an explanation and no receipt.
Reproducible scenarios#
| Scenario | Deliberate input | Expected observation |
|---|---|---|
| slow | Delay the response | Pending state remains visible; duplicate submit is blocked |
| empty | Return no records | An explanation appears, not an endless spinner |
| unauthorised | Reject with status 401 | Clear stale identity and offer login |
| failure | Reject the next request | Keep recoverable input and offer retry |
| success | Return the normal fixture | Commit one result, then clear pending state |
Write the selected scenario in the README so a reviewer can repeat it. Use fake timers for deterministic unit tests and a browser for actual focus, scrolling and layout.
Migration reference#
Vue 3 breaking changes is the checklist for API differences. Vue 2 end-of-life information explains why the reader is a maintenance exercise. TypeScript narrowing helps turn unknown inputs into a model you can reason about.
Do not read every linked manual cover to cover. Each weekly lecture names the concepts needed for its build.